react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

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

Open kvnxiao opened this issue 8 months ago โ€ข 4 comments

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 avatar May 08 '25 21:05 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.

kvnxiao avatar May 08 '25 22:05 kvnxiao

useMenuItem does support this option: https://github.com/adobe/react-spectrum/blob/22a9d27f62bf68668bd5bc08bede09bc0c73ae53/packages/%40react-aria/menu/src/useMenuItem.ts#L72-L76

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.

devongovett avatar May 09 '25 00:05 devongovett

Would be nice if ListBoxItem component supported that as well

smashercosmo avatar May 30 '25 09:05 smashercosmo

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

snowystinger avatar Jun 06 '25 02:06 snowystinger