[BUG] LoadOptions doesn't render options when isMulti = True and there is already one selected option in component about chakra-react-select HOT 1 CLOSED

There are a couple issues with the example you provided. First, the function you use to map the search results to options for the select isn't returning a valid option object to match your select options.

You are returning:

{ label: r.name, id: i }

Where as by default, react-select uses the structure { label, value }

You'd have to either change the structure of the returned options, or pass the getOptionValue prop to the Select component:

<Select getOptionValue={(option) => option.id} />

Another issue here is that you're using the index of the options for the id field. react-select uses the value field to determine which options are already selected (and hidden), so if that value is dynamic, random options will be hidden from the returned options object.

By changing the example you provided to return the name value for both the label and the value fields, everything appears to work fine:

const promiseOptions = async (inputValue: string) => {
  const data = await fetch(
    `https://pokeapi.co/api/v2/pokemon?limit=5&offset=0`
  );
  if (await data.ok) {
    const x = await data.json();
    console.log(x.results.map((r, i) => ({ label: r.name, value: r.name })));
    return x.results.map((r, i) => ({ label: r.name, value: r.name }));
  }
};

Also, I'm not sure what's going on with your loadOptions prop, but you could just pass in promiseOptions and the functionality would be the same.

loadOptions={promiseOptions}

I'm going to close this as it's not actually a bug, but you can ask more questions if you're still confused.

from chakra-react-select.