componentWillReceiveProps resets input even if values are the equal
See original GitHub issueBug report
Currently in Select https://github.com/JedWatson/react-select/blob/master/src/Select.js#L144 , we set input value to ‘’" even if the value is equal.
if (this.state.inputValue && this.props.value !== nextProps.value && nextProps.onSelectResetsInput {
this.setState({ inputValue: this.handleInputValueChange('') });
}
Why is this a problem?
If <Select>
is rendered within a stateful React Component which sets state, and is triggered while the Select box is focused, this will cause the input to be reset. In my use case, we have an onScroll
event which triggers when the user scrolls.
As soon as the componentWillReceiveProps
is triggered, the shallow equality check will reset the input even though nothing changed.
Anything that causes a rerender of Select will potentially reset the input when the user is typing
var naiveIsObjectEqual = function(o1, o2) {
return Object.keys(o1).reduce(function(acc, cur) {
if (o1[cur] !== o2[cur]) {
acc = false;
}
return acc;
}, true);
};
var naiveArrayIsEqual = function(v1, v2) {
if (v1.length !== v2.length) return false;
return v1.reduce(function(acc, cur) {
var isElementEqual = v2.reduce(function(innerAcc, innerCur) {
if (!naiveIsObjectEqual(innerCur, cur)) {
innerAcc = false;
}
return innerAcc;
}, true);
if(!isElementEqual) {
acc = false;
}
return acc;
}, true);
};
// Ignore the above equality implementations, they are just a slightly deeper equality check
if (this.state.inputValue && naiveArrayIsEqual(this.props.value, nextProps.value) && nextProps.onSelectResetsInput) {
this.setState({ inputValue: this.handleInputValueChange('') });
}
Next Steps
I will attempt to reproduce this issue on codepen. I am unsure whether this issue specifically affects AsyncCreatable or affects all Select components.
However, if the maintainers are already aware of this issue, I am more than happy to submit a PR to help with this. Please let me know!
Issue Analytics
- State:
- Created 6 years ago
- Reactions:7
- Comments:5 (3 by maintainers)
I opened PR https://github.com/JedWatson/react-select/pull/2299 and it should fix the issues
FYI: having the same issue here, hard one to debug.