React-select sometimes doesn't display the options in the dropdown menu on async search

Question

strange one here. When using React-Select v1.0.0rc (although the bug occurs with all v1.x) using it in Async mode to search an API, sometimes the options will not show in the dropdown menu. There seems to be no reason for why this happens, but it happens with certain search queries and not others.

Eg coconut works but coconut oil doesnt, even though both return similar results.

The strange thing is that using the React chrome developer tools I can see that the options are set on the state of the Select, but they just don't appear. Also, if I click off the react-select, then click back on it, the results appear (tested in firefox and chrome). Here is my code and a few screenshots to illustrate

<Select.Async name={ this.generateName('ingredient_id')}
          loadOptions={this.getIngredients}
          className="admin-meal-ingredient-search-select"
          autoload={false}
          cache={false}
          multi={false}
          value={this.props.ingredient}
          onChange={this.props.handleIngredientChange}
          placeholder="Search for ingredient" />

Here you can see I have typed something in but no results are coming up

Here you can see the results in the React inspector in the options array

When I click away then click back on the box, the options are

appearing

Answer 1

我正在使用"react-select": "^3.0.4",并且不得不添加filterOption={false}道具。

Answer 2

我找到了一个解决方案，那就是设置filterOptions= {false}

Answer 3

是的，它是filterOption ={false}，输入时要小心，这样你就不会想知道为什么它不适合你:)