Async multi select options are reset after selecting an option

[mayank-permiso]

I'm using Async Select, and when I select an item it will keep the menu open and keep the search string (after implementing solution in #3210), but after selection of an option the options are reset to original results.

For eg-

I click on an AsyncSelect field, request goes and brings 10 results (lets call it as set A), now I type "aws" in the search field so the request again brings 10 new results (set B). Beautiful. But when I select an option from here, then these new options are replaced by Set A options. I need to change something in search field to see the Set B options again.

My current config-

closeMenuOnSelect=false
isMulti=true
cacheOptions=true
inputValue={input} // some state to hold current search string
onInputChange={(value, action) => {
if (action.action === "input-change") setInput(value); // <---
}}
loadOptions= {loadOptions} // some function that is debounced and fetches new results with search string
onChange, onBlur, value, name etc are there which are of not much importance for this issue I guess.

Nothing seems to work. I searched a lot on net and did not find any configuration that can fix this. BTW, this behaviour is not seen with Normal Select component. Please help me on the same. Is this a legit bug or am I missing something here?

[Krishna8691]

Not so sure but here's a codesandbox which is what you are looking for I think. I haven't tested it too much but seems to work continuing on your example
View in codesandbox

As mentioned in this discussion here to show the options it depends on what you return from your onInputChange callback.
You can achieve the same thing in a more controlled manner using normal select too.

[mayank-permiso]

Hi Krishna
Thank you for the reply. I will try this in our implementation and will reply within 24 hours.

[mayank-permiso]

The fix seems to be working. Thank you for the solution. @Krishna8691