Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

componentWillReceiveProps resets input even if values are the equal

See original GitHub issue

Bug 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!