Passing value `undefined` does not clear internal state

I’m working on a project where we use a react-select Select component together with 2 radio inputs (see screenshot below). When the other radio is selected we set the value for the select in our local state to undefined using the onChange handler. So we pass the properties value={undefined} and no defaultValue. We also set isClearable={false}, isSearchable={false} and if the value is undefined isDisabled={true}. As you can see the value of the Select component is not cleared and set back to the placeholder.

When inspecting the components react-select creates with the React devtools I noticed the props and state of the StateManager look like this:

It seems that, even though the value is undefined and the defaultValue is null, the state is not cleared. which is odd as the stateManager.js file includes the following lines:

 state = {
      inputValue:
        this.props.inputValue !== undefined
          ? this.props.inputValue
          : this.props.defaultInputValue,
      menuIsOpen:
        this.props.menuIsOpen !== undefined
          ? this.props.menuIsOpen
          : this.props.defaultMenuIsOpen,
      value:
        this.props.value !== undefined
          ? this.props.value
          : this.props.defaultValue,
    };

So this.state.value should be null. And then the following code is used to get that value and pass it to the Select component:

getProp(key: string) {
      return this.props[key] !== undefined ? this.props[key] : this.state[key];
    }

so it should still be null as far as I can tell.

I cannot really explain why this happens but figured I’d make an issue as it feels like a bug. If it’s not and I forgot to pass some prop correctly I’d also be happy to hear it 😃

Ultimately we solved this for our use case by adding a key prop to our Select component so that it remounts when the value changes which does clear the value and sets it back to the placeholder. This works but it is not the nicest fix of course.

[jamesarosen]

The API docs say the type for value is

One of <
  Object,
  Array<Object>,
  null,
  undefined
>

That agrees with ValueType in the code:

export type ValueType = OptionType | OptionsType | null | void;

I would expect null or undefined to clear the selection, but it does not.

[yagudaev]

Got this same issue today, can verify that using null instead of undefined did the trick.