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

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.

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.

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) || ''}

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

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

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.

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' })

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.

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();

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.

Thanks @douweknook for the key workaround