[BUG] LoadOptions doesn't render options when isMulti = True and there is already one selected option in component

[Rezaabdi78]

Description

I have enabled isMulti for my AsyncSelectComponent. Also, I have defined an async function that fetches data from a REST API and does some processing on data.
After the first search and data fetching, all the options that should be rendered are presented and the component works fine.
The moment you choose the first option and try to open the select component again, the fetching data process goes underway and fetches data. Still, there are no options rendered in the dropdown of the select component.

chakra-react-select Version

4.7.6

Link to Reproduction

Link to Reproduction

TypeScript?

• Yes I use TypeScript

Steps to reproduce

1. Go to the CodeSandbox Link provided
2. Click on Dropdown or start typing (It just shows 5 data which is fine and working properly)
3. try to choose one of the options and it's working.
4. try to choose ANOTHER option and the dropdown does not show any options, although the fetching process is completed.
5. observe the console to see a log of data that should render in component.

Operating System

• macOS
• Windows
• Linux
• iOS/iPadOS
• Android

Additional Information

No response

[csandman]

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.