Select closes drawer (Next)

[jacokok]

Describe the bug

When using a select component inside of a drawer making a selection closes the drawer.

Reproduction

<Drawer.Root>
    <Drawer.Trigger class={buttonVariants({ variant: "outline" })}>Open Drawer</Drawer.Trigger>
    <Drawer.Content>
        <div class="mx-auto w-full max-w-sm">
            <Drawer.Header>
                <Drawer.Title>Move Goal</Drawer.Title>
                <Drawer.Description>Set your daily activity goal.</Drawer.Description>
            </Drawer.Header>
            <div class="p-4 pb-0">
                <Select.Root type="single">
                    <Select.Trigger class="w-[180px]">Theme</Select.Trigger>
                    <Select.Content>
                        <Select.Item value="light">Light</Select.Item>
                        <Select.Item value="dark">Dark</Select.Item>
                        <Select.Item value="system">System</Select.Item>
                    </Select.Content>
                </Select.Root>
            </div>
        </div>
    </Drawer.Content>
</Drawer.Root>

Logs

No response

System Info

System:
    OS: Linux 6.11 NixOS 24.11 (Vicuna) 24.11 (Vicuna)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700K
    Memory: 19.95 GB / 31.09 GB
    Container: Yes
    Shell: 5.2.32 - /run/current-system/sw/bin/bash
  Binaries:
    Node: 22.9.0 - ~/.nix-profile/bin/node
    npm: 10.8.3 - ~/.nix-profile/bin/npm
    pnpm: 9.9.0 - ~/.nix-profile/bin/pnpm
  npmPackages:
    @sveltejs/kit: ^2.7.3 => 2.7.3
    bits-ui: 1.0.0-next.30 => 1.0.0-next.30
    formsnap: 2.0.0-next.0 => 2.0.0-next.0
    lucide-svelte: ^0.454.0 => 0.454.0
    mode-watcher: ^0.4.1 => 0.4.1
    svelte: ^5.1.4 => 5.1.4
    svelte-sonner: ^0.3.28 => 0.3.28
    vaul-svelte: 1.0.0-next.1 => 1.0.0-next.1

Severity

blocking an upgrade

[khalo-sa]

I created a Stackblitz for reproduction: Link

It seems to be related to bits-ui. It works with bits-ui@1.0.0-next.28 and doesn't work with bits-ui@1.0.0-next.29 and later versions. The change in next.29 is related to Select: "Select/Combobox: add allowDeselect prop"

[huntabyte]

Ah, I know what this is. It's just a coincidence that I modified the select in next.29, and it is completely unrelated to this.

Why it works on next.28 is that vault-svelte also uses bits-ui@1.0.0-next.28, so they share the same bits-ui and thus the same dismissableLayer logic, which determines what "floating" layer is on top to handle outside clicks appropriately.

Making bits an optional peer dependency will resolve this. Let me do some research, and we'll work this out.

[huntabyte]

Updating to bits-ui@1.0.0-next.41 and vaul-svelte@1.0.0-next.2 should resolve this issue. There is another issue I noticed that is in Bits UI that I'm still working out where after you open the select you can no longer close the drawer by clicking outside of it. It's being tracked via another issue on Bits.