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

Question

strange here. When using React-Select v1.0.0rc (although an error occurs with all v1.x), using it in Async mode to search for the API, sometimes the parameters do not appear in the drop-down menu. There seems to be no reason why this happens, but it happens with certain search queries, and not with others.

For example, it coconutworks, but coconut oildoes not, although both return similar results.

The strange thing is that with the help of the Chrome React developer tools, I see that the parameters are set in the Select state, but they simply do not appear. In addition, if I click the “Reply-select” button, then click “Back”, the results will appear (tested in firefox and chrome). Here is my code and some 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 that I typed something, but the results do not appear

Here you can see the results in the React inspector in an array of parameters

When I click and then click the button again, options

appears

Answer 1

I found a solution, namely install filterOptions= {false}