BUG: The drawer goes outside the screen on IOS when input is clicked.

[rakshit087]

I am currently on Safari Browser, and I have a simple drawer setup with a bottom fixed at 0px.
When I click the input the Keyboard opens which completly shoots the drawer upwards. Sometimes the input becomes completly out of the view.
I know I can do repositionInputs={false} but then the keyboard overlaps the input.

IOS: 17.4

[DeDX3]

Did you find any solution to this?

[rakshit087]

Yes, it's a hacky way, but I detect the device first and for Android, I keep the reposition on, for the rest I disable it by repositionInputs={false}

[DeDX3]

Yes, it's a hacky way, but I detect the device first and for Android, I keep the reposition on, for the rest I disable it by repositionInputs={false}

What I mean is reposition input option is not working for me at all.

[xiechen1201]

I have the same problem.

[Mostafakahani]

I use this: repositionInputs={false}
its working.

if (context.isMobile) {
return (
<Drawer
open={data.isDrawerOpen}
repositionInputs={false} //// worked!
onOpenChange={() => {
////.....
}}
>

[aryomuzakki]

Yes, it's a hacky way, but I detect the device first and for Android, I keep the reposition on, for the rest I disable it by repositionInputs={false}

I have same problem, would u share your code for how you detect the device?

[rakshit087]

Yes, it's a hacky way, but I detect the device first and for Android, I keep the reposition on, for the rest I disable it by repositionInputs={false}

I have same problem, would u share your code for how you detect the device?

Sure, I do this:

const userAgent = navigator.userAgent.toLowerCase();
let deviceType: 'android' | 'ios' | 'pc' | 'unknown' = 'unknown';
if (/android/.test(userAgent)) {
  deviceType = 'android';
} else if (/iphone|ipad|ipod/.test(userAgent)) {
  deviceType = 'ios';
} else {
  deviceType = 'pc';
  appLink = '';
}

I save it in my zustland store, and for drawer I do:

   repositionInputs={config.deviceType === 'android'}

Why this is happening:

IOS tries to put the input in focus so it shifts everything upwards when virtual keyboard opens, and vaul when keyboard opens adds some padding at the bottom, therefore creating an extra shift.