diff --git a/src/Select.js b/src/Select.js index a5bfe66cab..63b694d90c 100644 --- a/src/Select.js +++ b/src/Select.js @@ -126,12 +126,9 @@ class Select extends React.Component { // 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('') - }); + // (this is to ensure that the value prop change is not a result of selecting a value) + if (this.state.inputValue) { + this.clearInputValue(nextProps); } delete this._lastSetValue; @@ -193,6 +190,15 @@ class Select extends React.Component { this.toggleTouchOutsideEvent(false); } + clearInputValue (nextProps) { + if ((this.props.value !== nextProps.value || !nextProps.value) + && (nextProps.value !== this._lastSetValue || nextProps.onSelectResetsInput)) { + this.setState({ + inputValue: this.handleInputValueChange(''), + }); + } + } + toggleTouchOutsideEvent (enabled) { if (enabled) { if (!document.addEventListener && document.attachEvent) { @@ -731,10 +737,11 @@ class Select extends React.Component { this._scrollToFocusedOptionOnUpdate = true; if (!this.state.isOpen) { const newState = { + ...this.state, isOpen: true, focusedOption: this._focusedOption || (options.length ? options[dir === 'next' ? 0 : options.length - 1].option : null) }; - if (!this.props.onSelectResetsInput) { + if (this.props.onSelectResetsInput) { newState.inputValue = ''; } this.setState(newState); diff --git a/test/Select-test.js b/test/Select-test.js index 3b00677e4d..47e931b732 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -2138,6 +2138,24 @@ describe('Select', () => { ]; describe('with single select', () => { + it('should have retained inputValue after accepting selection with onSelectResetsInput=false, when navigating via keyboard', () => { + wrapper = createControlWithWrapper({ + value: '', + options: options, + onSelectResetsInput: false, + onCloseResetsInput: false, + onBlurResetsInput: false, + simpleValue: true, + }); + clickArrowToOpen(); + typeSearchText('tw'); + pressEnterToAccept(); + setValueProp('two'); + + expect(instance.state.inputValue, 'to equal', 'tw'); + expect(instance, 'to contain',
Two
); + expect(instance, 'to contain', ); + }); it('should have retained inputValue after accepting selection with onSelectResetsInput=false', () => { // Render an instance of the component wrapper = createControlWithWrapper({ @@ -2146,6 +2164,7 @@ describe('Select', () => { onSelectResetsInput: false, onCloseResetsInput: false, onBlurResetsInput: false, + simpleValue: true, }); clickArrowToOpen(); @@ -2199,7 +2218,8 @@ describe('Select', () => { value: '', options: options, multi: true, - onSelectResetsInput: false + onSelectResetsInput: false, + simpleValue: true, }); clickArrowToOpen(); @@ -2216,6 +2236,7 @@ describe('Select', () => { value: '', options: options, multi: true, + simpleValue: true, }); clickArrowToOpen(); @@ -4521,4 +4542,17 @@ describe('Select', () => { }); }); }); + it('should clear the input value, if the value prop is cleared', () => { + wrapper = createControlWithWrapper({ + value: '', + options: options, + onSelectResetsInput: false, + onCloseResetsInput: false, + onBlurResetsInput: false, + simpleValue: true, + }); + typeSearchText('tw'); + setValueProp(''); + expect(instance.state.inputValue, 'to equal', ''); + }); });