Open cam-mcevenue opened 1 month ago
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}
Started to break here: svelte@5.0.0-next.167
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>
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