Wrap the dropdown in a Portal (#153)

zer0-os · Nov 9, 2023 · ecffbd4 · ecffbd4
1 parent 9009c9c
commit ecffbd4
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
diff --git a/src/components/DropdownMenu/DropdownMenu.test.tsx b/src/components/DropdownMenu/DropdownMenu.test.tsx
@@ -55,6 +55,9 @@ jest.mock('@radix-ui/react-dropdown-menu', () => ({
   Arrow: (props: DropdownMenuArrowProps) => {
     mockRadixArrow(props);
     return <div data-testid="arrow">{props.children}</div>;
+  },
+  DropdownMenuPortal: (props: any) => {
+    return <div data-testid="portal">{props.children}</div>;
   }
 }));
 
@@ -70,11 +73,11 @@ describe('<DropdownMenu />', () => {
     const root = container.firstChild;
     const trigger = screen.getByTestId('trigger');
     const content = screen.getByTestId('content');
+    const portal = screen.getByTestId('portal');
 
-    // Check that trigger and content are children of root
     expect(root).toBe(screen.getByTestId('root'));
     expect(trigger.parentElement).toBe(root);
-    expect(content.parentElement).toBe(root);
+    expect(content.parentElement).toBe(portal);
 
     // Check that items are only rendered in the dropdown content
     const items = container.getElementsByClassName('mock-item');

diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -7,7 +7,8 @@ import {
   Root as RadixUIDropdownMenuRoot,
   Trigger as RadixUIDropdownMenuTrigger,
   Content as RadixUIDropdownMenuContent,
-  Item as RadixUIDropdownMenuItem
+  Item as RadixUIDropdownMenuItem,
+  DropdownMenuPortal as RadixDropdownMenuPortal
 } from '@radix-ui/react-dropdown-menu';
 
 import './DropdownMenu.scss';
@@ -70,23 +71,25 @@ export const DropdownMenu = forwardRef<HTMLDivElement, DropdownMenuProps>(
         <RadixUIDropdownMenuTrigger className={classNames(className, 'zui-dropdown-trigger')}>
           {triggerElement}
         </RadixUIDropdownMenuTrigger>
-        <RadixUIDropdownMenuContent
-          className={classNames(menuClassName, 'zui-dropdown-menu')}
-          align={alignMenu}
-          side={side}
-          ref={ref}
-        >
-          {alignMenu === 'center' && showArrow && <RadixUIDropdownMenuArrow className="zui-dropdown-arrow" />}
-          {items.map(item => (
-            <RadixUIDropdownMenuItem
-              className={classNames('zui-dropdown-item', item.className)}
-              key={item.id}
-              onSelect={(event: Event) => item.onSelect(event)}
-            >
-              {item.label}
-            </RadixUIDropdownMenuItem>
-          ))}
-        </RadixUIDropdownMenuContent>
+        <RadixDropdownMenuPortal>
+          <RadixUIDropdownMenuContent
+            className={classNames(menuClassName, 'zui-dropdown-menu')}
+            align={alignMenu}
+            side={side}
+            ref={ref}
+          >
+            {alignMenu === 'center' && showArrow && <RadixUIDropdownMenuArrow className="zui-dropdown-arrow" />}
+            {items.map(item => (
+              <RadixUIDropdownMenuItem
+                className={classNames('zui-dropdown-item', item.className)}
+                key={item.id}
+                onSelect={(event: Event) => item.onSelect(event)}
+              >
+                {item.label}
+              </RadixUIDropdownMenuItem>
+            ))}
+          </RadixUIDropdownMenuContent>
+        </RadixDropdownMenuPortal>
       </RadixUIDropdownMenuRoot>
     );
   }

diff --git a/src/components/SelectInput/SelectInput.test.tsx b/src/components/SelectInput/SelectInput.test.tsx
@@ -46,6 +46,9 @@ jest.mock('@radix-ui/react-dropdown-menu', () => ({
   Item: (props: DropdownMenuItemProps) => {
     mockRadixItem(props);
     return <div className={'mock-item ' + props.className}>{props.children}</div>;
+  },
+  DropdownMenuPortal: (props: any) => {
+    return <div data-testid="portal">{props.children}</div>;
   }
 }));