fix(menu): prevent submenu blur from closing parent menu (#22186)

maradwan26 · web-flow · commit 420d0c273345 · 2026-05-15T07:20:17.000Z
* fix(menu): prevent submenu blur from closing parent menu

* fix: prevent close on return to parent

* chore: cleanup

* fix: focus conflicts

* docs: add comment

* test: codecov
diff --git a/packages/react/src/components/Menu/Menu-test.js b/packages/react/src/components/Menu/Menu-test.js
@@ -229,6 +229,59 @@ describe('Menu', () => {
       expect(menus[0]).toHaveClass('cds--menu--open');
       expect(menus[1]).toHaveClass('cds--menu--open');
     });
+
+    it('should close submenu and keep root menu open when submenu is blurred', async () => {
+      const menus = screen.getAllByRole('menu');
+
+      const submenu = screen.getByRole('menuitem', {
+        name: 'Submenu Submenu',
+      });
+
+      // hover over submenu to open it
+      await act(() => {
+        fireEvent.mouseEnter(submenu);
+        jest.runOnlyPendingTimers();
+      });
+      expect(menus[0]).toHaveClass('cds--menu--open');
+      expect(menus[1]).toHaveClass('cds--menu--open');
+
+      // blur the submenu to close it, root menu should stay open
+      await act(() => {
+        fireEvent.mouseLeave(submenu);
+        jest.runOnlyPendingTimers();
+      });
+
+      expect(menus[0]).toHaveClass('cds--menu--open');
+      expect(menus[1]).not.toHaveClass('cds--menu--open');
+    });
+
+    it('should not close submenu when hovering back to parent menu item', async () => {
+      const menus = screen.getAllByRole('menu');
+
+      const submenu = screen.getByRole('menuitem', {
+        name: 'Submenu Submenu',
+      });
+
+      // hover over submenu to open it
+      await act(() => {
+        fireEvent.mouseEnter(submenu);
+        jest.runOnlyPendingTimers();
+      });
+      expect(menus[0]).toHaveClass('cds--menu--open');
+      expect(menus[1]).toHaveClass('cds--menu--open');
+
+      // simulate mouse leaving child and entering parent
+      const childMenuItem = screen.getByRole('menuitem', { name: 'Item' });
+      await act(() => {
+        fireEvent.mouseLeave(childMenuItem, {
+          relatedTarget: submenu,
+        });
+        jest.runOnlyPendingTimers();
+      });
+
+      expect(menus[0]).toHaveClass('cds--menu--open');
+      expect(menus[1]).toHaveClass('cds--menu--open');
+    });
   });
 });
 
diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx
@@ -117,7 +117,36 @@ export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
       context: floatingContext,
     } = useFloating({
       open: submenuOpen,
-      onOpenChange: setSubmenuOpen,
+      onOpenChange: (open, event) => {
+        if (open) {
+          setSubmenuOpen(true);
+        } else {
+          const relatedTarget =
+            event && 'relatedTarget' in event ? event.relatedTarget : null;
+
+          // Do not close submenu if hovering back to its parent
+          if (
+            relatedTarget instanceof Node &&
+            menuItem.current?.contains(relatedTarget)
+          ) {
+            return;
+          }
+
+          setSubmenuOpen(false);
+
+          // do not focus parent menu if moving to another submenu,
+          // focus should instead move to that submenu
+          const movingToSubmenu =
+            relatedTarget instanceof HTMLElement &&
+            relatedTarget
+              .closest('[role="menuitem"]')
+              ?.querySelector('[role="menu"]');
+
+          if (!movingToSubmenu) {
+            menuItem.current?.focus();
+          }
+        }
+      },
       placement: rtl ? 'left-start' : 'right-start',
       whileElementsMounted: autoUpdate,
       middleware: [offset({ mainAxis: -6, crossAxis: -6 })],
