Closing nested menu closes the parent menu too

[knownasilya]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

For example: v1.7.13

What browser are you using?

For example: Arc

Reproduction URL
repro

Click More > and then once that menu opens, click it again. Expected behavior is that the nested menu closes, but what really happens is all the menus close.

Describe your issue

Closing a nested menu closes the parent menu as well. The workaround is to disable the parent menu's item, but that looses active and keyboard functionality, it is not ideal.

[knownasilya]

Related to this issue (I think) is the ability to disable auto close on click for items. For example I have nested menus and some of the items are checkbox inputs. I don't want to close the menu when clicking the checkbox but I do want to keep keyboard/disabled/active states and styles.

[RobinMalfait]

Hey, thank you for your question! 🙏

Unfortunately, we currently don't support nested Menu's, once we implement that feature then this should work.
For the other issue you posted, the Menu should automatically close when the Menu.Item is clicked or enter is used. If you don't want this, then you can add onClick={e => e.preventDefault()} on the Menu.Item to stop this from happening. More info on this: https://headlessui.com/react/menu#closing-menus-manually

Hope this helps!