diff --git a/packages/react/dropdown-menu/src/DropdownMenu.tsx b/packages/react/dropdown-menu/src/DropdownMenu.tsx index 98e855390..2a92d83d5 100644 --- a/packages/react/dropdown-menu/src/DropdownMenu.tsx +++ b/packages/react/dropdown-menu/src/DropdownMenu.tsx @@ -421,6 +421,16 @@ const DropdownMenuSub: React.FC = ( onChange: onOpenChange, }); + useEffect(() => { + // Close submenu on window focus + const handleWindowFocus = () => setOpen(false); + + window.addEventListener('focus', handleWindowFocus); + return () => { + window.removeEventListener('focus', handleWindowFocus); + }; + }, [setOpen]); + return ( {children} @@ -455,36 +465,38 @@ DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME; const SUB_CONTENT_NAME = 'DropdownMenuSubContent'; -type DropdownMenuSubContentElement = React.ElementRef; +type DropdownMenuSubContentElement = React.ElementRef; type MenuSubContentProps = React.ComponentPropsWithoutRef; interface DropdownMenuSubContentProps extends MenuSubContentProps {} -const DropdownMenuSubContent = React.forwardRef< - DropdownMenuSubContentElement, - DropdownMenuSubContentProps ->((props: ScopedProps, forwardedRef) => { - const { __scopeDropdownMenu, ...subContentProps } = props; - const menuScope = useMenuScope(__scopeDropdownMenu); - - return ( - - ); -}); +const DropdownMenuSubContent = React.memo( + React.forwardRef( + (props: ScopedProps, forwardedRef) => { + const { __scopeDropdownMenu, style, ...subContentProps } = props; + const menuScope = useMenuScope(__scopeDropdownMenu); + + return ( + + ); + } + ) +); DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;