Merge pull request #595 from MrLeebo/keyboard-navigation

#594 and #589 Fixes navigation issues with non-searchable controls

src/Select.js

@@ -63,6 +63,7 @@ const Select = React.createClass({
 		searchable: React.PropTypes.bool,           // whether to enable searching feature or not
 		simpleValue: React.PropTypes.bool,          // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
 		style: React.PropTypes.object,              // optional style to apply to the control
+		tabIndex: React.PropTypes.string,           // optional tab index of the control
 		value: React.PropTypes.any,                 // initial field value
 		valueComponent: React.PropTypes.func,       // value component to render
 		valueKey: React.PropTypes.string,           // path of the label value in option objects
@@ -150,6 +151,7 @@ const Select = React.createClass({
 
 		// for the non-searchable select, toggle the menu
 		if (!this.props.searchable) {
+			this.focus();
 			return this.setState({
 				isOpen: !this.state.isOpen,
 			});
@@ -474,7 +476,19 @@ const Select = React.createClass({
 		var className = classNames('Select-input', this.props.inputProps.className);
 		if (this.props.disabled || !this.props.searchable) {
 			if (this.props.multi && valueArray.length) return;
-			return <div className={className}>&nbsp;</div>;
+			return (
+				<input
+					{...this.props.inputProps}
+					className={className}
+					tabIndex={this.props.tabIndex}
+					onBlur={this.handleInputBlur}
+					onFocus={this.handleInputFocus}
+					type="search"
+					autoComplete="off"
+					readOnly="true"
+					ref="input"
+					style={{ border: 0 }}/>
+			);
 		}
 		return (
 			<Input