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;

[alvarolorentedev]

same here, has anyone find a solution to this?