Inputs in popovers do not work on iOS #7579
Description
Provide a general summary of the issue here
On iPad / iPhone, clicking on an input within a popover closes it.
🤔 Expected Behavior?
The popover should remain open, and Safari should properly focus the input (by scrolling to it to ensure the keyboard does not cover it).
😯 Current Behavior
The popover closes itself when clicking on an input
This issue happens on the react-aria landing page, and also in the storybook : the color picker, which uses a popover + an input, closes itself on iOS
https://react-spectrum.adobe.com/react-aria-starter/index.html?path=/docs/colorpicker--docs
💁 Possible Solution
This seems to happen only when the page is scrolled. I believe that when the iOS virtual keyboard is brought up, it scrolls the page and therefore closes the popover.
🔦 Context
I encountered this issue while building a small form inside a popover. I was unable to select the inputs on an iPad, and after testing other iOS devices, I noticed the same issue.
🖥️ Steps to Reproduce
Use either an iOS simulator or a real iPhone/iPad. Tested on iOS 17.5 and 18.2.
Landing page:
- Visit https://react-spectrum.adobe.com/react-aria/index.html
- Scroll down to the "Focus managed." card.
- Open the profile popover and try clicking any input.
Storybook:
- Visit https://react-spectrum.adobe.com/react-aria/ColorPicker.html
- Click the color picker.
- Try selecting the input.
Version
1.5.0 (react-aria-components)
What browsers are you seeing the problem on?
Safari
If other, please specify.
No response
What operating system are you using?
iOS 18.2
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response