Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kvnxiao opened this issue May 8, 2025 · 2 comments

Comments

@kvnxiao
Copy link

kvnxiao commented May 8, 2025

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
Copy link
Author

kvnxiao commented May 8, 2025

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
Copy link
Member

useMenuItem does support this option:

/**
* 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants