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

[oxuk85]

Has anyone found a solution to this? It is quite hard to debug as I haven't found a way to replicate it locally or a way to inspect what is blocking the input.

[AlexanderIsom]

Same here, using the drawer mobile breaks the text area only, text fields seem to work for me

[AlexanderIsom]

After some additional digging this appears to be an issue with the package shadcn drawer is build on top of, I've added a issue describing the problem here

[rustyjux]

Correct - this comes back to vaul. This issue duplicates https://github.com/shadcn-ui/ui/issues/2849 where this tie to vaul (and an issue in vaul) were already linked. I suggest closing this issue to reduce further confusion and duplication of efforts.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[mahadih-gg]

I solved this issue like that

  const Component = () => {

  const formContainerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const handleResize = () => {
      if (formContainerRef.current) {
        formContainerRef.current.style.setProperty('bottom', `env(safe-area-inset-bottom)`);
      }
    };

    if (window.visualViewport) {
      window.visualViewport.addEventListener("resize", handleResize);
      handleResize(); // Initial call in case the keyboard is already open
    }

    return () => {
      if (window.visualViewport) {
        window.visualViewport.removeEventListener("resize", handleResize);
      }
    };
  }, []);


  return (
     ....
    <DrawerContent ref={formContainerRef} className="min-h-[70vh]">
      <Form .... />
    </DrawerContent>
    .....
  );
};