Skip to content

Commit

Permalink
fix(dropdown): prevent radix focus trap to disable scroll inside drop…
Browse files Browse the repository at this point in the history
…down
  • Loading branch information
Powerplex committed Jan 29, 2024
1 parent cee11f6 commit 6e2dd39
Showing 1 changed file with 11 additions and 1 deletion.
12 changes: 11 additions & 1 deletion packages/components/dropdown/src/DropdownItems.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useMergeRefs } from '@spark-ui/use-merge-refs'
import { cx } from 'class-variance-authority'
import { forwardRef, ReactNode, type Ref } from 'react'
import { CSSProperties, forwardRef, ReactNode, type Ref } from 'react'

import { useDropdownContext } from './DropdownContext'

Expand Down Expand Up @@ -32,6 +32,16 @@ export const Items = forwardRef(
)}
{...props}
{...downshiftMenuProps}
/**
* When used inside a Radix dialog/drawer, the focus trap behaviour of Radix prevent scrolling and hovering inside absolutely positioned elements in the dialog.
* It does programatically in JS using the `style` attribute.
*
* Issue is known but there is no clear fix in sight: https://github.com/radix-ui/primitives/issues/1159
*
* A solution would be to make an abstraction of `Dialog.Overlay` instead of using the radix one, but that would mean managing body scroll freeze and scrollbar shifting ourselves.
*
*/
style={{ ...(props as { style: CSSProperties }).style, pointerEvents: undefined }}
data-spark-component="dropdown-items"
>
{children}
Expand Down

0 comments on commit 6e2dd39

Please sign in to comment.