React-select: How to programmatically trigger Async loadOptions

[thisthatother]

In my application, I have an onChangeHandler in the first react-select that makes an AJAX call to get the data for populating a second react-select on the page. It needs to populate the second one automatically, with no typing required to trigger the loadOptions. I have not seen any examples that do it like this-- i.e. in the example here, it seems to require typing into the second select to trigger the load.

Is an automatic load like I describe even possible?

[duytbp]

AFAIK, loadOptions can not be triggered manually outside of Async component :(

[kinyat]

One of the workaround is using key props of a component.

When you want to tigger loadOptions again, give it a different key so it will re-render the part with react-select component.

I hope we can have a proper API to trigger this outside of Async component

[oldmill1]

I think @phamthaibaoduy is correct, and loadOptions can not be triggered manually outside of the Async component. However, you can always just use Select (without Async) with onInputChange and get the desired result you want: both "type to search" and dynamic loading.

// SelectInput.js
render() {
    <Select
        onInputChange={this.onInputChange.bind(this)}
        value={this.state.value}
        options={this.state.options || []}
    />
}

Instead of getting the options from loadOptions, we can keep them in the component state.

Every time the user types in Select, Select calls onInputChange and passes along the string that the user typed. We then call our api function which returns a Promise. If the Promise resolves successfully, we set this.state.options to the array returned from the API.

onInputChange(option) {
    this.getOptionsAsync(option)
}

// We expect results to be returned in [{value: '', label: ''},...] format
getOptionsAsync(newInput) {
    get({ input: newInput }).then(({results, error}) => {
        this.setState({
            options: results ? results: [],
            value: newInput
        })
    })
    .catch((error) => {
        console.error(error)
    })
}

[alexcroox]

@kinyat the key trick was genius. After struggling for an hour to get 1 select to change options in another select (and have the updated options available on first click), your key suggestion worked first time. Thank you!!

[aliasgar-choolawala]

@alexcroox Could you please help me out? I am facing an issue similar to urs...
key={this.state.specialitySelected}
multi={this.state.multi}
value={this.state.value}
onChange={this.onChange}
valueKey="value"
labelKey="label"
loadOptions={this.getDoctors}
backspaceRemoves={this.state.backspaceRemoves}
onValueClick={this.getDoctorDetails}
cache={false}
ref="listing"
/>
This is my Select.Async, and i want to trigger loadOptions on first click after value of another Select is modified.

i am fetching the value of specialitySelected from the props of my component, and modifying it in componentWillReceiveProps

the state of specialitySelected is getting modified but the Select still shows old data on first click, and modified data on second click

[jkeruzec]

I'm facing the same issue here with Select V2

I have n async select and I would like to trigger a new fetch depending on other select component values.

When a select is triggered with Open Menu for example, I want to refresh the list of available values.

I will try to use ref possibilities and access directly internals like blur/focus to change the state of select component directly... :/

edit for Async Select with Select V2:

I make it work using internal ref but it's quite a mess.

Basically you can use a ref for each different select component you are using.
ref={ref => setRefFn(ref)}

Then when a value changed from one of my combobox, I call a specific function to update select refs :
I reload options here and update already selected values

 updateEndUserProductRef() {
        let ref = this.endUserProductRef;
        if(ref !== null) {
            ref.loadOptions('', function (options) {
                if (!ref.mounted) return;
                let isLoading = !!ref.lastRequest;
                ref.setState({ defaultOptions: options || [], isLoading: isLoading });

                    ref.select.select.setValue(newValues); // Update current selected values of combobox. Be careful with infinite loop here !
                }

              });
        }
    }

[pratapbunga]

Was struggling around for a couple of hours, your suggestion worked like magic. Thank you @kinyat

[rovolution]

I would really really appreciate an API to accomplish this!

[arokiaprabha]

@kinyat I have been struggling to get this work for a quite amount of time. Your suggestion worked. I prefer to have this feature as part of the Async component like disabling cache or something.

[shpsyte]

One of the workaround is using key props of a component.

When you want to tigger loadOptions again, give it a different key so it will re-render the part with react-select component.

I hope we can have a proper API to trigger this outside of Async component

Can you provide an example?

[ebonow]

This seems important enough to raise as an issue as this approach to the work around seems very much like a hack and could potentially have negative consequences in certain use cases.

I'm adding the needs-review as I would like to play with the idea of allowing the cacheOptions to be a reset mechanism. I'm judging by the implementation and type Any assigned to it, that it may have been likely intended to be used this way, though I am making assumptions.

[Jorybraun]

Re - second this issue. an on focus handler would be great.