diff --git a/src/Select.js b/src/Select.js index 06d519c7ec..a5bfe66cab 100644 --- a/src/Select.js +++ b/src/Select.js @@ -122,9 +122,19 @@ class Select extends React.Component { this.setState({ required: false }); } - if (this.state.inputValue && this.props.value !== nextProps.value && nextProps.onSelectResetsInput) { - this.setState({ inputValue: this.handleInputValueChange('') }); + // Here we only want to clear the input value under the following conditions. + // 1. There currently actually is an inputValue in state + // 2. The new value is different to the old value OR the new value is == null + // 3. The new value is not the same as the last set value OR onSelectResetsInput has been enabled + if (this.state.inputValue + && (this.props.value !== nextProps.value || !nextProps.value) + && (nextProps.value !== this._lastSetValue || nextProps.onSelectResetsInput)) { + this.setState({ + inputValue: this.handleInputValueChange('') + }); } + + delete this._lastSetValue; } componentDidUpdate (prevProps, prevState) { @@ -589,10 +599,11 @@ class Select extends React.Component { const required = this.handleRequired(value, this.props.multi); this.setState({ required }); } + if (this.props.simpleValue && value) { + value = this.props.multi ? value.map(i => i[this.props.valueKey]).join(this.props.delimiter) : value[this.props.valueKey]; + } + this._lastSetValue = value; if (this.props.onChange) { - if (this.props.simpleValue && value) { - value = this.props.multi ? value.map(i => i[this.props.valueKey]).join(this.props.delimiter) : value[this.props.valueKey]; - } this.props.onChange(value); } } @@ -719,11 +730,14 @@ class Select extends React.Component { .filter(option => !option.option.disabled); this._scrollToFocusedOptionOnUpdate = true; if (!this.state.isOpen) { - this.setState({ + const newState = { isOpen: true, - inputValue: '', focusedOption: this._focusedOption || (options.length ? options[dir === 'next' ? 0 : options.length - 1].option : null) - }); + }; + if (!this.props.onSelectResetsInput) { + newState.inputValue = ''; + } + this.setState(newState); return; } if (!options.length) return;