Drawer (Mobile) - Input Fields Disappear Behind Keyboard on mobile

[SergejSi]

When using the “Drawer” UI component on mobile devices, a significant usability issue arises.

Users attempting to enter data into a form embedded within the Drawer encounter the problem of input fields disappearing behind the on-screen keyboard. This issue occurs as soon as the Drawer is activated and the user taps into an input field to type text. Instead of the Drawer adjusting itself or the keyboard pushing the form upwards, the input field remains obscured, leading to a frustrating user experience. Users are forced to minimize the keyboard to navigate back to the hidden input field, unnecessarily complicating and slowing down the input process.

Steps to Reproduce:

1.  Open the Drawer containing a form on a mobile device.
2.  Try to tap into an input field near the bottom of the Drawer.
3.  Observe how the on-screen keyboard activates and causes the chosen input field to disappear behind it.

Expected Behavior: The Drawer should adjust in a way that keeps all input fields visible when the on-screen keyboard is activated. Ideally, the content of the Drawer should be pushed up to ensure the active input field is displayed above the keyboard. Alternatively, a functionality could be implemented to automatically scroll to the next visible input field.

[AdiRishi]

+1 just happened to me too. Keen to know if anyone has a solution

[rustyjux]

I am experiencing the same thing as @AdiRishi - it's not that the keyboard itself hides the input (or textarea) but that a blank space appears above the keyboard.

[jotace-br]

Same with me, it happens with any type of input.

[UretzkyZvi]

same happened to me