[question] How to change the command items on the fly?

[fredguth]

This seems more a svelte problem than a cmdk-sv problem, but I am scratching my head once again.

Minimum working example: https://github.com/fredguth/cmd-sk-mwe

In the mwe, my list of options is too big and if I try to render them without filtering it takes too long (not with this json, a bigger one). So, I imagined I could just filter the options on the fly keeping the maximum number of options in a reasonable amout (56 options, for example).

The filteredOptions is changing (as you can see in the console.log), but the Command.List does not change.

<script lang="ts">
	import { Command } from 'cmdk-sv';
	import unidades from './unidades.json';

	// let options = unidades.map((item) => {
	// 	item.DS_UNIDADE;
	// });
	let options = unidades.map((item) => {
		return item.DS_UNIDADE;
	});
	function filterByQuery(items: string[], query: string): string[] {
		return query
			? items.filter((item) => item?.toUpperCase().includes(query.toUpperCase())).slice(0, 6)
			: items?.slice(0, 6);
	}
	let open = true;
	function runCommand(cmd: () => void) {
		open = false;
		cmd();
	}
	let q = '';
	let selectedOption = '';
	$: filteredOptions = filterByQuery(options, q);
	$: console.log(filteredOptions);
</script>

<Command.Root label="Command Menu">
	<Command.Input bind:value={q} />
	<Command.List>
		<Command.Empty>No results found.</Command.Empty>
		{#each filteredOptions as option}
			<Command.Item
				value={option}
				onSelect={() => {
					runCommand(() => {
						selectedOption = option;
					});
				}}>{option}</Command.Item
			>
		{/each}
	</Command.List>
</Command.Root>

[fredguth]

There is something really strange with the Command.Input.

The code bellow only works with common Input. and breakes with Command.Input

<script lang="ts">
  import * as Command from "$lib/components/ui/command";
  import { Input } from "$lib/components/ui/input";
  import { filterByQuery, runCommand } from "$lib/utils";
  import pdms from "$lib/assets/pdm.json";

  let open = true;
  let query = "";
  let selected = "";


  $: filtered = filterByQuery(pdms, query)?.slice(0, 10);
  $: console.log(filtered);
  $: open = query.length > 0;
</script>

<Command.Root>
  <Input
    bind:value={query}
    placeholder="Query..."
    class = "w-72"
  />
  {#if open}
    <Command.List class="z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none">
      <Command.Empty> Não encontrado. </Command.Empty>
      {#each filtered as pdm}
        <Command.Item
          value={pdm}
          onSelect={() =>
            runCommand(() => {
              selected = pdm;
              open = false;
              query = "";
            })}
        >
          {pdm}
        </Command.Item>
      {/each}
    </Command.List>
  {/if}
</Command.Root>
{#if selected} <h1>{selected}</h1>{/if}

[SeanMallard]

Hey @fredguth, did you ever find a solution to this problem?
I'm trying to solve this very thing

[fredguth]

Not exactly. I eventually created a component that was visually equal to command, but then I figured that combobox component worked and was better suited for my usecase.

[jonolo6]

I think if you want to do custom filtering you need to turn if off explicitly first (see docs):

<Command.Root shouldFilter={false}>
   <Command.List>
      ... each statement using the filtered items here...