React-select: Reseting asyncOptions

[scruffles]

I'm not sure if this is a bug, or there's a way to get this behavior that I'm not finding. I'm using react-select 1.0.0-beta8

I have two select fields. The first field changes the type (and therefore the list of options available) in the second. If I were using 'options', I would just replace the options list in the second field when the first field changes. I need to use asyncOptions though (too many options).

When I change the first field, I clear the value of the second. loadOptions doesn't get called again until the user types in the field. Until then, the list of options is wrong.

Should I be getting a reference to the field and somehow reseting the options? That wouldn't be very react-like, but this may be a strange corner case. thoughts?

[scruffles]

it seems like cacheAsyncResults={false} should help, but it doesn't seem to work for me at all. Once loadOptions is called with a given input, it's never called again.

[ronaldborman]

I've had a similar requirement. It turns out that for now there isn't an official API for this functionality, so you have to resort to a hack. This is how I solved it (based on the suggestions in issue 372):
1) use cache={{}} in the second Select.Async (cacheAsyncResults seems to be deprecated in 1.0 beta);
2) use ref in the second Select.Async so you can reference it later;
3) In componentDidUpdate call this.refs.[ref specified in point 2].loadOptions("").

I don't know if point 1 is the best option to clear the cache, but it works for me.

[scruffles]

Thanks for pointing me in the right direction. It turns out I needed this solution in a number of places, so I made a wrapper component to isolate the hack to one place:

module.exports = React.createClass
    handleFocus: ->
        @refs.child.loadOptions('')
    render: ->
        <Select.Async ref='child' cache={false} {...@props} onFocus={@handleFocus} />

I'm leaving this issue open. It seems like this should be fixed properly.

[nancruz]

This temporary fix solved my problem too. Is there any plan to fix this issue in future versions?

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples