Select.Async not working correctly from 1.0.0-rc.6 onwards

I have a basic select set up as follows which works perfectly fine on 1.0.0-rc.5 but once I update to rc.6 onwards, it causes an issue where for example search say sydney it will provide a list of options however upon selecting a option it is not shown in the Select input field despite the suburb value being correctly returned from onChange. I have had a look into the Async.js code and from what I’ve gathered (not 100% sure) it appears to be that upon selecting an option, the inputValue field gets set to “” and causes the Async this.state.options field to become [] and therefore the value has nothing to match against. So not sure if there is a bug or I need to now change something in my implementation for Select.Async. Any help would be much appreciated. render:

 <Select.Async
                loadOptions={handleGetGoogleSuburbs}
                onChange={handleSuburbSelect}
                value={suburb}
 />

handlers:

handleGetGoogleSuburbs(input: string, optionsCallBack: any) {
    getAutoSuggestions(input)
      .then(predictions => {
        const options = predictions.map(x => {
          return { value: x.place_id, label: x.description };
        });
        optionsCallBack(null, { options });
      })
      .catch(() => {
        this.predictions = [];
        optionsCallBack(null, { options: [] });
      });
  }

handleSuburbSelect(selectRes: { value: string; label: string }) {
    if (!selectRes) {
      this.setState({ suburb: "" });
      return;
    }

    this.setState({
      suburb: selectRes.value
    });
  }

[jscheid]

This will also make your code much simpler

I can tell you have good intentions with this change, but I fail to see how this is an improvement.

I don’t want to store the whole option, all that matters is the value anyway. The label is just that, a label. This is also different from how normal HTML5 <select> tag works.

I now have to keep extra state for this. My store just deals in plain values, so now I have to keep the whole option in this.state to make Select.Async happy and keep that state in sync with store’s value, it’s really messy.

Or I need to access async loaded options to search for my value, but I believe that would have to use internal APIs? Or I need to couple the select component to the async load function more tightly so that I can access the options loaded so far. None of these feel right.

Would you reconsider this change? Or at least make it so that I can pass in just { value: value } with no label or a dummy label and it will work ok?

[acordiner92]

@agirton @bickle66 Thanks for the update! Will update my accordingly