Option Does not get rendered without typing white space

When I try to use async menus are rendered only when I type whitespace. I can verify that it is not problem of loadOptions since I can verify that function call successfully since it is called when I did not make white space at the end of my inputbox.

getAddressOpts = debounce((address) => {
    if (!address || address.length < 3) {
        return Promise.resolve({ options: [] });
    }
    let originalUrl= 'api/get_address_info';
    originalUrl = originalUrl + "/" + address
    return fetch(originalUrl)
    .then((response) =>  response.json())
    .catch((error) =>  {options:[]})
    .then((json) => {
        return {
            options: json.map((data)=>{
            var return_data = {}
            return_data['value'] = data.address
            return_data['label'] = data.address
            return return_data
        }),
    complete: true};})
},800)

<Select.Async name="address" searchPromptText="주소나 지명을 입력해주세요" cache={false} loadingPlaceholder="" isLoading={true} onChange={this.onChange} value={this.state.value} loadOptions={this.getAddressOpts} backspaceRemoves={true} />

[malegender]

Thanks @martin-g

Don`t return Promise in debounce.

This not working:

const loadOptions = debounce(async (name) => {
    const options = await loadOptions();
    return options
  }, 1000);

and this is not working:

const loadOptions = debounce(async (name, callback) => {
    const options = await loadOptions();
    callback(options);
  }, 1000);

Working for me:

const loadOptions = debounce((name, callback) => {
    loadOptions().then(options => {
      callback(options);
    });
  }, 1000);

[reichert621]

My guess is that the loadOptions function is expected to either return a promise or execute a callback, but your debounced function does neither.

It seems that in order to use _.debounce, you’ll need to use a callback. Maybe something like this:

const getAddressOptions = (address) => {
  if (!address || address.length < 3) {
    return Promise.resolve({ options: [] });
  }

  const endpoint = `api/get_address_info/${address}`;

  return fetch(endpoint)
    .then(response => response.json())
    .then(json => {
      // etc.
    });
};

const getAddressOptionsDebounced = _.debounce((input, callback) => {
  getAddressOptions(input)
    .then(result => callback(null, result))
    .catch(err => callback(err));
}, 800);

// ...

<Select.Async loadOptions={getAddressOptionsDebounced} />

Also check out https://github.com/JedWatson/react-select/issues/2476 and https://github.com/JedWatson/react-select/issues/614