DropdownMenu: delete button inside trigger doesn't fire event

[macmillen]

Describe the bug

I want to be able to place small delete buttons (x) for the selected items inside the DropdownMenu.Trigger to be able to quickly remove the checked items. Unfortunately for some reason they don't get triggered but instead open the DropdownMenu.

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    {#each filters as filter}
      <div
        role="button"
        onclick={(e) => {
          // doesn't trigger
          console.log(e);
        }}
      >
        delete {filter}
      </div>
    {/each}
  </DropdownMenu.Trigger>

  <DropdownMenu.Portal>
    <DropdownMenu.Content class="bg-white z-10 w-56 overflow-hidden rounded-xl border">
      <DropdownMenu.CheckboxGroup bind:value={filters}>
        <DropdownMenu.CheckboxItem value="apple">apple</DropdownMenu.CheckboxItem>
        <DropdownMenu.CheckboxItem value="orange">orange</DropdownMenu.CheckboxItem>
        <DropdownMenu.CheckboxItem value="banana">banana</DropdownMenu.CheckboxItem>
      </DropdownMenu.CheckboxGroup>
    </DropdownMenu.Content>
  </DropdownMenu.Portal>
</DropdownMenu.Root>

Reproduction

https://svelte.dev/playground/c2b9e74518514ccba8cd3d0e49df0fdb?version=5.35.4

Logs

System Info

System:
    OS: Linux 6.11 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12500H
    Memory: 10.98 GB / 31.02 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.11.0 - /run/user/1000/fnm_multishells/4174_1751870897990/bin/node
    npm: 10.9.0 - /run/user/1000/fnm_multishells/4174_1751870897990/bin/npm
    pnpm: 9.12.3 - /run/user/1000/fnm_multishells/4174_1751870897990/bin/pnpm
  Browsers:
    Brave Browser: 138.1.80.115
    Chrome: 133.0.6943.126
    Chromium: 138.0.7204.92

Severity

annoyance