Can we use multi select with async MultiSelectorItems fetched asynchronously based on what user typed in the input

[MickaelMesnage]

Hello :)

Can we use the multi-select component with MultiSelectorItems fetched asynchronously based on what is typed in the input?

I tried, but the component doesn't display the SelectorItem.

I added a prop to MultiSelectorInput to retrieve the string typed in the input in the parent component. I use this string to make an asynchronous request, and I set the result in a useState which is then used for my MultiSelectorItems, but it's not working.

This is my code :

export const AdsFiltersGameCity = () => {
  const [data, setData] = useState<string[]>([]);
  const [inputValue, setInputValue] = useState<string>("");

  const { search } = useCitySearch();

  const onCitiesChanged = (newValues: string[]) => { };

  const [_, cancel] = useDebounce(
    async () => {
      const res = await search(inputValue);
      setData(res);
    },
    400,
    [inputValue]
  );

  return (
      <MultiSelector
        values={cities}
        onValuesChange={onCitiesChanged}
        loop={false}
      >
        <MultiSelectorTrigger formatLabel={formatLabel}>
          <MultiSelectorInput setInputValueExternal={setInputValue} />
        </MultiSelectorTrigger>
        <MultiSelectorContent>
          <MultiSelectorList>
            {data.map((option, i) => (
              <MultiSelectorItem key={option} value={option}>
                {option}
              </MultiSelectorItem>
            ))}
          </MultiSelectorList>
        </MultiSelectorContent>
      </MultiSelector>
  );
};

Best regards, Mickaël

[BelkacemYerfa]

Hi @MickaelMesnage.

Responding to your question, I think it is possible to implement search behaviour on the multi select, u just need to give the onValueChange prop the function that will handle the behaviour that you want to do after u make the search.

An example on this is what we're doing for the command search on the user end side on shadcn extension, you can find it here.

Let us know how it goes. Best regards, Belkacem