iOS keyboard overlaps with inputs when using useModalOverlay hook.

[brianudensi]

Provide a general summary of the issue here

When a modal is built using useModalOverlay there's an issue of the keyboard covering the input when the input inside the modal is pressed. A good example is a form inside an modal that was created using the `useModalOverlay, when the input is pressed and the keypad of the ios devices pops up, it covers the textinput rather than showing up below the input as seen in the image, attached.

🤔 Expected Behavior?

When the input in the modal is pressed and receives focus, the keypad should appear below the input and not covering the input. As shown in the image attached below.

😯 Current Behavior

A good example of this issue is seen in the react-spectrum example for useModalOverlay. Steps to reproduce:

• Use any iphone device to open the link.
• open the dialog
• tap on any on the input field in the form

When the keypad pops up it covers the form inputs. The keypad has to be hidden and the input pressed again for it be behave as expected, and this is the case for any input inside a modal that was created using the useModalOverlay hook.

https://github.com/adobe/react-spectrum/assets/132343995/de271d1a-651c-415f-9159-c963be74c2bb

💁 Possible Solution

With some investigation into the useModalOverlay it's seen that it calls the usePreventScroll as seen here. looking further down into the usePreventScroll util source code, removing this line of code seem to resolve the keyboard ovelapping issues. Maybe there should be a programatic way of determining the translate value for the target element target.style.transform = 'translateY(-2000px)', rather than having a fixed value of '-2000px', which might not be compatible for all devices? Or probably an option to pass a translate value to usePreventScroll that can be determined on the consumer side.

🔦 Context

This problem might not be easily seen or noticed with a form input positioned at the top of the screen that's inside a modal. But in a situation where the Modal content(dialog) is at the bottom or centre of the screen, this issue becomes very visible. One other problem besides the keyboard overlapping issue, is that an input has to be pressed twice to begin typing rather than once . The first pressed put a focus-ring around the input and the second press actually set focus to the input to begin typing. This is the case with html inputs inside modals built with the hook(useModalOverlay) and only occurs with ios devices such as any iPhone.

🖥️ Steps to Reproduce

React Spectrum: https://react-spectrum.adobe.com/react-aria/useModalOverlay.html#:~:text=/ModalTrigger%3E-,Open%20Dialog,-Dialog%23

Version

"@react-aria/overlays": "^3.21.1", "@react-stately/overlays": "^3.6.5",

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

If other, please specify.

No response

What operating system are you using?

ios 17.4.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response