adobe / adobe/react-spectrum

RAC Tree: Expanding a tree item requires two clicks if expandedKeys/onExpandedChange is used (selectionMode=none)

Open
#8,263 1 comment 0 reactions 0 assignees View on GitHub
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

By default, clicking a `TreeItem` toggles its expansion state. However, when controlling the expansion manually using `expandedKeys` and `onExpandedChange`, the behavior changes.

After a page reload, it takes **two clicks** to toggle the expansion state of a `TreeItem`. After this initial interaction, everything works as expected.

What's particularly strange is that I don’t need to click the same `TreeItem` twice. I can click anywhere on the page first, then click the `TreeItem`, and it will toggle as expected.

I have prepared a minimal reproducible example:
* https://rac-sidebar-issue.vercel.app
* https://github.com/dawi/rac-sidebar-issue

### 🤔 Expected Behavior?

* A single click should toggle the expanded state, even after a reload.
* The behavior with controlled expansion state via `expandedKeys` and `onExpandedChange` should not be different from the uncontrolled version.

### 😯 Current Behavior

After a page reload, it takes **two clicks** to toggle the expansion state of a `TreeItem`. After this initial interaction, everything works as expected.

What's particularly strange is that I don’t need to click the same `TreeItem` twice. I can click anywhere on the page first, then click the `TreeItem`, and it will toggle as expected.

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

I have prepared a minimal reproducible example:
* https://rac-sidebar-issue.vercel.app
* https://github.com/dawi/rac-sidebar-issue

### Version

react-aria-components 1.8.0

### What browsers are you seeing the problem on?

Chrome, Firefox

### If other, please specify.

_No response_

### What operating system are you using?

macOS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked minimal reproduction at rac-sidebar-issue.vercel.app and its GitHub repository, using react-aria-components 1.8.0 with controlled expandedKeys and onExpandedChange. Reproduce the post-reload interaction in Chrome or Firefox, then trace the TreeItem expansion path; done means one click toggles expansion immediately after reload and matches uncontrolled behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.