Filtering breaks on Svelte-5

[cam-mcevenue]

This may be related to issue. #89

When upgrading to svelte-5 filtering breaks on the command component in shadcn-svelte. Docs mention to report issues here.

Stackblitz reproducing issue:

https://stackblitz.com/edit/stackblitz-starters-whbv8w?file=package.json

Steps to reproduce:

There is a delay when running the dev environment in stackblitz, not sure why, so you may have to refresh the page a bunch before the filter count shows properly at the top of the command list

1) The filter count of the cmdk state is shown at the top of the list

2) Typing in the input, you can see the results are filtered on the store, but some of the command items that should be filtered out still show in the command list

3) They are not selectable, and can't be navigated to with the keyboard, but still display

4) DOwn grade to svelte 4 (npm i svlete@latest)

5) Everything works as expected

[PudottaPommin]

I managed to make it work for time being with wrapping <Command.Group> with key. It destroys and recreates whole block, but it's working atm

{#key items}
    <Command.Group>
         {#each items as item}
             ....
         {/each}
     </Command.Group>
{/key}

[OTheNonE]

Seems like it's being worked on here (just to add the relation).

[juanpujol]

Started to break here: svelte@5.0.0-next.167

[wd-David]

Workaround (https://github.com/sveltejs/svelte/releases/tag/svelte%405.0.0-next.220):

Recreate Command.Group whenever input is changed.

<script>
let search = $state('')
</script>

<Command.Root>
  <Command.Input placeholder="Search framework..." bind:value={search} />
  {#key search}
    <Command.Group>
      {#each frameworks as framework}
        <Command.Item>
        ...
        </Command.Item>
      {/each}
    </Command.Group>
  {/key}
</Command.Root>