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

[dawi]

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

[snowystinger]

I think this is related to #8239
I verified that it's not working with the nightly version either.

When I attached an event listener to a button I added inside a TreeItem and listeners to the document.body, I found that the button inside the TreeItem is re-rendered as a completely new element on the initial onPointerDown. This is further confirmed because listeners on the button attached on mount no longer fire after that first render. I have to update them every render.

For some reason, the element isn't being reused that first time.

Looks like it broke in this commit bcc12ad
I haven't determined why yet