Virtualized Combobox does not scroll to the selected item

[elenasolomon]

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 (posted by @LFDanLu in this issue) 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!

[LFDanLu]

Strange, I've tried downloading my Sandbox example and running it locally and it brought the item into view when using ArrowDown once. Would you happen to be able to share a example where this is exhibiting the bug with me?

Note that this flow does seem to be broken with a Virtualized Select, but that seems to have been pre-existing. For ComboBox, the following code should trigger, where we find the desired node and scroll it into view. The tracked focused key should exist in the DOM regardless of its position in the actual virtualized list.

[elenasolomon]

Thank you for your answer!

Here is the example that is not working.
I found the root cause: React 19. Scrolling into view with React 18 works as expected, but not with React 19. With React 19 is behaving as I described in my first message.

[LFDanLu]

Ah interesting, thank you for catching this! I've reproduced locally, looks to be that the dropdown itself hasn't populated with items when that aforementioned useSelectableCollection is fired in React 19 unlike in React 18, thus it can't scroll the selected item into. Will have to do some more digging into why that is, but for now I'll convert this into an issue and pull it into our board