When focusing on an input in a Dialog on iOS Safari and the Dialog gets covered by the keyboard, scrolling is not possible or limited so that buttons at the bottom of the Dialog can't be reached for example.
In the reproduction URL I provided, scrolling is limited. The dialog can't be scrolled through in it's entirety and there are two scrollbars.
(In my app scrolling is not possible at all with only one scrollbar, even when I tried to make everything exactly the same as in the reproduction URL. Also when using items-start, the Dialog gets misplaced so that the heading is cut off if I scroll down on the main page before opening.)
I found that in landscape mode scrolling down first stops, then after continuing to try scrolling one gets to the bottom. But if one tries to scroll all the way up again then that doesn't work. TLDR: Weird scrolling behavior in general.
(Weirdly on my app landscape works better than portrait mode.)
Other browsers seem to not have this problem and scrolling the Dialog works as expected with an input focused (I tested Brave on iOS and Android).
What package within Headless UI are you using?
@headlessui/vue
What version of that package are you using?
v1.7.22
What browser are you using?
Safari on iOS (iPhone)
Reproduction URL
https://github.com/andrereus/reproduction-headlessui-vue
Describe your issue
When focusing on an input in a Dialog on iOS Safari and the Dialog gets covered by the keyboard, scrolling is not possible or limited so that buttons at the bottom of the Dialog can't be reached for example.
In the reproduction URL I provided, scrolling is limited. The dialog can't be scrolled through in it's entirety and there are two scrollbars. (In my app scrolling is not possible at all with only one scrollbar, even when I tried to make everything exactly the same as in the reproduction URL. Also when using items-start, the Dialog gets misplaced so that the heading is cut off if I scroll down on the main page before opening.)
I found that in landscape mode scrolling down first stops, then after continuing to try scrolling one gets to the bottom. But if one tries to scroll all the way up again then that doesn't work. TLDR: Weird scrolling behavior in general. (Weirdly on my app landscape works better than portrait mode.)
Other browsers seem to not have this problem and scrolling the Dialog works as expected with an input focused (I tested Brave on iOS and Android).