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.

E.g 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

I'm using "react-select": "^3.0.4", and had to add filterOption={false} prop.