fix: Dropdown menus rendering outside SPA container
- Add getPortalContainer to DropdownMenuContent (like Dialog) - Portal container created inside #woonoow-admin-app - Copy theme class (light/dark) for proper CSS variable inheritance - Fixes Add Section dropdown styling in Page Editor
This commit is contained in:
@@ -57,8 +57,33 @@ DropdownMenuSubContent.displayName =
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => {
|
||||
// Get or create portal container inside the app for proper CSS scoping
|
||||
const getPortalContainer = () => {
|
||||
const appContainer = document.getElementById('woonoow-admin-app');
|
||||
if (!appContainer) return document.body;
|
||||
|
||||
let portalRoot = document.getElementById('woonoow-dropdown-portal');
|
||||
if (!portalRoot) {
|
||||
portalRoot = document.createElement('div');
|
||||
portalRoot.id = 'woonoow-dropdown-portal';
|
||||
// Copy theme class from documentElement for proper CSS variable inheritance
|
||||
const themeClass = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
||||
portalRoot.className = themeClass;
|
||||
appContainer.appendChild(portalRoot);
|
||||
} else {
|
||||
// Update theme class in case it changed
|
||||
const themeClass = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
||||
if (!portalRoot.classList.contains(themeClass)) {
|
||||
portalRoot.classList.remove('light', 'dark');
|
||||
portalRoot.classList.add(themeClass);
|
||||
}
|
||||
}
|
||||
return portalRoot;
|
||||
};
|
||||
|
||||
return (
|
||||
<DropdownMenuPrimitive.Portal container={getPortalContainer()}>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
@@ -70,7 +95,8 @@ const DropdownMenuContent = React.forwardRef<
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
))
|
||||
);
|
||||
})
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
|
||||
Reference in New Issue
Block a user