CODEWITHSUNDEEP
javascriptreactjsreact-select
Circuit 8
Circuit 8

Reputation: 479

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

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

Search term not showing images

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

enter image description here

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

appearing

Click away and come back, there they are

Upvotes: 9

Views: 3911

Answers (3)

Mada Rosca
Mada Rosca

Reputation: 1

Yes, it's filterOption={false}, be careful with typing so you don't wonder why it's not working for you :)

Upvotes: 0

spedy
spedy

Reputation: 2360

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

Upvotes: 4

alphiii
alphiii

Reputation: 1635

I found a solution and that is to set filterOptions= {false}

Upvotes: -1

Related Questions