Skip to content

(Uncontrolled) Menu defaultSelectedKeys does not handle state internally #8039

Open
@JawsomeJason

Description

@JawsomeJason

Provide a general summary of the issue here

When using the Menu component and setting defaultSelectedKeys, the specified key(s) are selected, but further interaction changes nothing.

🤔 Expected Behavior?

Just like other UI, using default... props should set the initial state(s) and handle interaction states.

😯 Current Behavior

https://stackblitz.com/edit/vitejs-vite-lpzaptkr?file=src%2FApp.tsx
In the link above, I've created a simple "Text Align" menu:

<MenuTrigger>
<Button>Text align</Button>
<Popover>
<Menu selectionMode="single" defaultSelectedKeys={['center']}>
<MenuItem id="left">Left</MenuItem>
<MenuItem id="center">Center</MenuItem>
<MenuItem id="right">Right</MenuItem>
</Menu>
</Popover>
</MenuTrigger>

I also tested react-aria-components as far back as 1.3.0 and had the same experience.

💁 Possible Solution

When using defaultSelectedKeys, the component should know to handle state internally.

🔦 Context

No response

🖥️ Steps to Reproduce

  1. On initial load, press the trigger to open the menu
  2. Inspect the "center" item, and notice aria-checked="true" data-selected="true"
  3. Select either of the other items, which should select that item and close the menu.
  4. Press the trigger again.
  5. Inspect the items, and notice that only "center" is selected.

Version

react-aria-components 1.3.0-1.7.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

Also tested on Firefox and Safari

What operating system are you using?

MacOS Sequoia 15.3.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    RACbugSomething isn't working

    Type

    Projects

    Status

    ✏️ To Groom

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions