Dropdown options update triggered by onSearchChange

In my dropdown module, the options consist of a list of users which are fetched remotely and based on the search value of the dropdown.

<Form.Field
  allowAdditions
  control={Dropdown}
  loading={this.props.loading}
  onSearchChange={this.onSearchChange.bind(this)}
  options={this.state.users}
  placeholder="Select user"
  search
  selection
/>

When some characters are rendered in the seach field, the dropdown options should display the fetched results.

Strangely, this works when there is only one result. When there are more, no results are shown. I do see the options correctly shown in as <options> in the <select> node, but the corresponding <DropdownItem> are not rendered. Logging the results in the console also shows them. When I blur the search box and focus it again, the results are all there. So it seems like the dropdown options don’t update when there is more than 1 result.

[dackers86]

@jhartma Would it be possible to explain how you fixed your solution?

I am experiencing the same problem, the options will only update after a fetch once the I have clicked off screen…?

  <Dropdown
    allowAdditions
    options={this.state.addressOptions}
    placeholder='Please enter your address'
    search
    selection
    fluid
    onChange={this.handleChange}
    onSearchChange={this.handleSearchChange.bind(this)}
  />

[jhartma]

Okay I got it working, I close the issue