1.0.0-rc.3 not working?

[jamesmarrs]

Hello, didnt look too much into it, but i switched to 1.0.0-rc.3 and the multiselect didnt work for me. I upgraded from 1.0.0-rc.2. Multi select loadOptions didnt reload correctly when selecting/de-selecting. Didnt know if anyone had similar issues, figured I would report it! I downgraded back to 1.0.0-rc.2 and everything worked fine. Thanks for the library and contributions <3

<Select.Async
  name="tags"
  cache={false}
  clearable={false}
  multi={true}
  onChange={this.reactSelectChange.bind(this, "tags")}
  loadOptions={this.tagOptions.bind(this)}
  value={this.state.tags}
/>

[milankalinic]

When searching for string, like "microsoft" and hit enter, nothing happens, but if you do it again, search for "microsoft" and hit enter, then the selected option appears. This works in rc.1 no problems, here not.

[clarkritchie]

I also observed this with 1.0.0-rc.3.

[iadunn13]

I've found what causes this to happen. In https://github.com/JedWatson/react-select/commit/732ba55866d4b3bafbefa40c20923cba70804a70 a modification was added to the render definition in lib/Async.js that will clear out the multi-Select's options whenever you select a value. See lib/Async.js line 241

239    onChange: function onChange(newValues) {
240        if (_this3.props.multi && _this3.props.value && newValues.length > _this3.props.value.length) {
241            _this3.clearOptions();
242        }
243        _this3.props.onChange(newValues);
244    }

Commenting out the call to _this3.clearOptions will fix the issue, and I can't think a reason why the options are even being cleared out here in the first place. Hopefully we can get some input from @JedWatson on what should be happening here so we can get it fixed.

[agrosner]

There is some weirdness where you will get the same list of dropdown options accross all multiselect async components in rc2. Rc3 fixes that issue, but this issue remains where the clear options call destroys the result cache until you type a space in the field again. Its not ideal.

[w3-3w]

Maybe this is the same issue as #1542 ?

[milankalinic]

No, it is not the same.

[agirton]

So thought about this and my app expects the options to be cleared out as the user will be making a new call with possibly different search criteria. But to handle the variety of use cases what about a asyncClearsOptions prop? To keep existing behavior it would be true.

[ericnewcomer]

Clearing the options on selection seems like the right thing, the behavior I'm seeing (as described in the since closed #1753) is that a new set of options with no input is not fetched after selection -- which definitely seems like a bug.

[agirton]

Hi @ericnewcomer apologize if this isn't related. It seemed based on the request. Feel free to reopen, but why would you want to refetch the data again with no input? It seems if that were the case wouldn't you want to just keep the options around?

[ericnewcomer]

It's definitely related, just trying to ensure this case is captured here.

Aren't the options getting cleared the options from the previous entry? ie, I search "Adam" select "Adam Girton" then it closes. When I enter it again, I'd expect a new set of options with "" as the input just as it does upon first using it.

Agreed that whether selecting it should collapse the options makes sense as prop, but if it does close, reopening it should definitely create a new set of options with no input.

[dmk23]

Whether or not "Clearing the options on selection seems like the right thing" the current behavior is a failure because after clearing there is no reload of options. This makes it impossible to use this widget for any kind of multi-selects, so we had to subclass/override this behavior to make it work for our project

Would be nice of course to have a proper fix as part of the core project

[Frit]

+1 @dmk23, today found the same issue with clearOptions. This behaviour confuses many devs. ps: have no time, extended Async,

class Async extends Select.Async {
    clearOptions = () => {
        if (!this.props.clearAsyncOptions) {
            return;
        }
        this.setState({ options: [] });
    }
}

[JedWatson]

If I understand this correctly, I've fixed it, and will release it soon as rc.9

The menu will always close by default for both single and multi-select when an option is selected, but you can change that with the closeOnSelect={false} prop.

To keep suggestions from the Async component after selecting an option, also set onSelectResetsInput={false}

[dmk23]

How about onClearResetsInput?

We don't really need to a re-query on every select, but just to fix the current behavior on clear...