search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.83k stars 1.07k forks source link

Dialog's initialFocus on input does not trigger iOS shifting view up #3063

Open Propaganistas opened 6 months ago

Propaganistas commented 6 months ago

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.19

What browser are you using?

Safari for iOS (on iPhone)

Reproduction URL

https://codesandbox.io/p/devbox/dreamy-bohr-k789qp

https://github.com/tailwindlabs/headlessui/assets/6680176/aa729c5c-4f08-418b-86fe-bf46e51f31d2

Describe your issue

Whenever an input gets selected that is located somewhere in the bottom part of the screen, iOS is so kind to shift the current view up automatically to make room for showing the keyboard while still keeping the selected input on screen.

Using the Dialog examples in TailwindUI (items-end sm:items-start) the dialog is positioned at the bottom on mobile. But when the first focusable element (or element set explicitly by initialFocus) is an input element, the keyboard displays without the view shifting up, hence partially/completely hiding the dialog below the keyboard.

If you'd create a dialog with another element being focused first, and then click on the input inside the dialog, the view shifts up properly. Could it be that initialFocus is applied too early for iOS to pick it up properly? Just thinking out loud.

ngtankhoa commented 6 months ago

I am experiencing the same issue with using Next.js.

ChristianGutierrezGP commented 1 month ago

We are also seeing this issue in our project. The workaround of focusing another element to avoid focusing the input works for now, but we'd prefer to be able to pop up the keyboard for the user automatically as the dialog comes up without it covering the content they're typing.