[RAC] MenuItem should support closeOnSelect boolean for when pressed/selected

[kvnxiao]

Provide a general summary of the feature here

react-aria-component's MenuItem does not support an option to keep the Menu open after clicking on a specific MenuItem

🤔 Expected Behavior?

Support a boolean prop for MenuItem like closeOnSelect?: boolean, so that if it's false, the onAction handler fires but does not automatically close the menu

😯 Current Behavior

Any click on a MenuItem causes the entire menu to close

💁 Possible Solution

No response

🔦 Context

1. I'd like to insert some menu item buttons and entries that have checkboxes, where I'd like to keep the menu open when a user selects the checkbox. These checkboxes are in a sub-menu, so the user experience is annoying if they have to keep reopening the menu and hovering over the sub-item to see the checkbox values in the submenu. This can be worked around with to an extent using the selectionMode prop for the Menu
2. I'd like some menu items to act like a button that kicks off a side-effect and still keep the menu open afterwards after its selected and the onAction handler fires

💻 Examples

No response

🧢 Your Company/Team

Squint.ai

🕷 Tracking Issue

No response

[kvnxiao]

Just re-read the documentation and noticed that there's a way to enable selection mode, but it'd be great to also optionally support a closeOnSelect?: boolean for when I want a menu item's action handle to act like a button that kicks off a side-effect and keeps the menu open afterwards still.

[devongovett]

useMenuItem does support this option:

react-spectrum/packages/@react-aria/menu/src/useMenuItem.ts

Lines 72 to 76 in 22a9d27

	/**
	* Whether the menu should close when the menu item is selected.
	* @default true
	*/
	closeOnSelect?: boolean,

and it should already work if you pass it to react-aria-components MenuItem since it spreads all props. I forget if there was a reason it's not in the TypeScript definition. Will discuss with the team but you should be able to use it with a @ts-ignore in the meantime I think.

[smashercosmo]

Would be nice if ListBoxItem component supported that as well

[snowystinger]

ListBox doesn't know about modals or popovers, can you share a codesandbox of what you're trying to do?