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 ;)

[SHAGGYER]

Perfect :)

[mohammadreza490]

@gercog1 I had no idea what was happening but this fixed the issue. Thanks a lot 👍🏼 Do you know why this is the fix by any chance?

[codesfromshad]

<Command /> has its own filtering function (refer to this). Your items are getting updated from results, <Command /> also does filtering and trims the values in the process (says here). So a mismatch can happen, triggering <CommandEmpty />.

[mmestiyak]

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

Thank you :)