fix: fix dropdown menu selection issue (radix-ui#3306)

kanavbajaj · Jan 8, 2025 · 8c5ad9a · 8c5ad9a
1 parent dae8ef4
commit 8c5ad9a
Showing 1 changed file with 39 additions and 27 deletions.
diff --git a/packages/react/dropdown-menu/src/DropdownMenu.tsx b/packages/react/dropdown-menu/src/DropdownMenu.tsx
@@ -421,6 +421,16 @@ const DropdownMenuSub: React.FC<DropdownMenuSubProps> = (
     onChange: onOpenChange,
   });
 
+  useEffect(() => {
+    // Close submenu on window focus
+    const handleWindowFocus = () => setOpen(false);
+
+    window.addEventListener('focus', handleWindowFocus);
+    return () => {
+      window.removeEventListener('focus', handleWindowFocus);
+    };
+  }, [setOpen]);
+
   return (
     <MenuPrimitive.Sub {...menuScope} open={open} onOpenChange={setOpen}>
       {children}
@@ -455,36 +465,38 @@ DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 
 const SUB_CONTENT_NAME = 'DropdownMenuSubContent';
 
-type DropdownMenuSubContentElement = React.ElementRef<typeof MenuPrimitive.Content>;
+type DropdownMenuSubContentElement = React.ElementRef<typeof MenuPrimitive.SubContent>;
 type MenuSubContentProps = React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;
 interface DropdownMenuSubContentProps extends MenuSubContentProps {}
 
-const DropdownMenuSubContent = React.forwardRef<
-  DropdownMenuSubContentElement,
-  DropdownMenuSubContentProps
->((props: ScopedProps<DropdownMenuSubContentProps>, forwardedRef) => {
-  const { __scopeDropdownMenu, ...subContentProps } = props;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-
-  return (
-    <MenuPrimitive.SubContent
-      {...menuScope}
-      {...subContentProps}
-      ref={forwardedRef}
-      style={{
-        ...props.style,
-        // re-namespace exposed content custom properties
-        ...{
-          '--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',
-          '--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',
-          '--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)',
-          '--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',
-          '--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)',
-        },
-      }}
-    />
-  );
-});
+const DropdownMenuSubContent = React.memo(
+  React.forwardRef<DropdownMenuSubContentElement, DropdownMenuSubContentProps>(
+    (props: ScopedProps<DropdownMenuSubContentProps>, forwardedRef) => {
+      const { __scopeDropdownMenu, style, ...subContentProps } = props;
+      const menuScope = useMenuScope(__scopeDropdownMenu);
+
+      return (
+        <MenuPrimitive.SubContent
+          {...menuScope}
+          {...subContentProps}
+          ref={forwardedRef}
+          style={{
+            // Default styles for the subcontent
+            '--radix-dropdown-menu-content-transform-origin':
+              'var(--radix-popper-transform-origin)',
+            '--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',
+            '--radix-dropdown-menu-content-available-height':
+              'var(--radix-popper-available-height)',
+            '--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',
+            '--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)',
+            // Allow user-defined styles to override defaults
+            ...style,
+          }}
+        />
+      );
+    }
+  )
+);
 
 DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;