React-select: Weird behaviour with Select.Async and loadOptions

[milushov]

Sorry, that's a question actually

I have following code and very weird behavior (on the gif below). The question is -- what I'm doing wrong? Why options not shown immediately after the getOptions func done? Why they shown only after the click outside? That's super confusing.. I need your help guys!

[deleted gif]

getOptions = (value) =>
  return Promise.resolve({options: []}) unless value
  api.geocoder(value).then (data) =>
    countries = [
      {value: 'A', label: 'A'}
      {value: 'B', label: 'B'}
    ]
    console.info(countries)
    {options: countries}

<Select.Async
  className="ads-filter__select"
  value={@props.country_code}
  onChange={(option) => @props.onChange('country_code', option)}
  clearable={false}
  placeholder={I18n.t('ads.country')}
  loadOptions={getOptions}
/>

[adrianojdesouza]

filterOptionAsync(option) {
  // Make logic here, just return true for test
  return true
}

<Select.Async
  className="ads-filter__select"
  value={@props.country_code}
  onChange={(option) => @props.onChange('country_code', option)}
  clearable={false}
  placeholder={I18n.t('ads.country')}
  loadOptions={getOptions}
  // Add props filterOption
  filterOption={this.filterOptionAsync}
/>

Read about this option