useSelectableCollection scroll-into-view anchor is incorrect when the on-screen keyboard resizes the screen after open

[nkalpak]

Provide a general summary of the issue here

When a listbox with a selected item opens inside a mobile overlay whose input autofocused (ex. combobox in a modal sheet), the listbox's scroll-selection-into-view runs before the keyboard has opened. This leaves the selected element under the keyboard when it's all said and done

🤔 Expected Behavior?

The selected element should be scrolled into view regardless of if there is a keyboard or not

😯 Current Behavior

The selected element ends up below the keyboard

💁 Possible Solution

#10102 seems to have implemented the canonical way to run code after keyboard opens. This same primitive can be used here. Currently useSelectableCollection runs a scroll into view using rAF, running one frame after the autofocus listbox shows up. This is too early for the keyboard. So rAF can be replaced with runAfterKeyboard and the issue will be fixed.

I have tested the proposed fix using a local copy of #10102, it works

🔦 Context

I have a combobox inside a full height bottom sheet built on top of a modal. The mobile combobox is a button that opens a sheet which has an autofocused text input and a listbox. Reopening the combobox with a selection deep in the list is what causes this issue

🖥️ Steps to Reproduce

Link to environment
Link to repo

Steps to reproduce:

1. Open the environment on a mobile device, either Android or iOS
2. Click the combobox

Version

react-aria 3.51.0 / react-aria-components 1.20.0 / react-stately 3.49.0

What browsers are you seeing the problem on?

Other

If other, please specify.

Safari, Chrome

What operating system are you using?

iOS, Android

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[nwidynski]

I was planning to add this in a follow up once #10102 lands 👍

[harshdtripathi]

I'd be interested in working on this. Are you still planning to address it, or would it be okay for me to take it?