React-select.Async doesn't load options on onClick

Question

I need a Async react-select, which will loadOptions from backend and users will be able to select multiple options. However when inputValue is already entered and users clicks on select input options is not being loaded. They are loaded only when you type something in.

Example code sandbox

Input value stays the same

EDIT: answer

To reload default options you need to pass defaultOptions to Async select, not just true. This can be done by setting defaultOptions to state in componentDidMount and listening for 'menu-close' action in onInputChange and setting defaultOptions to state there. This will ensure that when the component is mounted the defaultOptions will be there, and when menu is closed, the options will be refetched with new inputValue.

Answer 1

To have react-select autoload content you must provide the defaultOptions prop. If you don't autoload then it won't make your async call until they attempt to filter.

<AsyncSelect loadOptions={myAsyncMethod} defaultOptions />

Answer 2

To reload default options you need to pass defaultOptions to Async select, not just true. This can be done by setting defaultOptions to state in componentDidMount and listening for 'menu-close' action in onInputChange and setting defaultOptions to state there. This will ensure that when the component is mounted the defaultOptions will be there, and when menu is closed, the options will be refetched with new inputValue.

Working example