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

[xiscosc]

👋
I also face issues here; the whole phone gets blocked and sometimes the keyboard goes crazy.

"vaul-svelte": "^1.0.0-next.3",
"bits-ui": "1.0.0-next.72",
"svelte": "^5.14.0",

I tested it on several phones and browsers:

• Samsung Internet 🔴 (Chrome-based)
• Chrome 🔴
• Safari iOS 🟢
• Firefox Android 🟢

Video 1:

v1.mp4

Video 2:

v2.mp4

[mustafa0x]

This is also sometimes a problem in iOS Safari. And worse in iOS webview. Completely unusable =/

[PolpOnline]

Anyone knows which deps should I downgrade to make it work again?
I tried reverting vaul-svelte from 1.0.0-next.3 to 1.0.0-next.2 with no luck, 1.0.0-next.1 is even more broken

[huntabyte]

I'm working on getting an Android phone so I can properly debug. It's very challenging at the moment without, so if someone who has an android on hand wants to try to implement a fix in the meantime, I'm more than happy to review/merge.

[mustafa0x]

Thanks hunter. You can always use the Android emulator. See https://dev.to/mochafreddo/setting-up-and-managing-android-emulators-on-macos-with-homebrew-3fg0

And once you have to running, open Chrome in the emulator.

Then, in the Mac's Chrome, open chrome://inspect. Then click Inspect. And you'll be able to debug the in-emulator tab.

[zhihengGet]

you can also just download an android emulator, i.e bluestack, but I haven't tried it if it reproduces the bug 

[huntabyte]

I don't trust emulators very much tbh, I'd rather have the real thing for the full native experience.

I've published a pkg-pr-new release, can someone able to reproduce this issue to see if they still experiencing the following:

npm i https://pkg.pr.new/vaul-svelte@111

[4doist]

@huntabyte the problem continues to occur, only now that I tried it in Google Chrome it looks even worse.

Google Chrome Browser Reproduction

Rep111GoogleChrome.mp4

DuckDuckGo Browser Reproduction

Rep111DuckDuckGo.mp4

Brave Browser Reproduction

Rep111Brave.mp4

System Info

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

    Memory: 4.73 GB / 13.80 GB
  Binaries:
    Node: 22.11.0 - ~\AppData\Local\fnm_multishells\10624_1735760234462\node.EXE
    npm: 10.9.0 - ~\AppData\Local\fnm_multishells\10624_1735760234462\npm.CMD
    bun: 1.1.42 - ~\.bun\bin\bun.EXE
  Browsers: {}
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.15.1
    bits-ui: ^1.0.0-next.76 => 1.0.0-next.76
    svelte: ^5.0.0 => 5.16.0
    typescript: ^5.0.0 => 5.7.2
    vaul-svelte: https://pkg.pr.new/vaul-svelte@111 => 1.0.0-next.3

Source (from the documentation)

<script lang="ts">
    import { buttonVariants } from "$lib/components/ui/button";
    import Button from "$lib/components/ui/button/button.svelte";
    import * as Drawer from "$lib/components/ui/drawer";
    import Input from "$lib/components/ui/input/input.svelte";
    import Label from "$lib/components/ui/label/label.svelte";
</script>

<Drawer.Root>
  <Drawer.Trigger class={buttonVariants()}>Edit Profile</Drawer.Trigger>
  <Drawer.Content>
    <Drawer.Header class="text-left">
      <Drawer.Title>Edit profile</Drawer.Title>
      <Drawer.Description>
        Make changes to your profile here. Click save when you're done.
      </Drawer.Description>
    </Drawer.Header>
    <form class="grid items-start gap-4 px-4">
      <div class="grid gap-2">
        <Label for="email">Email</Label>
        <Input type="email" id="email" value="[email protected]" />
      </div>
      <div class="grid gap-2">
        <Label for="username">Username</Label>
        <Input id="username" value="@shadcn" />
      </div>
      <Button type="submit">Save changes</Button>
    </form>
    <Drawer.Footer class="pt-2">
      <Drawer.Close class={buttonVariants({ variant: "outline" })}
        >Cancel</Drawer.Close
      >
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

[huntabyte]

Urg, I'll try to get an android device to get to the bottom of this.