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: [email protected]

[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>

[huntabyte]

Can't debug anything related to Svelte 5 when the prod version of the library is Svelte 4. These issues will be addressed once the Svelte 5 version of this project is released! Thank you!

[huntabyte]

Just to add some additional context, we're pretty confident this PR specifically broke cmdk-sv: sveltejs/svelte#12215

Per sveltejs/svelte#10359 (comment) it doesn't seem like the backward compatibility applies to this library

I'm working on the Svelte 5 version, but running into similar issues (duplicate items). Hopefully, I will be able to resolve them with help from the Svelte team 😃

[dhust]

Duplicate names after typing in letters and backspacing is resolved with @WP-David's key solution.

[huntabyte]

If you're using Svelte 5, it's recommended to use the Command component from bits-ui@next instead of cmdk-sv https://next.bits-ui.com/docs/components/command - this specific project is going to be archived in favor of the component living in Bits.

[viyic]

For my use case, using the {#key ...} workaround is way too slow, so I manually filter the list based on the search input and it's pretty good now.