Combobox custom filter filters results but displays only "No Option Found"

[step2341]

I have a use case where i need to filter by value and description for a particular option. so using the combobox i thought i could define a custom filterfn and pass it as a prop.

interface ComboboxProps {
  options: Option[];
  selectedValue: string | number | boolean | null;
  onSelect: (value: string | number | boolean | null) => void;
  filterFn?: (option: Option, search: string) => boolean; // Optional filter function
}

i can then do this and see that the results are being filtered correctly by either value or description:

  const filteredOptions = options.filter(option => {
    if (!filterFn) return true; // If no filter function provided, return true for all options
    return filterFn(option, search);
  });

but within the return all i get is the "No options found." How does the commandEmpty work in this component? Is there a default behavior there that needs to be reconfigured? Below is my return statement.`

<Command>
         <CommandInput
           placeholder="Search option..."
           className="h-9"
           value={search} 
           onValueChange={setSearch} 
         />
         <CommandEmpty>No option found.</CommandEmpty>
         <ScrollArea ref={targetRef} className="max-h-[200px] overflow-y-auto">
         <CommandGroup>
           {
             filteredOptions.map((option) => (
               <CommandItem
                 key={option.id}
                 value={String(option.value)}
                 onSelect={() => handleSelect(option)}
               >
                 <span className="whitespace-nowrap">{option.value}</span>
                 {option.description && (
                   <span className="truncate">
                     <span className="spacer mx-1">-</span>
                     <span className="whitespace-nowrap">{option.description}</span>
                   </span>
                 )}
                 <Icons.check
                   className={cn(
                     "ml-auto h-4 w-4",
                     selectedOption && selectedOption.id === option.id ? "opacity-100" : "opacity-0"
                   )}
                 />
               </CommandItem>
             ))
          }
         </CommandGroup>
         </ScrollArea>
       </Command>

[chidimo]

Well, I think you may be out of luck with this approach because I'm about to implement a custom filter function. In my case, the values are numbers while the labels are readable strings. But the custom filter function provided by the <Command /> component only receives string values as props. It would be better if it receives the option object so a I can filter by label instead.

Please let me know if you found another way.

[niseler]

you can disable default filtering for Command with shouldFilter

<Command shouldFilter={!props.customFilter}> disables filtering when customFilter is given