huntabyte / cmdk-sv

cmdk, but for Svelte ✨
https://cmdk-sv.com
MIT License
410 stars 17 forks source link

Filtering should be done by `label`, not `value` #51

Closed 18thletter closed 5 months ago

18thletter commented 5 months ago

Maybe I'm missing something here, but I think filtering should happen by label, not value.

https://github.com/huntabyte/cmdk-sv/blob/020fd7866f513108cba92a6de08a04b52518343c/src/lib/cmdk/command.ts#L28

Take this:

const users = [
  {
    "value": "id1",
    "label": "Joe"
  },
  {
    "value": "id2",
    "label": "Jane"
  }
]

Seems like a search for "ja" would turn up nothing when it should show "Jane".

huntabyte commented 5 months ago

There is no label prop for the Command.Item. This project doesn't care about labels and values in the same sense that a select menu or otherwise would.

The value in this project is the value you are searching for, not some underlying input value. If you want to use it with your example array, here's how you can do so:

{#each users as user}
    <Command.Item value={user.label} onSelect={() => {
                // do something with user
                doSomething(user.value)
        }}>
        {user.label}
    <Command.Item> 
{/each}
18thletter commented 5 months ago

Skill issue. Thank you!