[context menu][menubar] Ensure submenus close when parents close

packages/react/src/context-menu/root/ContextMenuRoot.test.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { fireEvent, screen, waitFor } from '@mui/internal-test-utils';
+import { spy } from 'sinon';
+import { ContextMenu } from '@base-ui-components/react/context-menu';
+import { createRenderer } from '#test-utils';
+
+describe('<ContextMenu.Root />', () => {
+  beforeEach(() => {
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
+  });
+
+  const { render, clock } = createRenderer({
+    clockOptions: {
+      shouldAdvanceTime: true,
+    },
+  });
+
+  describe('interactions', () => {
+    clock.withFakeTimers();
+
+    it('closes nested submenus when releasing the context menu pointer over an item', async () => {
+      const rootOnOpenChange = spy();
+      const submenuOnOpenChange = spy();
+
+      const { user } = await render(
+        <ContextMenu.Root onOpenChange={rootOnOpenChange}>
+          <ContextMenu.Trigger data-testid="context-trigger">Surface</ContextMenu.Trigger>
+          <ContextMenu.Portal>
+            <ContextMenu.Positioner>
+              <ContextMenu.Popup data-testid="context-root-popup">
+                <ContextMenu.SubmenuRoot defaultOpen onOpenChange={submenuOnOpenChange} delay={1}>
+                  <ContextMenu.SubmenuTrigger data-testid="context-submenu-trigger">
+                    More options
+                  </ContextMenu.SubmenuTrigger>
+                  <ContextMenu.Portal>
+                    <ContextMenu.Positioner>
+                      <ContextMenu.Popup data-testid="context-submenu-popup">
+                        <ContextMenu.Item data-testid="context-submenu-item">
+                          Deep action
+                        </ContextMenu.Item>
+                      </ContextMenu.Popup>
+                    </ContextMenu.Positioner>
+                  </ContextMenu.Portal>
+                </ContextMenu.SubmenuRoot>
+              </ContextMenu.Popup>
+            </ContextMenu.Positioner>
+          </ContextMenu.Portal>
+        </ContextMenu.Root>,
+      );
+
+      const trigger = screen.getByTestId('context-trigger');
+
+      fireEvent.contextMenu(trigger, { clientX: 10, clientY: 10, button: 2 });
+
+      await screen.findByTestId('context-root-popup');
+
+      const submenuTrigger = screen.getByTestId('context-submenu-trigger');
+      await user.hover(submenuTrigger);
+
+      await screen.findByTestId('context-submenu-popup');
+
+      const submenuItem = screen.getByTestId('context-submenu-item');
+      fireEvent.mouseUp(submenuItem, { button: 2 });
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('context-submenu-popup')).to.equal(null);
+      });
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('context-root-popup')).to.equal(null);
+      });
+
+      expect(submenuOnOpenChange.lastCall?.args[0]).to.equal(false);
+      expect(submenuOnOpenChange.lastCall?.args[1].reason).to.equal('item-press');
+      expect(rootOnOpenChange.lastCall?.args[0]).to.equal(false);
+      expect(rootOnOpenChange.lastCall?.args[1].reason).to.equal('item-press');
+    });
+  });
+});

packages/react/src/context-menu/trigger/ContextMenuTrigger.tsx

@@ -8,6 +8,7 @@ import type { BaseUIComponentProps } from '../../utils/types';
 import { useContextMenuRootContext } from '../root/ContextMenuRootContext';
 import { useRenderElement } from '../../utils/useRenderElement';
 import { createBaseUIEventDetails } from '../../utils/createBaseUIEventDetails';
+import { findRootOwnerId } from '../../menu/utils/findRootOwnerId';
 
 const LONG_PRESS_DELAY = 500;
 
@@ -30,6 +31,7 @@ export const ContextMenuTrigger = React.forwardRef(function ContextMenuTrigger(
     backdropRef,
     positionerRef,
     allowMouseUpTriggerRef,
+    rootId,
   } = useContextMenuRootContext(false);
 
   const triggerRef = React.useRef<HTMLDivElement | null>(null);
@@ -80,7 +82,13 @@ export const ContextMenuTrigger = React.forwardRef(function ContextMenuTrigger(
         allowMouseUpTimeout.clear();
         allowMouseUpRef.current = false;
 
-        if (contains(positionerRef.current, getTarget(mouseEvent) as Element | null)) {
+        const mouseUpTarget = getTarget(mouseEvent) as Element | null;
+
+        if (contains(positionerRef.current, mouseUpTarget)) {
+          return;
+        }
+
+        if (rootId && mouseUpTarget && findRootOwnerId(mouseUpTarget) === rootId) {
           return;
         }
 

packages/react/src/menu/positioner/MenuPositioner.tsx

@@ -9,6 +9,7 @@ import {
 } from '../../floating-ui-react';
 import { MenuPositionerContext } from './MenuPositionerContext';
 import { useMenuRootContext } from '../root/MenuRootContext';
+import type { MenuRoot } from '../root/MenuRoot';
 import { useAnchorPositioning, type Align, type Side } from '../../utils/useAnchorPositioning';
 import { useRenderElement } from '../../utils/useRenderElement';
 import { BaseUIComponentProps } from '../../utils/types';
@@ -160,6 +161,27 @@ export const MenuPositioner = React.forwardRef(function MenuPositioner(
     };
   }, [menuEvents, nodeId, parentNodeId, setOpen, setHoverEnabled]);
 
+  React.useEffect(() => {
+    if (parentNodeId == null) {
+      return undefined;
+    }
+
+    function onParentClose(details: MenuOpenEventDetails) {
+      if (details.open || details.nodeId !== parentNodeId) {
+        return;
+      }
+
+      const reason: MenuRoot.ChangeEventReason = details.reason ?? 'sibling-open';
+      setOpen(false, createBaseUIEventDetails(reason));
+    }
+
+    menuEvents.on('menuopenchange', onParentClose);
+
+    return () => {
+      menuEvents.off('menuopenchange', onParentClose);
+    };
+  }, [menuEvents, parentNodeId, setOpen]);
+
   // Close unrelated child submenus when hovering a different item in the parent menu.
   React.useEffect(() => {
     function onItemHover(event: { nodeId: string | undefined; target: Element | null }) {

packages/react/src/menu/trigger/MenuTrigger.tsx

@@ -1,6 +1,5 @@
 'use client';
 import * as React from 'react';
-import { getParentNode, isHTMLElement, isLastTraversableNode } from '@floating-ui/utils/dom';
 import { useMergedRefs } from '@base-ui-components/utils/useMergedRefs';
 import { useTimeout } from '@base-ui-components/utils/useTimeout';
 import { ownerDocument } from '@base-ui-components/utils/owner';
@@ -15,6 +14,7 @@ import { mergeProps } from '../../merge-props';
 import { useButton } from '../../use-button/useButton';
 import { getPseudoElementBounds } from '../../utils/getPseudoElementBounds';
 import { CompositeItem } from '../../composite/item/CompositeItem';
+import { findRootOwnerId } from '../utils/findRootOwnerId';
 
 const BOUNDARY_OFFSET = 2;
 
@@ -201,15 +201,3 @@ export namespace MenuTrigger {
     open: boolean;
   };
 }
-
-function findRootOwnerId(node: Node): string | undefined {
-  if (isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
-    return node.getAttribute('data-rootownerid') ?? undefined;
-  }
-
-  if (isLastTraversableNode(node)) {
-    return undefined;
-  }
-
-  return findRootOwnerId(getParentNode(node));
-}

packages/react/src/menu/utils/findRootOwnerId.ts

@@ -0,0 +1,13 @@
+import { getParentNode, isHTMLElement, isLastTraversableNode } from '@floating-ui/utils/dom';
+
+export function findRootOwnerId(node: Node): string | undefined {
+  if (isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
+    return node.getAttribute('data-rootownerid') ?? undefined;
+  }
+
+  if (isLastTraversableNode(node)) {
+    return undefined;
+  }
+
+  return findRootOwnerId(getParentNode(node));
+}

packages/react/src/menubar/Menubar.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { act, screen, waitFor } from '@mui/internal-test-utils';
 import { createRenderer, describeConformance, isJSDOM } from '#test-utils';
+import { spy } from 'sinon';
 import { afterEach } from 'vitest';
 import { Menubar } from '@base-ui-components/react/menubar';
 import { Menu } from '@base-ui-components/react/menu';
@@ -469,6 +470,96 @@ describe('<Menubar />', () => {
       expect(shareTrigger).toHaveFocus();
     });
 
+    it.skipIf(!isJSDOM)(
+      'closes open submenus when navigating to the next menubar item with ArrowRight',
+      async () => {
+        const rootOnOpenChange = spy();
+        const submenuOnOpenChange = spy();
+        const nextOnOpenChange = spy();
+
+        function SpyMenubar() {
+          return (
+            <Menubar>
+              <Menu.Root onOpenChange={rootOnOpenChange}>
+                <Menu.Trigger data-testid="menubar-file-trigger">File</Menu.Trigger>
+                <Menu.Portal>
+                  <Menu.Positioner data-testid="menubar-file-menu">
+                    <Menu.Popup>
+                      <Menu.Item data-testid="menubar-file-item">Item 1</Menu.Item>
+                      <Menu.SubmenuRoot onOpenChange={submenuOnOpenChange}>
+                        <Menu.SubmenuTrigger data-testid="menubar-submenu-trigger">
+                          Share
+                        </Menu.SubmenuTrigger>
+                        <Menu.Portal>
+                          <Menu.Positioner data-testid="menubar-submenu-menu">
+                            <Menu.Popup>
+                              <Menu.Item data-testid="menubar-submenu-item">Email</Menu.Item>
+                            </Menu.Popup>
+                          </Menu.Positioner>
+                        </Menu.Portal>
+                      </Menu.SubmenuRoot>
+                    </Menu.Popup>
+                  </Menu.Positioner>
+                </Menu.Portal>
+              </Menu.Root>
+              <Menu.Root onOpenChange={nextOnOpenChange}>
+                <Menu.Trigger data-testid="menubar-next-trigger">Edit</Menu.Trigger>
+                <Menu.Portal>
+                  <Menu.Positioner data-testid="menubar-next-menu">
+                    <Menu.Popup>
+                      <Menu.Item>Edit Item</Menu.Item>
+                    </Menu.Popup>
+                  </Menu.Positioner>
+                </Menu.Portal>
+              </Menu.Root>
+            </Menubar>
+          );
+        }
+
+        const { user } = await render(<SpyMenubar />);
+        const fileTrigger = screen.getByTestId('menubar-file-trigger');
+
+        await act(async () => {
+          fileTrigger.focus();
+        });
+        await user.keyboard('{Enter}');
+        await screen.findByTestId('menubar-file-menu');
+
+        await waitFor(() => {
+          expect(screen.getByTestId('menubar-file-item')).toHaveFocus();
+        });
+
+        await user.keyboard('{ArrowDown}');
+        const submenuTrigger = screen.getByTestId('menubar-submenu-trigger');
+        await waitFor(() => {
+          expect(submenuTrigger).toHaveFocus();
+        });
+
+        await user.keyboard('{ArrowRight}');
+        await screen.findByTestId('menubar-submenu-menu');
+
+        await waitFor(() => {
+          expect(screen.getByTestId('menubar-submenu-item')).toHaveFocus();
+        });
+
+        await user.keyboard('{ArrowRight}');
+
+        await screen.findByTestId('menubar-next-menu');
+
+        await waitFor(() => {
+          expect(screen.queryByTestId('menubar-submenu-menu')).to.equal(null);
+        });
+
+        await waitFor(() => {
+          expect(screen.queryByTestId('menubar-file-menu')).to.equal(null);
+        });
+
+        expect(submenuOnOpenChange.lastCall?.args[0]).to.equal(false);
+        expect(rootOnOpenChange.lastCall?.args[0]).to.equal(false);
+        expect(nextOnOpenChange.lastCall?.args[0]).to.equal(true);
+      },
+    );
+
     // Doesn't work in headless mode.
     it.skipIf(!isJSDOM)(
       'should navigate between menus using left/right arrow keys when menus are open',