From 63f1d106e629cf7c00d2d7b0af9d0246cd9c3c3d Mon Sep 17 00:00:00 2001
From: Jacob Zuo <chopinsky@live.com>
Date: Wed, 6 Dec 2017 19:37:41 -0800
Subject: [PATCH] don't open dropdown when clear values

---
 src/Select.js       | 28 +++++++++++++++++++++++++---
 test/Select-test.js | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/src/Select.js b/src/Select.js
index 3769e7ec4f..20c270fe07 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -237,6 +237,7 @@ class Select extends React.Component {
 					isPseudoFocused: false,
 				});
 			}
+
 			return;
 		}
 
@@ -259,6 +260,8 @@ class Select extends React.Component {
 			this.focus();
 
 			let input = this.input;
+			let toOpen = true;
+
 			if (typeof input.getInput === 'function') {
 				// Get the actual DOM input if the ref is an <AutosizeInput /> component
 				input = input.getInput();
@@ -267,9 +270,14 @@ class Select extends React.Component {
 			// clears the value so that the cursor will be at the end of input when the component re-renders
 			input.value = '';
 
+			if (this._focusAfterClear) {
+				toOpen = false;
+				this._focusAfterClear = false;
+			}
+
 			// if the input is focused, ensure the menu is open
 			this.setState({
-				isOpen: true,
+				isOpen: toOpen,
 				isPseudoFocused: false,
 			});
 		} else {
@@ -285,15 +293,18 @@ class Select extends React.Component {
 		if (this.props.disabled || (event.type === 'mousedown' && event.button !== 0)) {
 			return;
 		}
+
 		// If the menu isn't open, let the event bubble to the main handleMouseDown
 		if (!this.state.isOpen) {
 			this.setState({
 				isOpen: true,
 			});
 		}
+
 		// prevent default event handlers
 		event.stopPropagation();
 		event.preventDefault();
+
 		// close the menu
 		if(this.state.isOpen){
 			this.closeMenu();
@@ -306,6 +317,7 @@ class Select extends React.Component {
 		if (this.props.disabled || (event.type === 'mousedown' && event.button !== 0)) {
 			return;
 		}
+
 		event.stopPropagation();
 		event.preventDefault();
 
@@ -331,15 +343,21 @@ class Select extends React.Component {
 
 	handleInputFocus (event) {
 		if (this.props.disabled) return;
-		var isOpen = this.state.isOpen || this._openAfterFocus || this.props.openOnFocus;
+
+		let toOpen = this.state.isOpen || this._openAfterFocus || this.props.openOnFocus;
+		toOpen = this._focusAfterClear ? false : toOpen;  //if focus happens after clear values, don't open dropdown yet.
+		
 		if (this.props.onFocus) {
 			this.props.onFocus(event);
 		}
+
 		this.setState({
 			isFocused: true,
-			isOpen: isOpen,
+			isOpen: toOpen,
 		});
+
 		this._openAfterFocus = false;
+		this._focusAfterClear = false;
 	}
 
 	handleInputBlur (event) {
@@ -618,12 +636,16 @@ class Select extends React.Component {
 		if (event && event.type === 'mousedown' && event.button !== 0) {
 			return;
 		}
+
 		event.preventDefault();
+
 		this.setValue(this.getResetValue());
 		this.setState({
 			isOpen: false,
 			inputValue: this.handleInputValueChange(''),
 		}, this.focus);
+
+		this._focusAfterClear = true;
 	}
 
 	getResetValue () {
diff --git a/test/Select-test.js b/test/Select-test.js
index cb83002a9d..9f5bcb31e0 100644
--- a/test/Select-test.js
+++ b/test/Select-test.js
@@ -2771,6 +2771,7 @@ describe('Select', () => {
 				expect(options, 'to have length', 2);
 			});
 		});
+		
 		describe('empty filterOptions function', () => {
 
 			beforeEach(() => {
@@ -3239,6 +3240,42 @@ describe('Select', () => {
 			});
 		});
 
+		describe('clearValues', () => {
+			let instance = null;
+			const preventDefault = sinon.spy();
+			const event = {
+				'preventDefault': preventDefault,
+				'type': 'mousedown', 
+				'button': 0 
+			};
+
+			beforeEach(() => {
+				instance = createControl({
+					options: defaultOptions,
+					multi: true,
+					openOnFocus: true,
+					value: ['two', 'one']
+				});
+			});
+						
+			it('after clearValue called, menu shall remain closed', () => {
+				
+				instance.clearValue(event);
+
+				expect(instance.state.isOpen, 'to be falsy');
+				expect(instance._focusAfterClear, 'to be true');
+				expect(preventDefault, 'was called once');
+			});
+
+			it('click on Clear button, menu shall remain closed', () => {
+
+				const domNode = ReactDOM.findDOMNode(instance).querySelector('.Select-clear-zone');
+
+				TestUtils.Simulate.mouseDown(domNode, event);
+				expect(instance.state.isOpen, 'to be falsy');
+			});
+		});
+
 		describe('onValueClick', () => {
 			var onValueClick;