React Async Select

Question

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 1

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

Answer 2

By enabling defaultOptions as true the Component will immediately load the loadOptions. So it is working as intended.

There is actually no way to update the options because it will only do that if there is a inputValue && loadedInputValue. You could provide a Pull Request to add that feature.

 render() {
      const { loadOptions, ...props } = this.props;
      const {
        defaultOptions,
        inputValue,
        isLoading,
        loadedInputValue,
        loadedOptions,
        passEmptyOptions,
      } = this.state;
      const options = passEmptyOptions
        ? []
        : inputValue && loadedInputValue ? loadedOptions : defaultOptions || [];
      return (
        // $FlowFixMe
        <SelectComponent
          {...props}
          filterOption={this.props.filterOption || null}
          ref={ref => {
            this.select = ref;
          }}
          options={options}
          isLoading={isLoading}
          onInputChange={this.handleInputChange}
        />
      );
    }

Source: https://github.com/JedWatson/react-select/blob/master/src/Async.js#L150-L176