Async select option empties loadedOptions

Hey guys, First of all thanks for the great work on this it is a pleasure to use this lib, really.

Sorry to bring back this but when using Async component I can’t figure out how to keep the options loaded. It always resets to an empty options list. Thing is on select option it calls back the handleInputChange with a newValue = "" (here https://github.com/JedWatson/react-select/blob/master/src/Async.js#L110-L134) which leads to a !inputValue = true wich leads to loadedOptions: [] instead of loadedOptions: this.optionsCache[inputValue], I tried to store the value in my internal state component using

onInputChange = (query, { action }) => {
  // Prevents resetting our input after option has been selected
  if (action !== "set-value") this.setState({inputValue: query});
}

and setting the prop inputValue as state.inputValue but it will always lead to a newValue = "" in the handleInputChange method.

Maybe it is the expected behaviour but this is really annoying as selecting an option always lead to a empty options list …

If someone found a way to avoid that behaviour I’d appreciate a lot 👍 Using v2.4.1 Happy to provide more info / understand what’s going on.

Thanks again !

[ebonow]

Greetings,

It would seem that this question is resolved by the answer provided directly above this by @andrewmahoneyf and would be the recommended way to approach this.

I will close this issue out but if there are any questions or concerns, please feel free to followup and this can be re-opened if necessary.

[andrewmahoneyf]

@theocousin My working solution for this going off of your temporary workaround:

  const onInputChange = (query, { action }) => {
    if (action === 'input-change') {
      setInputValue(query);
      return query;
    }
    return inputValue;
  };

Without hooks:

onInputChange = (query, { action }) => {
   if (action === 'input-change') {
      this.setState({ inputValue: query });
      return query;
    }
    return this.state.inputValue;
  }