Async loadOptions is not loading options
See original GitHub issueFollowing 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:
Issue Analytics
- State:
- Created 6 years ago
- Comments:6
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
sorry small mistake, should have returned
In the latest version actually returning
options
directly works.