Drawer closes when I click on a button inside it

[thibaudbrault]

Describe the bug

I have a Drawer with multiple buttons inside it. None of them are programmed to close the drawer but when I click on any of them the drawer closes.

Reproduction

Here's my code (+page.svelte):

<Drawer.Root bind:open={$isDrawerOpen}>
    <Player {musics} {length} cover={album.cover} {raf} />
</Drawer.Root>

And the child component that contains the drawer content (player.svelte):

<Drawer.Portal>
    <Drawer.Overlay class="fixed inset-0 bg-black/40" />
    <Drawer.Content
        class="hidden md:grid bodrer-t-gray-5 fixed bottom-0 left-0 right-0 grid grid-cols-[2fr_2fr_5fr_1fr] items-center justify-between gap-4 rounded-t-md border-t bg-gray-1 px-4 py-6"
    >
        <div class="flex items-center gap-2">
            <Button
                intent="ghost"
                size="icon"
                on:click={() => prevTrack(musics, length)}
            >
                <SkipBack />
            </Button>
            <Button
                intent="primary"
                rounded="full"
                size="icon"
                on:click={() => playPauseTrack(raf)}
                disabled={$isLoading}
            >
                {#if $isLoading}
                    <Loader2Icon class="animate-spin" />
                {:else if $isPlaying}
                    <Pause />
                {:else}
                    <Play />
                {/if}
            </Button>
            <Button
                intent="ghost"
                size="icon"
                on:click={() => nextTrack(musics, length)}
            >
                <SkipForward />
            </Button>
            <Button intent="ghost" size="icon">
                <Heart />
            </Button>
        </div>
    </Drawer.Content>
</Drawer.Portal>

None of the buttons change the value of $isDrawerOpen so I don't understand why it still closes the drawer.

Logs

No response

System Info

System:
    OS: Linux 6.6 Ubuntu 23.10 23.10 (Mantic Minotaur)
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1255U
    Memory: 4.68 GB / 15.33 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - /usr/local/bin/node
    npm: 10.2.5 - /usr/local/bin/npm
    pnpm: 8.13.1 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 120.0.6099.109
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.1 
    bits-ui: ^0.19.7 => 0.19.7 
    svelte: 4.2.12 => 4.2.12 
    typescript: ^5.0.0 => 5.3.3 
    vaul-svelte: ^0.3.0 => 0.3.0

Severity

annoyance

[Avi-ADAM]

try to add high z-index to the div wraper of the button

[caschbre]

It's possible the drawer thinks it is getting "dragged" enough and triggers the close. You could also try adding the [data-vaul-no-drag] attribute to the buttons and see if that helps.