Combobox: cannot scroll Popover content on android
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
On Android devices, if the Combobox Popover content is large enough to require scrolling, it cannot be scrolled under some circumstances. When I attempt to scroll it, the entire page scrolls instead.
On iOS, it works as expected.
See video below where I used the example from https://react-spectrum.adobe.com/react-aria/examples/user-combobox.html on browserstack (it uses a real android device, not an emulation).
https://github.com/user-attachments/assets/0d128eb9-bb39-4d55-b559-501e4ad05d34
### 🤔 Expected Behavior?
I can scroll the Combobox popover content on any device.
### 😯 Current Behavior
The Combobox popover content cannot be scrolled on android under some circumstances, the page itself is scrolled instead.
However, if the page does not need to be scrolled in order to bring the Input into view when the virtual keyboard opens, the scroll still works as expected for the popover content!
https://github.com/user-attachments/assets/435cffda-7bbb-4793-82a0-afdaffd46b24
### 💁 Possible Solution
I did find out that if the `interactive-widget=resizes-content` is used in the viewport meta tag, e.g. ``, then I can scroll the Popover content as expected.
This thus means that for the scroll to work, both the visual and the layout viewports need to be resized when interactive UI widgets (such as the virtual keyboard) are displayed on android. This is also possibly why iOS is working, as the virtual keyboard possibly overlays the content without resizing the viewport at all by defaultl?
https://github.com/user-attachments/assets/4576459b-f852-420e-ba6d-8bd97f514f92
### 🔦 Context
I have a Combobox with some 40+ options. It opens on click and is filtered as the user types, so users might see a lot of results. They should be able to scroll this list regardless of the size.
### 🖥️ Steps to Reproduce
1. Open https://react-spectrum.adobe.com/react-aria/examples/user-combobox.html on an Android device;
2. Click the button to open the Assignee dropdown;
3. Attempt to scroll the list of results.
### Version
"@react-aria/combobox": "3.12.5", "@react-aria/listbox": "3.14.6", "@react-aria/overlays": "3.27.3", "@react-aria/textfield": "3.17.5", "@react-stately/collections": "3.12.5", "@react-stately/combobox": "3.10.6", "@react-stately/list": "3.12.3", "@react-stately/overlays": "3.6.17"",
### What browsers are you seeing the problem on?
Other
### If other, please specify.
All browsers on Android devices.
### What operating system are you using?
MacOS Sequoia 15.5 for dev, testing in several android devices
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.