adobe / adobe/react-spectrum

(Uncontrolled) Menu defaultSelectedKeys does not handle state internally

Open
#8,039 1 comment 0 reactions 0 assignees View on GitHub
bug RAC
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### 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:
```tsx

Text align

Left
Center
Right

```
I also tested `react-aria-components` [as far back as 1.3.0](https://stackblitz.com/edit/vitejs-vite-k9oryptr?file=src%2FApp.tsx) 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.