shadcn-ui
[bug]: Combobox search functionality searches values instead of labels
Describe the bug
The example on the web page works fine but that is because the values have the same text as the labels. Most selects will have a description as the label and some sort of ID as the value. Upon changing the values to in the examples to random strings, the search/filter does not filter based on the labels, it searches based upon the value.
Affected component/components
combobox
How to reproduce
Change values of frameworks to values that does not directly contain the same text as the labels. Then try to search for a framework in the list
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Chrome
Before submitting
- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues
@karanBRAVO I have no idea how to do that, however, I would really appreciate a patch for this.
Take a look at this cmdk PR. [email protected] adds a new keywords option. This Shadcn PR implements this.
Alternatively, you can write a custom filter function. See the cmdk docs.
@BrendanC23 the new "keywords" option is useful, but the combobox is still filtering for keywords + values, so you might type text that doesn't correspond to any keywords, and yet get (counterintuitive) results -- for example if a value is "zzzzz" and a label is "New York" (with corresponding ["New", "York"]) keywords), typing "z" will match New York. One would have to use the custom filter function to exclude the value key from being searched I guess
For those struggling. You want the keywords prop on the CommandItem. However as @tommaso-moro rightly says, this does still search on value:
<CommandItem
key={option.value}
value={option.value}
keywords={[option.label]}
/>
If you don't want value searching, update the Command filter prop:
<Command
filter={(_, search, keywords) => {
const extendValue = keywords?.join(" ") ?? "";
return extendValue.includes(search) ? 1 : 0
}}
/>
