[bug]: CommandItem not updating on asynchronous changes

[ImamJanjua]

Describe the bug

Hi, as u can see in the video i am trying to implement a component which on input change gets the addres predictions from server. Its using PopOver from shadcn for the for the popover.

Now the thing is that when the first adresses arrive than it will render it but on chnage of the input value, it gets the new predictions but it will not render them?

https://github.com/shadcn-ui/ui/assets/137432044/3ecd75c8-7628-47b7-a6dd-4b0feba439a8

"use client";

import * as React from "react";
import { useDebounce } from "@/hooks/useDebounce";

import { Button } from "@/components/ui/Button";
import {
  Command,
  CommandEmpty,
  CommandList,
  CommandGroup,
  CommandInput,
  CommandItem,
} from "@/components/ui/Command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/Popover";
import { Check, ChevronsUpDown } from "lucide-react";

export function ComboboxDemo() {
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState("");
  const [selectedValue, setSelectedValue] = React.useState("");

  const [options, setOptions] = React.useState([] as any[]);
  const debouncedValue = useDebounce(value);

  React.useEffect(() => {
    async function handleValueChange() {
      // fetch needed data
      setOptions(results...);
    }
    handleValueChange();
  }, [debouncedValue]);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button variant="outline" className="w-[200px] justify-between">
          {selectedValue
            ? options.find((option) => option.value === value)?.label
            : "Select framework..."}
          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="p-0">
        <Command>
          <CommandInput
            value={value}
            onValueChange={setValue}
            placeholder="Search framework..."
          />
          <CommandList>
            <CommandEmpty>No framework found.</CommandEmpty>

            <CommandGroup>
              {options.map((option) => (
                <CommandItem
                  key={option.value}
                  value={option.value}
                  onSelect={(currentValue) => {
                    setSelectedValue(
                      currentValue === selectedValue ? "" : currentValue,
                    );
                    setOpen(false);
                  }}
                >
                  <Check
                    className={cn(
                      "mr-2 h-4 w-4",
                      selectedValue === option.value
                        ? "opacity-100"
                        : "opacity-0",
                    )}
                  />
                  {option.label}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

export default ComboboxDemo;

Affected component/components

Combobox

How to reproduce

.

Codesandbox/StackBlitz link

.

Logs

.

System Info

.

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[lramos33]

Up

[Jellyfishboy]

Up

[dumaaas]

Is there anything new about this problem? I am facing same issue.

[demerzelhf]

Add shouldFilter={false} to your Command component. This solved it for me

[richin13]

Add shouldFilter={false} to your Command component. This solved it for me

tysm, that fixed it for me as well