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}
;
}
}));