Combobox search input not focusable within Drawer (Svelte 5)

[chanmathew]

Describe the bug

Hi folks - Please see the below video.

CleanShot.2024-11-15.at.10.59.06.mp4

There are a few issues:

1. When I have a combobox within a Drawer, I can't seem to select the search input at all
2. When you select anything, it will immediately close the drawer, which should not be the expected behavior as you may have a form and you need to complete the rest of the inputs

Reproduction

Here's a repro:
https://stackblitz.com/edit/github-aibhpm?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/kit: ^2.8.1 => 2.8.1 
    bits-ui: 1.0.0-next.57 => 1.0.0-next.57 
    cmdk-sv: ^0.0.18 => 0.0.18 
    formsnap: ^0.5.0 => 0.5.0 
    lucide-svelte: ^0.459.0 => 0.459.0 
    mode-watcher: ^0.2.1 => 0.2.1 
    svelte: ^5.2.0 => 5.2.0 
    svelte-sonner: ^0.3.28 => 0.3.28 
    sveltekit-superforms: ^2.20.1 => 2.20.1 
    vaul-svelte: ^0.3.2 => 0.3.2

Severity

annoyance

[huntabyte]

You should be using vaul-svelte@next and shouldn't be using cmdk-sv should be using Command from bits-ui@next instead 😃

[chanmathew]

@huntabyte Thanks that seems to work!

[chanmathew]

Ah! actually i realized what the issue is @huntabyte - if you have snapPoints set on the drawer, then the input won't focus:

https://stackblitz.com/edit/github-aibhpm?file=src%2Froutes%2F%2Bpage.svelte

[huntabyte]

It seems to be focusing for me @chanmathew :

CleanShot.2024-11-16.at.12.22.34.mp4

[chanmathew]

@huntabyte the combobox does open but if you have snapPoints set on the drawer, you can't focus the input. Here is the behavior from the repro above

CleanShot.2024-11-16.at.12.26.50.mp4

[huntabyte]

Ah the input inside the popover, got it. And this only happens when snap points are enabled? That is very strange as the two should be completely unrelated.

[huntabyte]

Hm this seems more like a focus trap race condition going on here which would be something to do with Bits UI where focus remains trapped inside the Drawer vs moving into the Popover

[chanmathew]

Yup that's right! At least so far from my testing, it's only when the snapPoints is set.

[huntabyte]

Yeah, I see that in the reproduction... very interesting. I'll look into this further as I'm not sure if it falls on Bits UI or Vaul Svelte (though a vaul svelte action triggers this behavior, it could be an underlying issue with bits that we need to support)