Source:  Twitter logo

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!

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

7 users liked answer #0dislike answer #07
David Casanellas profile pic
David Casanellas

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

1 users liked answer #1dislike answer #11
Murat Karagöz profile pic
Murat Karagöz

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).