Prevent closing menu when clicking item

[annam002]

It would be great if you could control whether a single menu item closes the menu or not. This way it is easy to build sub menus.

This could maybe be done by passing a simple prop:
<menu-item prevent-close>Some item</menu-item>

Then, in the MenuItem implementation, you can check this prop in the handleClick method. Additionally, you have to check it in the handleKeyDown method of MenuItems.

I understand that the menu was intended for the simple usecase only, but menus are rarely that simple. Even the Mac-Menu, which is quoted as example, has a sub menu (Recent Items). Popover or Dialog are not a proper replacement if you want to implement submenus, because they have different aria-attributes and keyboard logic than the menu. The accessibility features of the menu are great, that is why I use it.

I am aware that there is a work around with a click listener, but this does not work for the keyboard users: on enter, the menu still closes due to the key event listener on menuItems. You have to do another work around to achieve this.

In sum, I think that adding the prop would be a really simple and unobtrusive way to make sub menus work easily.