Drawer Input Obstructed by Keyboard in Mobile

[WhyAsh5114]

Discussed in https://github.com/shadcn-ui/ui/discussions/2564

^{Originally posted by mrm2234 January 25, 2024} Hi All,

I am trying to use a drawer to capture a user's input using an <Input> component in a Drawer. On mobile, the keyboard is obstructing the user as they are trying to input a number.

Has anyone also seen this behavior / have a fix for it?

TIA!

I'm also facing this issue, the responsive drawer demo on the official website also has this problem when opening in mobile. It does weird height adjustments, often obstructing inputs or adding a lot of empty space at the bottom.

[Desgue]

Hello, i am also having the same issue.

[WhyAsh5114]

A minimal repro https://github.com/WhyAsh5114/shadcn-drawer-mobile

https://github.com/shadcn-ui/ui/assets/71895020/42cc6363-e0bb-4e47-a1bd-e4f583614955

[shayant98]

+1

[SergejSi]

+1

[NeDurov]

Hi! I had the same issue, but after scrolling vaul git find this solution

// This code is simplified for the sake of this article React.useEffect(() => { function onVisualViewportChange() { const visualViewportHeight = window.visualViewport.height; const keyboardHeight = window.innerHeight - visualViewportHeight;

// Difference between window height and height excluding the keyboard
const diffFromInitial = window.innerHeight - visualViewportHeight;

const drawerHeight = drawerRef.current.getBoundingClientRect().height || 0;

drawerRef.current.style.height = `${visualViewportHeight - OFFSET}px`;
drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;

}

window.visualViewport?.addEventListener("resize", onVisualViewportChange);

return () => window.visualViewport?.removeEventListener( "resize", onVisualViewportChange ); }, []);

[rustyjux]

This issue duplicates #2831. I will try the solution shared by @NeDurov, thanks!

[hazelslab]

This issue duplicates #2831. I will try the solution shared by @NeDurov, thanks!

Did u fix it?

[hazelslab]

This issue duplicates #2831. I will try the solution shared by @NeDurov, thanks!

Having the same issue, a white blank "thing" appears wenn i click on an input

[Danillooost]

Hi this problem is a issue in vaul. I made a comment in a discussion over there. Hope this helps or maybe better to move the questions over there because those are the people directly working on this part. I commented on the issue with a temporary fix so if you need it feel free to check it out

[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.

[rafaponieman]

Hello, I am still currently experiencing this issue. I tried to fix it but to no avail, so I temporarily resorted to using a Dialog instead of a Drawer. Thanks!!

[MoncefME]

Did anyone fix this issue? I'm still having a problem with this

[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>
    .....
  );
};