Dropdown options update triggered by onSearchChange

[jhartma]

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.

[levithomason]

This is a use case for the <Search />. However, what you described should work as well.

Please provide a codepen repro and we'll look into it.

[jhartma]

I cobbled together a codepen here

And the <Search /> component is great, only that I need the allowAdditions prop which the <Dropdown /> offers

[jhartma]

Okay I got it working, I close the issue

[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]

Yep, this works for some reason:

<Form.Field
  allowAdditions
  control={Dropdown}
  disabled={disabled}
  fluid
  id="input-invite-user"
  loading={this.props.loading}
  onAddItem={this.handleAddition}
  onChange={this.handleChange.bind(this)}
  onSearchChange={this.onSearchChange.bind(this)}
  options={users}
  placeholder="Select user"
  search
  selection
  value={value}
  width="7"
 />