[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

[shadcn]

This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)

[reedwane]

This should be added to the docs

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

[shadcn]

Hi. We're closing some old issues as outdated. If this is still relevant, leave a message, we'll reopen it. Thank you. Appreciate your contribution to the project - shadcn