search

theKashey / react-focus-on

🎯 Solution for WAI ARIA compatible modal dialogs or full-screen tasks, you were looking for
MIT License
333 stars 14 forks source link

iOS: keyboard popping up on input focus scrolls locked body #69

Closed andrew--r closed 11 months ago

andrew--r commented 1 year ago

Hi!

I use react-focus-on in my app for implementing proper modal dialogs. Discovered an issue on iOS: when dialog contains a long form and user clicks on input, Safari puts focus on it, pops up keyboard and shifts viewport up so that the input stays in the viewport above the keyboard. The problem is that locked document scroll is also affected by this behaviour. I’ve set up a reproduction sandbox and made a recording demonstrating the issue:

https://github.com/theKashey/react-remove-scroll/assets/2734841/0557bade-9a22-433b-8150-67eae1973da0

By the end of the recording you can see the bottom of the page. Is it possible to prevent document scroll in this case?

theKashey commented 1 year ago

There is no real way to prevent body scroll. focus-lock is trying to stop a cause for it, but if it happens - it happens. The only solution I know, but am a little hesitant to implement at the generic library level - save scrollTop on modal open and restore on modal close.

andrew--r commented 1 year ago

The only solution I know, but am a little hesitant to implement at the generic library level - save scrollTop on modal open and restore on modal close.

I share your hesitance here, such solution might negatively affect UX, especially when the page underneath the modal popup is partially visible — sudden jump is undesirable. I also thought about listening to scroll events on the locked body and immediately resetting changes made to scroll position, but on iOS it causes glitches and doesn’t play well with the keyboard’s slide animation.

Maybe we should patiently wait for some kind of new web API that would allow us to fix this problem.

stale[bot] commented 12 months ago

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.