React-select: Async select option empties loadedOptions

[theocousin]

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 !

[theocousin]

For those looking out for a quick workarround I managed to avoid the behaviour via

onInputChange = (query) => {
    // Prevents resetting our input after option has been selected
    if (query) {
      this.setState({ inputValue: query })
      window.localStorage.setItem('inputValue', query)
    }
    return window.localStorage.getItem('inputValue')
  }

But well, we all know where that ends

[Harvzor]

@theocousin https://github.com/JedWatson/react-select/issues/3189#issuecomment-442792535 seems to be the current workaround, but I'm struggling to get it to work (my component seems to re-render causing it to lose focus).

[theocousin]

@Harvzor not sure it will help you but I'm thinking of using https://github.com/vtaits/react-select-async-paginate for every async use case as it works like a charm there thanks to their implementation (issue resolved here https://github.com/vtaits/react-select-async-paginate/issues/23)

[Harvzor]

@theocousin react-select-async-paginate seems to implement onInputChange as well, and the solution is to use that?

I'm having issues with that solution, so switching to this other package wouldn't help.

Thanks for bringing it to my attention though.

[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;
  }

[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.