Passing value `undefined` does not clear internal state
See original GitHub issueI’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.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:40
- Comments:18
The API docs say the type for
value
isThat agrees with
ValueType
in the code:I would expect
null
orundefined
to clear the selection, but it does not.Got this same issue today, can verify that using
null
instead ofundefined
did the trick.