Manually filter select options

[wmartins]

Hi, I have two selects on the same page, lets call them SelectA and SelectB for explanation purposes.

The SelectB has some options that may be filtered by SelectA (both of them are asyncOptions).
SelectB has a filterOptions prop, that do the filter based on option selected by SelectA, but how can I make this "communication" between both selects?

I just need a simple way to "say" to SelectB filter its options again.

Any ideas on that? Thank you!

[bruderstein]

I see two ways, both pretty hacky, sorry. (I've not tested either of them, so apologies if they don't work)

Option 1:
Add a ref to SelectB, then call SelectB.loadAsyncOptions(currentValueOfSelectB)
This is bad, as there are currently no "official" API methods that you can call, so that may break in a future version.

Option 2: hacky hacky mchack
Due to an implementation detail, which is even more likely to change, if the options prop changes (specifically, currently, the JSON.stringify representation of the options prop), then the loadAsyncOptions is automatically called. This is pretty likely to change in the future, but this means if you use a dummy object and just mutate it, and re-render, it will refresh (I think!).

I think the real answer is to add a public API method, so people can officially call "refreshOptions", or some such, which filters again, possibly refreshing via async if needed. For a select-box chain like this, I can definitely see the use case, and should be pretty trivial to implement. Let me know if either of the above options work, and I'll try and see if I can create a PR to add a public API method (no guarantee it'll be accepted obviously - not sure if that's something that's on the radar).

[wmartins]

@bruderstein the Option1 works! But I've had to put it in componentDidUpdate to check the previous state and then call the loadAsync (don't know if it's something specific to my code or some general thing).

I've not tested the Option 2, do you want me to do that? Anyway, it seems, as you said, a lot hacky, because you are mixing options with asyncOptions, but, if you want, for testing purposes, I can try this one.

Also, the public API seems great to me, and, as you said, it should be simple to make this kind of select-box chain (even using async to do the job).

Thank you for your quick and great answer!

[bruderstein]

Great, at least you've got a solution for now. Leave option 2, I think option 1 is slightly less hacky, and should be easy to change to an official API if it's accepted.

[eventhough]

@bruderstein @wmartins I would also like to set up a "controlled" select box where one select box's options array is filtered based on the value of another select box. I am currently loading options externally so I am not using the asyncOptions prop. Is there some other recommended way for me to tell a select box to "re-filter" options?

[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