Merge pull request #1 from JedWatson/master

Rebase
JedWatson · Nov 23, 2015 · 77f0223 · 77f0223
2 parents 58f0536 + 1d348f2
commit 77f0223
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 192 deletions.
diff --git a/examples/src/components/States.js b/examples/src/components/States.js
@@ -20,7 +20,8 @@ var StatesField = React.createClass({
 			country: 'AU',
 			disabled: false,
 			searchable: this.props.searchable,
-			selectValue: 'new-south-wales'
+			selectValue: 'new-south-wales',
+			clearable: true,
 		};
 	},
 	switchCountry (e) {
@@ -50,7 +51,7 @@ var StatesField = React.createClass({
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
-				<Select ref="stateSelect" autofocus options={options} simpleValue name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} />
+				<Select ref="stateSelect" autofocus options={options} simpleValue clearable={this.state.clearable} name="selected-state" disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} />
 
 				<div style={{ marginTop: 14 }}>
 					<button type="button" onClick={this.focusStateSelect}>Focus Select</button>
@@ -62,6 +63,10 @@ var StatesField = React.createClass({
 						<input type="checkbox" className="checkbox-control" name="disabled" checked={this.state.disabled} onChange={this.toggleCheckbox}/>
 						<span className="checkbox-label">Disabled</span>
 					</label>
+					<label className="checkbox" style={{ marginLeft: 10 }}>
+						<input type="checkbox" className="checkbox-control" name="clearable" checked={this.state.clearable} onChange={this.toggleCheckbox}/>
+						<span className="checkbox-label">Clearable</span>
+					</label>
 				</div>
 				<div className="checkbox-list">
 					<label className="checkbox">

diff --git a/src/Select.js b/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,
 			});
@@ -188,7 +190,8 @@ const Select = React.createClass({
 	closeMenu () {
 		this.setState({
 			isOpen: false,
-			isPseudoFocused: this.state.isFocused && !this.props.multi
+			isPseudoFocused: this.state.isFocused && !this.props.multi,
+			inputValue: '',
 		});
 	},
 
@@ -295,7 +298,7 @@ const Select = React.createClass({
 		if (this.props.multi) {
 			if (typeof value === 'string') value = value.split(this.props.delimiter);
 			if (!Array.isArray(value)) {
-				if (!value) return [];
+				if (value === null || value === undefined) return [];
 				value = [value];
 			}
 			return value.map(this.expandValue).filter(i => i);
@@ -473,8 +476,19 @@ const Select = React.createClass({
 	renderInput (valueArray) {
 		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

diff --git a/src/Value.js b/src/Value.js
@@ -46,7 +46,7 @@ const Value = React.createClass({
 	renderLabel () {
 		let className = 'Select-value-label';
 		return this.props.onClick || this.props.value.href ? (
-			<a className={className} href={this.props.value.href} target={this.props.value.target} onMouseDown={this.handleMouseDown} onTouchEnd={this.props.handleMouseDown}>
+			<a className={className} href={this.props.value.href} target={this.props.value.target} onMouseDown={this.handleMouseDown} onTouchEnd={this.handleMouseDown}>
 				{this.props.children}
 			</a>
 		) : (