[context menu] Close the open menu on Tab - #6072

• base-ui-tanstack-start

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@6072
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@6072
  

commit: d3a792d

Bundle size

Details of bundle changes

Performance

No regressions in 36 benchmarks · ran 3m 09s · details

Check out the code infra dashboard for more information about this PR.

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	d3a792d
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/6af2a3a6dd8960fb0ec27cd6
😎 Deploy Preview	https://deploy-preview-6072--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@atomiks Please review when you get some time.
Thanks!

The bug is real, but the PR makes Shift+Tab match the accidental behavior instead of the deliberate one.

Where each behavior came from:

• Tab is trapped by accident. The trap comes from modal={isContextMenu} in MenuPopup.tsx. It was added in [context menu] Avoid creating sibling elements next to trigger #3645, which fixed [context menu] FocusGuard creates <span> elements in table body if used on table rows #3166: the focus-guard <span>s next to the trigger broke tables. Making the context menu’s focus manager modal removed the need for those spans. The Tab trap came along with it. The guard that swallows Tab is the generic "Prevent Tab from escaping the modal when there are no tabbable elements" one written for dialogs.
• Closing on Shift+Tab was deliberate. @atomiks added the test this PR rewrites ("returns focus to the focused surface when closing with Shift+Tab") a month ago in [popover] Fix focus guard loop when the trigger is the only tabbable element #5733.

The PR description says a regular Menu has "the same split", but it doesn’t: a regular Menu closes on both Tab and Shift+Tab, with modal on or off. That is the APG menu-button behavior. So after this PR, ContextMenu would be the only menu in the library where Tab does nothing in either direction.

I'd make the Tab close the root context menu the same way Shift+Tab already does instead. Focus would go back to whatever had it before the menu opened.

Thanks @michaldudak, that makes sense. Reworked in de8eba2.

• Shift+Tab is back to closing the root context menu, and the original test is restored.
• Tab now closes the root context menu through the same path. The context menu's reference is virtual, so focus goes back to whatever had it before the menu opened.
• Submenus and regular menus are unchanged. I also corrected the description: a regular Menu closes on both Tab and Shift+Tab.

Added returns focus to the focused surface when closing with Tab, and it fails without the change.

Hi @michaldudak
Please review and help me merge this PR when you get some time.
Thanks!