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 7fed9d3 commit 66191e0
Showing 1 changed file with 11 additions and 0 deletions.
11 changes: 11 additions & 0 deletions packages/components/dropdown/src/DropdownItems.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,17 @@ export const Items = forwardRef(

const ref = useMergeRefs(forwardedRef, downshiftRef)

/**
* 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.
*
*/
delete (props as any).style.pointerEvents

Check warning on line 33 in packages/components/dropdown/src/DropdownItems.tsx

View workflow job for this annotation

GitHub Actions / Lint

Unexpected any. Specify a different type

return (
<ul
ref={ref}
Expand Down

0 comments on commit 66191e0

Please sign in to comment.