List navigation doesn't scroll to selected item when other focusable elements are present in popover

[kevinkucharczyk]

Describe the bug A clear and concise description of what the bug is.
I'm building a "select" component, much like the Emoji Picker example, where the floating element contains a search input to filter the select options below it.

Typically, the list navigation hook will scroll to the selected item (if present) when opening the popover:

However, when the search input is present, the autoscroll-on-open doesn't happen:

To Reproduce
I have prepared two sandboxes (based on the Emoji Picker and Virtualized Select examples)

• without input: https://codesandbox.io/p/sandbox/frosty-austin-hsypk5?file=%2Fsrc%2FApp.tsx%3A21%2C25
• with input: https://codesandbox.io/p/sandbox/unruffled-ioana-mfyk6w?file=%2Fsrc%2FApp.tsx

Steps to reproduce the behavior:

1. Visit one of the sandboxes
2. Click the button to open the popover
3. Scroll down the list and select an item
4. Click the button again to open the popover

Expected behavior A clear and concise description of what you expected to
happen.
The popover should scroll to the selected element on open, even if an input is present.

Context:

• OS: macOS Ventura 13.4.1
• Browser: Chrome Version 123.0.6312.123, Firefox 124.0.2

[atomiks]

What if the input isn't part of the same scrolling container? The UI is problematic to begin with since the input is hidden if it scrolls to the item. The input and listbox should scroll separately so the input is always visible?

[kevinkucharczyk]

@atomiks that did work! https://codesandbox.io/p/sandbox/romantic-glitter-ll2gm3?file=%2Fsrc%2FApp.tsx%3A143%2C31

In my app, however, that still didn't fix it. I found that it's due to me using FloatingList, which I recreated in this example: https://codesandbox.io/p/sandbox/trusting-sunset-wgvtfc?file=%2Fsrc%2FApp.tsx%3A178%2C23

When FloatingList is used, the scroll doesn't happen - presumably because the element refs/indices are all set too late.