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

[LFDanLu]

Discussion below, in short when

react-spectrum/packages/@react-aria/selection/src/useSelectableCollection.ts

Lines 501 to 517 in 2059fd3

	let lastFocusedKey = useRef(manager.focusedKey);
	useEffect(() => {
	if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || didAutoFocusRef.current) && scrollRef.current && ref.current) {
	let modality = getInteractionModality();
	let element = getItemElement(ref, manager.focusedKey);
	if (!(element instanceof HTMLElement)) {
	// If item element wasn't found, return early (don't update autoFocusRef and lastFocusedKey).
	// The collection may initially be empty (e.g. virtualizer), so wait until the element exists.
	return;
	}
	if (modality === 'keyboard' || didAutoFocusRef.current) {
	scrollIntoView(scrollRef.current, element);
	// Avoid scroll in iOS VO, since it may cause overlay to close (i.e. RAC submenu)
	if (modality !== 'virtual') {
	scrollIntoViewport(element, {containingElement: ref.current});

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 #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 (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!