React Async Select

reactjs react-select
David Casanellas picture David Casanellas · Nov 20, 2018 · Viewed 10.6k times · Source

I am struggling with Async Select from react-select. I managed to display some defaultOptions and do an async fetch of its options using promises and loadOptions prop.

What I need is to have the options updated (resolve the promise) when the dropdown of options is displayed on click. Is there a way to execute the same promise onClick (even in onChange)?

I am using the following codepen provided by react-select team https://codesandbox.io/s/7w4w9yyrmx?module=/example.js

Thank you for your help!

Answer

David Casanellas picture David Casanellas · Nov 21, 2018

I actually found a way to solve it using a basic react-select. I am going to manage the options using a react state being set onMenuOpen. Using this approach, I have control on what options are displayed when the user clicks on the select.

https://codesandbox.io/s/vnmvrwoj63

Related questions

How to set a default value in react-select

I have an issue using react-select. I use redux form and I've made my react-select component compatible with redux form. Here is the code: const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.…

Read More
How to style react-select options

What's the best way to style a react-select component's (https://github.com/JedWatson/react-select) options? I can target the select itself just fine, with something like: ... import Select from 'react-select' ... const styles = { fontSize: 14, color: 'blue', } <Select options={[1,2,3,4]} placeholder={'Select …

Read More
How to programmatically clear/reset React-Select?

ReactSelect V2 and V3 seems to have several props like clearValue, resetValue and setValue. Whatever I'm trying, I'm not able to clear the selections programmatically. resetValue seems not to be accessible from the outside. selectRef.setValue([], 'clear') // or selectRef.clearValue() …

Read More