CommandItem not updating on asynchronous changes

[ImamJanjua]

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?

Bildschirmaufnahme.2024-05-27.um.13.07.23.mov

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

[fitim63]

Passing shouldFilter={false} to the Command component should fix this.

[AnsariYasirArfat]

Thank you so much, bro!

[vuongmt2000]

nice!!!

[dpiyumal2319]

lUV YA

[AdrianMaj]

Thanks! This fixed my issue

[jflerime314]

Thank you. I've been trying to figure out the issue for more than a couple hours.