React-select: Async component update options in weird way

[jpomykala]

onChange method

  onChange(selected) {
    this.setState({ selected });
  }

load more options - data.data contains proper array

  loadOptions(query, callback) {
    Axios.get('/suggestions', { params: { query } })
      .then(({ data }) => ({ options: data.data }))
      .then(suggestions => callback(null, suggestions));
  }

Async component

<Select.Async
            multi
            autoload
            cache={false}
            ignoreAccents={false}
            ignoreCase={false}
            value={selected}
            clearable={false}
            loadOptions={this.loadOptions}
            onChange={this.onChange}
            valueRenderer={d => <SuggestionOption data={d} />}
            optionRenderer={d => <SuggestionOption data={d} />}
          />

I typed first two letters and i'm getting results

i typed another one and results gone

moreover sometimes results are not showing at all, even REST api return array with suggestions

[jpomykala]

Hmm I added

labelKey="title"
valueKey="title"

because I getting objects like { title: 'something', type: 'SOME_TYPE' } that is why i'm using valueRenderer and optionRender to handle this. But still i think it's some kind of bug.

[sutangu]

I have the same issue, by the way (w/ fetch). And the same decision, at the moment.

[agirton]

Hi @evelan if the options don't match the default labelKey or valueKey you will see this issue. This may be something we should clarify as I've seen it come up a few times now. The odd part is the first set of results shouldn't show.

[nicolasazrak]

I found that filterOption tries to match with given label and key if you don't specify a default (https://github.com/JedWatson/react-select/blob/master/src/utils/defaultFilterOptions.js). If you have different fields and you are already doing a server side filtering you can use filterOption={() => true}

[MartijnHols]

I got it to work with filterOptions={options => options}.

[madou]

Is anyone looking into this? There must be a problem we can fix somewhere in Select. Happy to look into it if noone is yet.

[brianedelman]

+1 for this still being an issue

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.