Weird select behavior

[asertym]

Describe the bug

Hi there, just started with Bits UI.

I am working on a custom select and can't understand for the love of god why it does this weird behavior.

This is my array of items (parent file):

const items = [
    { value: '1', label: 'Blue' },
    { value: '2', label: 'Orange' },
    { value: '3', label: 'Green' },
    { value: '4', label: 'Yellow' },
    { value: '5', label: 'Black' },
    { value: '6', label: 'Red' },
    { value: '7', label: 'Purple' },
    { value: '8', label: 'Aquamarine' }
];

<Select type="multiple" {items} bind:value={color} placeholder="Select color" selectIcon="palette"></Select>

And this is my select component:

<script lang="ts">
  import { Icon } from '$components';
  import { Select, type WithoutChildren } from 'bits-ui';
  import { fly } from 'svelte/transition';

  type Props = WithoutChildren<Select.RootProps> & {
    placeholder?: string;
    selectIcon: string;
    items: {
      value: string;
      label: string;
      disabled?: boolean;
    }[];
    contentProps?: WithoutChildren<Select.ContentProps>;
  };

  let { value = $bindable(), items, selectIcon, placeholder, ...restProps }: Props = $props();
</script>

<Select.Root bind:value={value as never} {...restProps}>
  <Select.Trigger
    class="rounded-lg border border-zinc-200 py-3 px-4 placeholder:text-zinc-600 inline-flex cursor-pointer w-full items-center transition justify-between hover:bg-zinc-50"
  >
    <div class="space-x-2 flex items-center">
      <Icon type="duotone" name={selectIcon} class="text-xl" />
      <Select.Value {placeholder} />
    </div>
    <Icon name="caret-up-down" />
  </Select.Trigger>
  <Select.Portal>
    <Select.Content
      class="focus-override border-zinc-200 bg-white shadow-lg outline-hidden z-50 select-none rounded-xl border px-1 py-3 w-full"
      forceMount
      sideOffset={10}
    >
      {#snippet child({ wrapperProps, props, open })}
        {#if open}
          <div {...wrapperProps}>
            <div {...props} transition:fly={{ duration: 300 }}>
              <Select.ScrollUpButton class="flex w-full items-center justify-center">
                <Icon name="caret-double-up" />
              </Select.ScrollUpButton>
              <Select.Viewport>
                {#each items as item (item.value)}
                  <Select.Item class="cursor-pointer" value={item.value} label={item.label}>
                    {#snippet children({ selected })}
                      <div class="flex justify-between">
                        {item.label}
                        {#if selected}
                          <div class="ml-auto">
                            <Icon name="check" />
                          </div>
                        {/if}
                      </div>
                    {/snippet}
                  </Select.Item>
                {/each}
              </Select.Viewport>
              <Select.ScrollDownButton class="flex w-full items-center justify-center">
                <Icon name="caret-double-down" />
              </Select.ScrollDownButton>
            </div>
          </div>
        {/if}
      {/snippet}
    </Select.Content>
  </Select.Portal>
</Select.Root>

I basically copied an example from the docs and it works as intended on the docs but not locally. What am I missing?

Reproduction

https://stackblitz.com/edit/vitejs-vite-mzn1dktt?file=src%2FApp.svelte,src%2Flib%2Fselect.svelte&terminal=dev

Logs

System Info

System:
    OS: Windows 11 10.0.26200
    CPU: (16) x64 AMD Ryzen 7 9800X3D 8-Core Processor           
    Memory: 4.86 GB / 31.06 GB
  Binaries:
    Node: 24.15.0 - C:\nvm4w\nodejs\node.EXE
    npm: 11.14.1 - C:\nvm4w\nodejs\npm.CMD
    pnpm: 11.5.0 - C:\Users\alex\AppData\Local\pnpm\bin\pnpm.CMD
  Browsers:
    Edge: Chromium (140.0.3485.54)
    Firefox: 151.0.2 - C:\Program Files\Mozilla Firefox\firefox.exe

Severity

annoyance

[ieedan]

I just opened #2066 to fix this but a mitigation (and honestly a best practice) would be to pass items into Select.Root. This way we can detect the label that should be used without having to search the DOM for it