Drawer component is very broken on mobile

[4doist]

Describe the bug

The Drawer in the @next version breaks inputs on mobile making the keyboard open and close in a very strange way

Reproduction

It happens in the documentation example itself
https://next.shadcn-svelte.com/docs/components/drawer#responsive-dialog

reproduction.mp4

Logs

No response

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (12) x64 AMD Ryzen 5 5600G with Radeon Graphics

    Memory: 5.46 GB / 13.80 GB
  Binaries:
    Node: 22.11.0 - ~\AppData\Local\fnm_multishells\2244_1732287129630\node.EXE
    npm: 10.9.0 - ~\AppData\Local\fnm_multishells\2244_1732287129630\npm.CMD
    bun: 1.1.36 - ~\.bun\bin\bun.EXE
  Browsers: {}
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.8.1
    bits-ui: ^1.0.0-next.63 => 1.0.0-next.63
    lucide-svelte: ^0.460.1 => 0.460.1
    mode-watcher: ^0.5.0 => 0.5.0
    svelte: ^5.0.0 => 5.1.16
    svelte-sonner: ^0.3.28 => 0.3.28
    vaul-svelte: 1.0.0-next.3 => 1.0.0-next.3

Severity

blocking an upgrade

[ieedan]

Yeah it looks like the auto focus on mobile might be an issue.

[ieedan]

I think maybe the right choice is to turn off auto focus with the autoFocus={false} when the first focusable element in the drawer is a text box.

[4doist]

I think maybe the right choice is to turn off auto focus with the autoFocus={false} when the first focusable element in the drawer is a text box.

I tried that but it didn't work, I also tried disabling DrawerContent#trapFocus but it made it worse

[ieedan]

Yeah I could be incorrect on how I think autoFocus works but I don't think it really does anything setting it to false.

[huntabyte]

oof this one is ugly. I'll need to dig into this one. Focusing the input is the correct behavior, but some things have to be taken into account to compute the right positioning with the keyboard factored in.

I'm going to move this where it belongs (vaul-svelte).