React-select: componentWillReceiveProps resets input even if values are the equal

[choonkending]

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!

[asaarnak]

Using onSelectResetsInput={false} workaround for now.
Propably this commit introduced the bug where input is reset too often: https://github.com/JedWatson/react-select/commit/ae26bf80d10112b1407e1d34e7fa00caa1fe8699

[diegoarcega]

FYI: having the same issue here, hard one to debug.

[choonkending]

@asaarnak Yep that definitely works for us.

For our use case though we wish to to not reset the input if the user scrolls while the textbox is still activated. We ended up adding some logic in our shouldComponentUpdate which was specific to our code to decide when to re-render.

[yuri-sakharov]

I opened PR https://github.com/JedWatson/react-select/pull/2299 and it should fix the issues

[JedWatson]

As noted in #2299 this is fixed in v2, please let us know if that's not the case. I don't expect we'll get a chance to go back and fix it in v1, sorry - but glad there's a workaround