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.