Combobox works unpredictably using dynamic data

[SHAGGYER]

I have created an Autocomplete component using combobox. So the results and CommandItems will be always changing. However the CommandEmpty is showing up without a reason. When i console.log(results), the array is fine.

ALSO, when there are CommandItems on the screen, they are not clickable.

export function Autocomplete({
  items,
  prop,
  onItemSelect,
  className,
}: AutocompleteProps) {
  const { exerciseEmbeddings: embeddings } = React.useContext(AppContext);

  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState("");
  const [results, setResults] = useDebouncedState(items, 300);
  const [query, setQuery] = React.useState("");

  const embeddingsPipeline = React.useRef<any>();

  // Initialize embeddings pipeline

  React.useEffect(() => {
    initEmbeddingsPipeline();
  }, []);

  const initEmbeddingsPipeline = async () => {
    embeddingsPipeline.current = await pipeline(
      "feature-extraction",
      "Xenova/all-MiniLM-L6-v2"
    );
  };

  // Perform semantic search on input change
  React.useEffect(() => {
    const fetchResults = async () => {
      if (!query.trim()) {
        setResults(items);
        return;
      }

      if (!embeddingsPipeline.current) {
        initEmbeddingsPipeline();
      }

      // Compute embeddings for the query
      const queryEmbeddings = await embeddingsPipeline.current(
        query,
        SemanticConfigs.pipelineParams as any
      );

      // Calculate similarity scores between query and each exercise description
      const similarityScores = items.map((item, index) => {
        const similarity = cos_sim(
          embeddings[index],
          queryEmbeddings.data as any[]
        );
        return { value: item.value, label: item.label, similarity };
      });

      // Sort exercises based on similarity scores
      similarityScores.sort((a, b) => b.similarity - a.similarity);

      // Top N similar exercises
      const N = 20;
      const topResults = similarityScores.slice(0, N);

      setResults(topResults);
    };

    fetchResults();
  }, [query]);

  React.useEffect(() => {
    console.log(results);
  }, [results]);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          role="combobox"
          aria-expanded={open}
          className="w-[200px] justify-between"
        >
          {value
            ? items.find((item) => item[prop] === prop)?.label
            : "Select framework..."}
          <i className="fa-solid fa-chevron-down ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[200px] p-0">
        <Command>
          <CommandList>
            <CommandInput
              value={query}
              placeholder="Search framework..."
              className="h-9"
              onValueChange={(value) => setQuery(value)}
            />
            <CommandEmpty>No framework found.</CommandEmpty>
            {results.length > 0 && (
              <CommandGroup>
                {results.map((item, index) => (
                  <CommandItem
                    key={index}
                    value={item[prop]}
                    onSelect={(currentValue) => {
                      setValue(currentValue === value ? "" : currentValue);
                      setOpen(false);
                      onItemSelect(item);
                    }}
                  >
                    {item.label}
                    <i
                      className={cn(
                        "fa-solid fa-check",
                        "ml-auto h-4 w-4",
                        value === item[prop] ? "opacity-100" : "opacity-0"
                      )}
                    />
                  </CommandItem>
                ))}
              </CommandGroup>
            )}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

[gercog1]

I have exactly same issue :)

[gercog1]

Hey @SHAGGYER, adding shouldFilter={false} to <Command /> fixes that ;)

[kulterryan]

Thanks a lot

[lorikku]

THANK YOU SO MUCH I WASTED HOURS ON THIS

[zivtamary]

Thank you!! 🚀

[Blankeos]

Thanks! But is it possible to do a combination of this? I was hoping to do filtering on dynamic + static somehow (if it's possible lol).

[Woolegend]

Thank you!!!!

[JClackett]

I dont understand why mines not working, im dynamically fetching the items and have shouldFilter as false but every time I type the input becomes unfocused and I cant type?

Can anyone see what could be going on from the code below, maybe something with it being rendered in popover + inputs + radix + focus, one of these conflicting with each other?

Screen.Recording.2025-09-24.at.19.43.58.mov

function DataRecordCommand({
  label,
  dataSourceId,
  onSelectRecord,
}: {
  label: string;
  dataSourceId: string;
  onSelectRecord: (id: string, label: string) => void;
}) {
  const [search, setSearch] = useState("");

  const trpc = useTRPC();
  const { data: dataSource, isPending } = useQuery(
    trpc.dataSource.byIdWithRecords.queryOptions(
      { dataSourceId, search },
      { placeholderData: keepPreviousData },
    ),
  );

  return (
    <Command shouldFilter={false}>
      <CommandInput
        placeholder={`Search ${label}`}
        value={search}
        onValueChange={setSearch}
      />
      <CommandList>
        <CommandEmpty>
          {isPending
            ? "Loading"
            : search
              ? "No results found."
              : "Type to search..."}
        </CommandEmpty>

        {dataSource?.records && dataSource?.records.length > 0 && (
          <CommandGroup
            heading={
              dataSource?.records && dataSource?.records.length > 0
                ? search
                  ? "Search Results"
                  : "Recent Records"
                : ""
            }
          >
            {dataSource?.records.map((record) => (
              <CommandItem
                key={record.id}
                value={record.id}
                className="p-0 w-full"
                onSelect={() => onSelectRecord(record.id, record.label)}
              >
                <DropdownMenuItem className="w-full cursor-pointer">
                  {record.label}
                </DropdownMenuItem>
              </CommandItem>
            ))}
            {!search && dataSource?.count && dataSource.records.length > 5 && (
              <div className="px-2 py-1 text-xs text-muted-foreground text-center">
                Type to search all {dataSource.count.total} records
              </div>
            )}
          </CommandGroup>
        )}
      </CommandList>
    </Command>
  );
}

[kulterryan]

you're using <DropdownMenuItem> in <CommandItem> that won't work ig.