Close dropdown when clicking on select #211

less/control.less

@@ -149,6 +149,17 @@
 
 // arrow indicator
 
+.Select-arrow-zone {
+	content: " ";
+	display: block;
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	width: 30px;
+	cursor: pointer;
+}
+
 .Select-arrow {
 	border-color: @select-arrow-color transparent transparent;
 	border-style: solid;
@@ -161,4 +172,5 @@
 	right: @select-padding-horizontal;
 	top: @select-padding-vertical + @select-arrow-width + 1;
 	width: 0;
+	cursor: pointer;
 }

src/Select.js

@@ -286,6 +286,8 @@ var Select = React.createClass({
 		if (event && event.type === 'mousedown' && event.button !== 0) {
 			return;
 		}
+		event.stopPropagation();
+		event.preventDefault();
 		this.setValue(null);
 	},
 
@@ -323,6 +325,24 @@ var Select = React.createClass({
 		}
 	},
 
+	handleMouseDownOnArrow: function(event) {
+		// if the event was triggered by a mousedown and not the primary
+		// button, or if the component is disabled, ignore it.
+		if (this.props.disabled || (event.type === 'mousedown' && event.button !== 0)) {
+			return;
+		}
+		// If not focused, handleMouseDown will handle it 
+		if (!this.state.isOpen) {
+			return;
+		}
+
+		event.stopPropagation();
+		event.preventDefault();
+		this.setState({
+			isOpen: false
+		}, this._unbindCloseMenuIfClickedOutside);
+	},
+
 	handleInputFocus: function(event) {
 		var newIsOpen = this.state.isOpen || this._openAfterFocus;
 		this.setState({
@@ -754,7 +774,8 @@ var Select = React.createClass({
 				<div className="Select-control" ref="control" onKeyDown={this.handleKeyDown} onMouseDown={this.handleMouseDown} onTouchEnd={this.handleMouseDown}>
 					{value}
 					{input}
-					<span className="Select-arrow" />
+					<span className="Select-arrow-zone" onMouseDown={this.handleMouseDownOnArrow} />
+					<span className="Select-arrow" onMouseDown={this.handleMouseDownOnArrow} />
 					{loading}
 					{clear}
 				</div>