added tests, adjusted focusAdjacentOption logic

sevenval · Jan 4, 2018 · c98fdd0 · c98fdd0
1 parent 6415163
commit c98fdd0
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 8 deletions.
diff --git 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
@@ -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', <div><span className="Select-value-label">Two</span></div>);
+				expect(instance, 'to contain', <input value="tw"/>);
+			});
 			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', '');
+	});
 });