From b06824784cd3b523bffb0fa621dc298ad1751a16 Mon Sep 17 00:00:00 2001
From: andreme <andreme@users.noreply.github.com>
Date: Fri, 23 Jun 2017 13:48:45 +1000
Subject: [PATCH] Hide create option after closing menu (#1306)

* hide create option after closing menu

* cleaned up tests
---
 src/Select.js          | 32 +++++++++++++++++++-------------
 test/Creatable-test.js | 29 +++++++++++++++++++++++++----
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/Select.js b/src/Select.js
index ea78da39c8..54c6634a21 100644
--- 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,7 +436,7 @@ const Select = createClass({
 			isPseudoFocused: false,
 		};
 		if (this.props.onBlurResetsInput) {
-			onBlurredState.inputValue = '';
+			onBlurredState.inputValue = this.handleInputValueChange('');
 		}
 		this.setState(onBlurredState);
 	},
@@ -445,12 +444,8 @@ const Select = createClass({
 	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,7 +616,7 @@ const Select = createClass({
 		this.hasScrolledToOption = false;
 		if (this.props.multi) {
 			this.setState({
-				inputValue: '',
+				inputValue: this.handleInputValueChange(''),
 				focusedIndex: null
 			}, () => {
 				this.addValue(value);
@@ -618,7 +624,7 @@ const Select = createClass({
 		} 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
index 45014c105a..08118d62a4 100644
--- 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,7 +150,6 @@ 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'
@@ -158,6 +157,28 @@ describe('Creatable', () => {
 		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({