React-select: Passing value `undefined` does not clear internal state

[douweknook]

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.

[mcarlone]

Thanks @douweknook for the key workaround

[blairmorris]

I've also been running into this. Prior to v2 we mapped all values to the value key, but with the 2.0 changes that only allow an object for the value key, many of our selects changed:

Given these example options:

let options = [
  {label: 'zero', value: 0},
  {label: 'one', value: 1},
  {label: 'two', value: 2}
]

we went from

<Select
    options={options}
    value={this.state.value}
    onChange={option => this.setState({value: option.value})}

to

<Select
    options={options}
    getOptionValue={option => option.value}
    getOptionLabel={option => option.label}
    onChange={option => this.setState({value: option.value})}
    value={options.find(o => o.value === this.state.value)}
>

since the value prop is required to be a full object in v2, instead of just a string as we were setting before.

The only way I've found to work around it is by setting
value={options.find(o => o.value === this.state.value) || '')
but it's definitely a bit duct-tapey.

Though our upgrade solution is a bit non-standard, I would still think that the value being changed to undefined should get reflected in the Select's internal state, instead of holding onto the last value.

[whatrocks]

This duct-tape solved the problem for me as well. Thank you for this solution~

[blairmorris]

Update: In recently updated docs, it says in a piece about upgrading from old key/label props to use
value={options.filter(({value}) => value === this.state.value)}
instead when using simple values, and I've found that it works infinitely better than
value={options.find(({value}) => value === this.state.value) || ''}

[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.

[jacobworrel]

I agree with @jamesarosen - both null and undefined should clear the selection.

We wrap the Select component so my solution to this issue was to provide null as a default prop:

function Wrapper ({
  value = null,
  ..rest
}) {
  return (
    <Select value={value} {...rest} />
  );
}

[andresmatasuarez]

any updates regarding this? Im facing the same thing. "Country" selector should clear "State" selector on change, but the latter just retains its last value despite setting it to null/undefined

[pgib]

If you get a ref to the StateManager, you can do it like this:

<Select
  ref={(ref) => { this.selectRef = ref }}
  ...
/>

Then make the call when you want to clear it.

this.selectRef.onChange(undefined, { action: 'clear' })

[andresmatasuarez]

@pgib thanks for your answer. What you propose seems definitely better than keeping a key in state and updating it to clear the selector. Sadly, it still looks like a hack :(. I can't believe so common a use case is not being handled by default by the library

[pgib]

Yeah, it's totally a hack, but at least it's doing it in the same way as the clear button. Ideally you shouldn't have to dig through the source code to do something so basic. 🤷‍♂️

[DonkeyAfterDark]

Or, using the above example, once you have the ref assigned to the component you can execute this code to clear/reset the select:

this.selectRef.select.clearValue();

[apieceofbart]

When using Select as uncontrolled component the above hack with the clearValue() did not work for me. What worked was setting the value as null.

You can see the comparison here:
https://codesandbox.io/s/epic-matsumoto-3p6j2

[kalbert312]

Also running into this and can confirm using null instead of undefined works. As a workaround I'm just converting null to undefined in my HOC wrapper's onChange.

[yagudaev]

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

[aohua]

Setting the value to null works for me.

[khanilov]

Can confirm the bug too.

[Rall3n]

In normal React way, having the value prop with a value of undefined on a form element indicates it being uncontrolled, meaning it does not rely on a prop for its value. React would give you an error in the console if you change the value of the value prop on a form element to undefined (switching from controlled to uncontrolled). react-select instead gracefully switches to being uncontrolled and manages the value by itself.

---

In short, using undefined to clear the value is in general bad practice. Use null instead when you clear the value of any Select component provided by this library.

[ebonow]

As pointed out by @Rall3n, an undefined value is not interchangeable with null.

Due to the inactivity of this issue and apparent discovery/resolution, we will be closing this. If there are any other followups regarding this confusion, please feel free to open a Discussion in the discussions section.