Added isMulti on AsyncSelect and Async (loadOptions) doesn't work

[jechazelle]

Hi,

First : thank you so much for this package!

When I added isMulti on the AsyncSelect, I don't see the different options loaded, always empty:

import AsyncSelect from 'react-select/async';

...

const loadOptions = async (inputValue, callback) => {
    let data = await axios.get(route('dashboard.tags.searchTag'), { params: { name: inputValue } }).then((response) => {
        const options = [];

        response.data.data.forEach((item) => {
            options.push(item);
        });

        return options;
    });

    callback(data);
};

...

<AsyncSelect
    isMulti
    value={post.tags}
    onChange={handleChange}
    loadOptions={loadOptions}
    getOptionLabel={(option) => option.name}
/>

Without isMulti on AsyncSelect, I see the different options:

I used "react-select": "^5.6.0"

[sort72]

Same here. Did you fix it?

[Rall3n]

@jechazelle @sort72 Would you be so kind and provide a minimal executable example using CodeSandbox?

[sort72]

Sure @Rall3n . Here it is: https://codesandbox.io/s/codesandboxer-example-forked-mfwtlz?file=/example.tsx

I forked the async example from the docs and added axios instead of a file

I tried using fetch as well, and didnt' work. Also used a Promise instead of a callback. Also used async/await instead of axios.then . Nothing works.

To test this, just add an option in the select. Then, try to add a new one, and you won't have any result. Even if the 'console.log' shows there are options available to be shown.

[Rall3n]

@sort72 You used a different option schema ({id, label}) then the component expected ({value, label}). You should provide the prop getOptionValue if your value (or getOptionLabel for label) differs from the default expected schema.

<AsyncSelect<{id: string, label: string}
  {...}
  getOptionValue={opt => opt.id}
/>

@jechazelle Please check if the same applies to you.

[sort72]

I changed 'id' for 'value' and now it works. You rock!