[menu] Nested menu items do not respect `closeOnClick={false}` if root menu has `openOnHover`

[benface]

Bug report

Current behavior

closeOnClick={false} (or no closeOnClick on a Menu.RadioItem or Menu.CheckboxItem, as they default to false) doesn't work as expected on nested menu items. It doesn't prevent the menu from closing when clicking on the item, but it doesn't behave exactly like closeOnClick={true} either: the root menu closes but the nested menu seems to stay open until the root menu's exit transition is done, then they both unmount (very similar to #1820).

Expected behavior

Clicking on a nested menu item with closeOnClick={false} (or a Menu.RadioItem or Menu.CheckboxItem with no closeOnClick) should not close the menus.

Reproducible example

https://codesandbox.io/p/devbox/polished-leaf-mqkxqd

Base UI version

v1.0.0-beta.0

Which browser are you using?

Chrome, Safari, and Firefox

Which OS are you using?

macOS

Which assistive tech are you using (if applicable)?

None

[mj12albert]

Hey @benface https://github.com/mui/base-ui/pull/2042 added Menu.SubmenuRoot which fixes this: https://codesandbox.io/p/sandbox/sparkling-dew-p76jrv

(hover to "Play Next", click it, it shouldn't close)

[benface]

Thank you @mj12albert, it does seem resolved. Not sure why this issue didn't auto-close, but I will close it now.

[github-actions[bot]]

This feature will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui-components/react@2042