Skip to content

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

Open
@kvnxiao

Description

@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

Activity

kvnxiao

kvnxiao commented on May 8, 2025

@kvnxiao
Author

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

devongovett commented on May 9, 2025

@devongovett
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.

linked a pull request that will close this issue on May 29, 2025
smashercosmo

smashercosmo commented on May 30, 2025

@smashercosmo

Would be nice if ListBoxItem component supported that as well

snowystinger

snowystinger commented on Jun 6, 2025

@snowystinger
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @devongovett@smashercosmo@snowystinger@kvnxiao

      Issue actions

        [RAC] MenuItem should support closeOnSelect boolean for when pressed/selected · Issue #8208 · adobe/react-spectrum