isOptionDisabled does not update disabled items between renders

[azinod]

Are you reporting a bug or runtime error?

A bug, I believe.

react-select is not updating the disabled items between renders, even if the result of isOptionDisabled change between renders.

Expected behavior

react-select should run isOptionDisabled on every render/re-render to decide which options should be disabled on that render

Use case scenario

I have a list of items that the user can select and some of those items should be disabled/enabled for selection based on other user inputs in that same form.

As of now, it seems disabled options are calculated only on the very first render (once it mounts) and isOptionDisabled is ignored on the subsequent renders.

Code Example

I have put on an example at: https://codesandbox.io/s/modest-platform-4w4g3?file=/example.js

This example has a toggle that decides whether options should be enabled or disabled. As you will see, it renders them correctly initially, on the first render with the initial disabled value, but fails to update the disabled options in subsequent renders as you toggle the disabled value.

[azinod]

I have just realized it kind of does work, but I need to trigger a re-render of the internal components of react-select so that the options are re-rendered and isOptionDisabled runs again on each of them.

This can be done by typing anything into the input, for example, which is obviously not a solution, but at least helps to track down the problem.

I have yet to take a look at the code to try to suggest a fix or improvement.

[turkle12]

I'm experiencing the same problem

[manvydasu]

I spent some time investigating this and created draft pr #4349
Basically, the issue is due to options being memoized and changes to isOptionDisabled prop are not being considered in memo function.
Another interesting thing is that in componentWillReceiveProps options are being rebuild, however prevProps variation of isOptionDisabled is being used. I added quick fix to that, but it might no be needed if UNSAFE methods will be rewritten soon?

[kgodsmark]

I have also experienced this in a functional component - the state used inside the isOptionDisabled function is not being updated when state changes. So when an option is removed when the menu is open, the option remains disabled.

My current workaround is to add a dynamic key to my multi select e.g. key={selected.length || ''}.

NB. It's not affecting the use of updated state within the isOptionDisabled function in a class component.

[gustavshf]

Experiencing this as well...