adobe / adobe/react-spectrum

Virtualized Combobox does not scroll to the selected item in React 19

Open
#7,875 1 comment 0 reactions 0 assignees View on GitHub
bug react 19
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 5h
Merged PRs (30d)
58

Description

Discussion below, in short when https://github.com/adobe/react-spectrum/blob/2059fd3eb516fe0d31633ce7fae27006c0cd1291/packages/%40react-aria/selection/src/useSelectableCollection.ts#L501-L517 fires, we expect the list to be populated so that the selected item can be found and scrolled into view. However, in React 19 the menu doesn't fully render its items by this time, hence the item isn't scrolled into view.

### Discussed in https://github.com/adobe/react-spectrum/discussions/7865

Originally posted by **elenasolomon** March 4, 2025
Hello,

In our application, we have a large form with multiple ComboBox components, each containing a significant number of items (2000+). Without virtualization, the interaction is not performant. To address this, I attempted to implement a custom ComboBox using @react-aria/Virtualizer.

The issue I’m facing concerns the display of the selected item when the popover is open. In @react-spectrum/ComboBox, when the popover is opened using the Arrow Down key, the selected item is automatically brought into view. I tried to implement a similar behavior, but I am encountering the following problem:
1. I select an item from the list (e.g., one from the middle).
2. The popover closes as expected.
3. When I reopen the popover by pressing Arrow Down, I expect to see the selected item in view. However, the popover instead displays the first items in the list.
4. If I press Arrow Down/Arrow Up again, the scroll adjusts, and the selected item becomes visible. The focus moves from the selected item to the next item in the list.

I also tried a separate implementation using UNSTABLE_Virtualizer, but I encountered the same behavior.

What confuses me the most is that this [example](https://codesandbox.io/p/sandbox/pedantic-black-vrd8rh) (posted by @LFDanLu in [this issue](https://github.com/adobe/react-spectrum/issues/7361)) works correctly in the CodeSandbox environment. However, when I run the same code in a separate project (a basic CRA application), the behavior differs: locally, the ComboBox requires a second Arrow Down press to bring the selected item into view. It feels like I’m missing a render.

Environment
• **Dependencies**:
• react and react-dom v19
• react-aria-components v1.6.0
• **Tested Versions**:
• Also tested with react v18 and react-aria-components v1.4.0 & v1.5.0
• **Browsers**:
• Chrome 133.0.6943.142
• Firefox

**Questions**
1. Any idea what might be causing this behavior?
2. I noticed that the scroll-into-view feature works only when using Arrow Down but not when clicking the open button. Is there a way to configure ComboBox to scroll to the selected item when the open button is clicked?

Thanks in advance for your help!

Contributor guide

Open the contributing guide

Research direction

Start at packages/@react-aria/selection/src/useSelectableCollection.ts lines 501-517 and reproduce the virtualized ComboBox scenario described in the issue and linked discussion. Compare when the list is populated in React 19 with when the selected item is scrolled into view; done means reopening the menu brings the selected item into view on the first interaction.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 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.