From 66191e04285173a06c4dd795e388afc2ec8fe5c1 Mon Sep 17 00:00:00 2001 From: Powerplex Date: Mon, 29 Jan 2024 15:31:31 +0100 Subject: [PATCH] fix(dropdown): prevent radix focus trap to disable scroll inside dropdown --- packages/components/dropdown/src/DropdownItems.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/components/dropdown/src/DropdownItems.tsx b/packages/components/dropdown/src/DropdownItems.tsx index 5b889b15ad..d7e426b117 100644 --- a/packages/components/dropdown/src/DropdownItems.tsx +++ b/packages/components/dropdown/src/DropdownItems.tsx @@ -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 + return (