diff --git a/src/components/DropdownMenu/DropdownMenu.test.tsx b/src/components/DropdownMenu/DropdownMenu.test.tsx index 6a1ff83..539b0d5 100644 --- 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
{props.children}
; + }, + DropdownMenuPortal: (props: any) => { + return
{props.children}
; } })); @@ -70,11 +73,11 @@ describe('', () => { 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 index 9cdec64..cc9dffc 100644 --- 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( {triggerElement} - - {alignMenu === 'center' && showArrow && } - {items.map(item => ( - item.onSelect(event)} - > - {item.label} - - ))} - + + + {alignMenu === 'center' && showArrow && } + {items.map(item => ( + item.onSelect(event)} + > + {item.label} + + ))} + + ); } diff --git a/src/components/SelectInput/SelectInput.test.tsx b/src/components/SelectInput/SelectInput.test.tsx index 92a84f7..f67c435 100644 --- 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
{props.children}
; + }, + DropdownMenuPortal: (props: any) => { + return
{props.children}
; } }));