Hide create option after closing menu (#1306)

* hide create option after closing menu * cleaned up tests
JedWatson · Jun 23, 2017 · b068247 · b068247
1 parent d8a34ec
commit b068247
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 17 deletions.
diff --git a/src/Select.js b/src/Select.js
@@ -396,13 +396,12 @@ const Select = createClass({
 			this.setState({
 				isOpen: false,
 				isPseudoFocused: this.state.isFocused && !this.props.multi,
-				inputValue: ''
+				inputValue: this.handleInputValueChange('')
 			});
 		} else {
 			this.setState({
 				isOpen: false,
-				isPseudoFocused: this.state.isFocused && !this.props.multi,
-				inputValue: this.state.inputValue
+				isPseudoFocused: this.state.isFocused && !this.props.multi
 			});
 		}
 		this.hasScrolledToOption = false;
@@ -437,20 +436,16 @@ const Select = createClass({
 			isPseudoFocused: false,
 		};
 		if (this.props.onBlurResetsInput) {
-			onBlurredState.inputValue = '';
+			onBlurredState.inputValue = this.handleInputValueChange('');
 		}
 		this.setState(onBlurredState);
 	},
 
 	handleInputChange (event) {
 		let newInputValue = event.target.value;
 
-		if (this.state.inputValue !== event.target.value && this.props.onInputChange) {
-			let nextState = this.props.onInputChange(newInputValue);
-			// Note: != used deliberately here to catch undefined and null
-			if (nextState != null && typeof nextState !== 'object') {
-				newInputValue = '' + nextState;
-			}
+		if (this.state.inputValue !== event.target.value) {
+			newInputValue = this.handleInputValueChange(newInputValue);
 		}
 
 		this.setState({
@@ -460,6 +455,17 @@ const Select = createClass({
 		});
 	},
 
+	handleInputValueChange(newValue) {
+		if (this.props.onInputChange) {
+			let nextState = this.props.onInputChange(newValue);
+			// Note: != used deliberately here to catch undefined and null
+			if (nextState != null && typeof nextState !== 'object') {
+				newValue = '' + nextState;
+			}
+		}
+		return newValue;
+	},
+
 	handleKeyDown (event) {
 		if (this.props.disabled) return;
 
@@ -610,15 +616,15 @@ const Select = createClass({
 		this.hasScrolledToOption = false;
 		if (this.props.multi) {
 			this.setState({
-				inputValue: '',
+				inputValue: this.handleInputValueChange(''),
 				focusedIndex: null
 			}, () => {
 				this.addValue(value);
 			});
 		} else {
 			this.setState({
 				isOpen: false,
-				inputValue: '',
+				inputValue: this.handleInputValueChange(''),
 				isPseudoFocused: this.state.isFocused,
 			}, () => {
 				this.setValue(value);
@@ -664,7 +670,7 @@ const Select = createClass({
 		this.setValue(this.getResetValue());
 		this.setState({
 			isOpen: false,
-			inputValue: '',
+			inputValue: this.handleInputValueChange(''),
 		}, this.focus);
 	},
 

diff --git a/test/Creatable-test.js b/test/Creatable-test.js
@@ -19,7 +19,7 @@ var TestUtils = require('react-addons-test-utils');
 var Select = require('../src/Select');
 
 describe('Creatable', () => {
-	let creatableInstance, creatableNode, filterInputNode, innserSelectInstance, renderer;
+	let creatableInstance, creatableNode, filterInputNode, innerSelectInstance, renderer;
 
 	beforeEach(() => renderer = TestUtils.createRenderer());
 
@@ -36,7 +36,7 @@ describe('Creatable', () => {
 			<Select.Creatable {...props} />
 		);
 		creatableNode = ReactDOM.findDOMNode(creatableInstance);
-		innserSelectInstance = creatableInstance.select;
+		innerSelectInstance = creatableInstance.select;
 		findAndFocusInputControl();
 	};
 
@@ -106,7 +106,7 @@ describe('Creatable', () => {
 		createControl({
 			filterOptions: () => null
 		});
-		typeSearchText('test');;
+		typeSearchText('test');
 	});
 
 	it('should not show a "create..." prompt if current filter text is not a valid option (as determined by :isValidNewOption prop)', () => {
@@ -150,14 +150,35 @@ describe('Creatable', () => {
 		const options = [{ label: 'One', value: 1 }];
 		createControl({
 			options,
-			shouldKeyDownEventCreateNewOption: ({ keyCode }) => keyCode === 13
 		});
 		typeSearchText('on'); // ['Create option "on"', 'One']
 		TestUtils.Simulate.keyDown(filterInputNode, { keyCode: 40, key: 'ArrowDown' }); // Select 'One'
 		TestUtils.Simulate.keyDown(filterInputNode, { keyCode: 13 });
 		expect(options, 'to have length', 1);
 	});
 
+	it('should remove the new option after closing on selecting option', () => {
+		createControl();
+		typeSearchText('9');
+		TestUtils.Simulate.keyDown(filterInputNode, { keyCode: 40, key: 'ArrowDown' });
+		TestUtils.Simulate.keyDown(filterInputNode, { keyCode: 13 });
+		expect(creatableInstance.inputValue, 'to equal', '');
+	});
+
+	it('should remove the new option after closing on escape', () => {
+		createControl();
+		typeSearchText('9');
+		TestUtils.Simulate.keyDown(filterInputNode, { keyCode: 27 });
+		expect(creatableInstance.inputValue, 'to equal', '');
+	});
+
+	it('should remove the new option after closing on blur', () => {
+		createControl();
+		typeSearchText('9');
+		TestUtils.Simulate.blur(filterInputNode);
+		expect(creatableInstance.inputValue, 'to equal', '');
+	});
+
 	it('should allow a custom select type to be rendered via the :children property', () => {
 		let childProps;
 		createControl({