CODEWITHSUNDEEP
reactjsreact-select
David Casanellas
David Casanellas

Reputation: 855

React Async Select

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!

Upvotes: 8

Views: 19092

Answers (2)

David Casanellas
David Casanellas

Reputation: 855

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

Upvotes: 7

Murat Karagöz
Murat Karagöz

Reputation: 37584

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

Upvotes: 1

Related Questions