question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Async loadOptions is not loading options

See original GitHub issue

Following the github users example, I have the following getCodes function in my loadOptions. The options returned within the promise are valid post the fetch call. However, the issue is that the dropdown menu doesn’t show those options and just says ‘Type to search’.

getCodes(input) {
    if (!input) {
      return Promise.resolve({
        options: [
          {label: 'Delhi', value: 'DEL'},
          {label: 'Mumbai', value: 'MUM'}
        ]
      });
    }
    const url =  'http://iatacodes.org/api/v6/autocomplete?query=' + input + '&api_key=' + KEY;

    var proxyUrl = 'https://cors-anywhere.herokuapp.com/';

    return fetch(proxyUrl+url)
      .then((response) => {
       return response.json();
      }).then((json) => {
        var options = [];
        _.each(json['response']['airports'], (airport) => {
          options.push({
            label: airport['name'],
            value: airport['code']
          })
        });
        console.log(options);
        return options;
      });
  }


fromLocChange(o) {
    this.setState({...this.state, fromLoc: o.value});
}

<Select.Async
    name="form-field-name"
    className="selector"
    valueKey="value"
    labelKey="name"
    value={this.state.fromLoc}
    onChange={this.fromLocChange}
    clearable={false}
    loadOptions={this.getCodes}
/>

Output of the console.log above for a search term ‘JAI’ is:

[
    {label: "Sanganeer", value: "JAI"},
    {label: "Jaisalmer", value: "JSA"}
]

Screenshot of the selector:

image

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6

github_iconTop GitHub Comments

9reactions
amankapurcommented, Sep 18, 2017

sorry small mistake, should have returned

{options: options}

4reactions
qymspacecommented, Nov 7, 2018

In the latest version actually returning options directly works.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React-Select Async loadOptions is not loading options properly
I do use debounce in my getOptions function to reduce number of backend search query. This should not cause any problem i guess....
Read more >
React-Select Async loadOptions is not loading options properly
React Async Select loadoption sometimes fail to loads the option. This is a very strange phenomenon after couple of set of queries react ......
Read more >
React-Select Async loadOptions is not loading options ...
I found out that people intend to look for this problem. So i am posting my update portion of code that fix the...
Read more >
Async - React Select
Use the Async component to load options from a remote source as the user types. import Async, { useAsync } from 'react-select/async'; ...
Read more >
react-select-async-paginate - npm
loadOptions. Required. Async function that take next arguments: Current value of search input. Loaded options for current search.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found