reactjs – Telegram Mini App (iOS) + Vaul Drawer: Virtual keyboard hides input or pushes drawer off-screen

I am building a Telegram Mini App (Web App) using React, Next.js, and the vaul Drawer component. I have a form inside the Drawer with an field and a submit button at the bottom.

When testing the Mini App on iOS, focusing the input to open the virtual keyboard causes severe layout issues:

1. By default, with repositionInputs={true} in Vaul, the drawer jumps unpredictably or the input remains hidden strictly under the keyboard.

2. If I use 100dvh for the drawer content and set repositionInputs={false}, the Telegram iOS in-app browser does not recalculate the viewport correctly, causing the keyboard to cover the lower part of the drawer (hiding the input entirely).

3. If I manually track window.visualViewport via resize listeners and apply the keyboard height difference as paddingBottom to the drawer, the drawer gets pushed entirely off-screen to the top. It seems Telegram’s WebApp native wrapper applies its own viewport offset, leading to a double-offset bug.

4. If I strictly bind the drawer’s maxHeight or height to window.visualViewport.height in pixels, it either forces the drawer to take up the full screen ungracefully or still clips the bottom content.

Here is a simplified version of my layout:

import { Drawer } from "vaul";

export default function ReportDialog() {
  return (
    
      
         {/* Internal scrollable content */}
         
...
         
         {/* Input at the bottom */}
         

            
            Submit
         
      
    
  );
}

How can I reliably keep the input and submit button visible right above the virtual keyboard in a Telegram Web App on iOS, specifically when using fixed bottom sheet components like Vaul?

1)The first video is the problem itself
enter image description here
2)The second video is how it should be
enter image description here