Merge branch 'master' into remove-selected

examples/src/components/Multiselect.js

@@ -28,6 +28,7 @@ var MultiSelectField = createClass({
 			crazy: false,
 			stayOpen: false,
 			value: [],
+			rtl: false,
 		};
 	},
 	handleSelectChange (value) {
@@ -39,23 +40,29 @@ var MultiSelectField = createClass({
 			[e.target.name]: e.target.checked,
 		});
 	},
+	toggleRtl (e) {
+		let rtl = e.target.checked;
+		this.setState({ rtl });
+	},
+
 	render () {
 		const { crazy, disabled, stayOpen, value } = this.state;
 		const options = crazy ? WHY_WOULD_YOU : FLAVOURS;
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/Multiselect.js">(Source)</a></h3>
 				<Select
-          closeOnSelect={!stayOpen}
-          disabled={this.state.disabled}    
-          multi
-          onChange={this.handleSelectChange}
-          options={this.state.options}
-          placeholder="Select your favourite(s)"
+					closeOnSelect={!stayOpen}
+					disabled={disabled}
+					multi
+					onChange={this.handleSelectChange}
+					options={options}
+					placeholder="Select your favourite(s)"
           removeSelected={this.state.removeSelected}
-          simpleValue
-          value={this.state.value}
-        />
+					rtl={this.state.rtl}
+					simpleValue
+					value={value}
+				/>
 
 				<div className="checkbox-list">
 					<label className="checkbox">
@@ -74,6 +81,10 @@ var MultiSelectField = createClass({
 						<input type="checkbox" className="checkbox-control" name="stayOpen" checked={stayOpen} onChange={this.toggleCheckbox}/>
 						<span className="checkbox-label">Stay open when an Option is selected</span>
 					</label>
+					<label className="checkbox">
+						<input type="checkbox" className="checkbox-control" name="rtl" checked={this.state.rtl} onChange={this.toggleCheckbox} />
+						<span className="checkbox-label">rtl</span>
+					</label>
 				</div>
 			</div>
 		);

examples/src/components/States.js

@@ -24,18 +24,17 @@ var StatesField = createClass({
 			searchable: this.props.searchable,
 			selectValue: 'new-south-wales',
 			clearable: true,
+			rtl: false,
 		};
 	},
 	switchCountry (e) {
 		var newCountry = e.target.value;
-		console.log('Country changed to ' + newCountry);
 		this.setState({
 			country: newCountry,
 			selectValue: null,
 		});
 	},
 	updateValue (newValue) {
-		console.log('State changed to ' + newValue);
 		this.setState({
 			selectValue: newValue,
 		});
@@ -53,22 +52,39 @@ var StatesField = createClass({
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label} <a href="https://github.com/JedWatson/react-select/tree/master/examples/src/components/States.js">(Source)</a></h3>
-				<Select id="state-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} />
+				<Select
+					id="state-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}
+					rtl={this.state.rtl}
+					searchable={this.state.searchable}
+				/>
+				<button style={{ marginTop: '15px' }} type="button" onClick={this.focusStateSelect}>Focus Select</button>
+				<div className="checkbox-list">
 
-				<div style={{ marginTop: 14 }}>
-					<button type="button" onClick={this.focusStateSelect}>Focus Select</button>
-					<label className="checkbox" style={{ marginLeft: 10 }}>
+					<label className="checkbox">
 						<input type="checkbox" className="checkbox-control" name="searchable" checked={this.state.searchable} onChange={this.toggleCheckbox}/>
 						<span className="checkbox-label">Searchable</span>
 					</label>
-					<label className="checkbox" style={{ marginLeft: 10 }}>
+					<label className="checkbox">
 						<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 }}>
+					<label className="checkbox">
 						<input type="checkbox" className="checkbox-control" name="clearable" checked={this.state.clearable} onChange={this.toggleCheckbox}/>
 						<span className="checkbox-label">Clearable</span>
 					</label>
+					<label className="checkbox">
+						<input type="checkbox" className="checkbox-control" name="rtl" checked={this.state.rtl} onChange={this.toggleCheckbox}/>
+						<span className="checkbox-label">rtl</span>
+					</label>
 				</div>
 				<div className="checkbox-list">
 					<label className="checkbox">

less/control.less

@@ -112,6 +112,10 @@
 	.Select-arrow-zone:hover > .Select-arrow {
 		border-top-color: @select-arrow-color-hover;
 	}
+	&.Select--rtl {
+		direction: rtl;
+		text-align: right;
+	}
 }
 
 // base
@@ -255,6 +259,12 @@
 	text-align: center;
 	vertical-align: middle;
 	width: (@select-arrow-width * 5);
+	padding-right: @select-arrow-width;
+
+	.Select--rtl & {
+		padding-right: 0;
+		padding-left: @select-arrow-width;
+	}
 }
 
 .Select-arrow {

less/multi.less

@@ -14,6 +14,10 @@
 		margin-left: @select-padding-horizontal;
 		padding: 0;
 	}
+	&.Select--rtl .Select-input {
+		margin-left: 0;
+		margin-right: @select-padding-horizontal;
+	}
 
 	// reduce margin once there is value
 	&.has-value .Select-input {
@@ -80,7 +84,17 @@
 			background-color: @select-item-border-color;
 		}
 	}
-
+	&.Select--rtl {
+		.Select-value {
+		  margin-left: 0;
+		  margin-right: @select-item-gutter;
+		}
+		.Select-value-icon {
+			border-right: none;
+			border-left: 1px solid @select-item-border-color-fb; /* Fallback color for IE 8 */
+			border-left: 1px solid @select-item-border-color;
+		}
+	}
 }
 
 .Select--multi.is-disabled {

scss/control.scss

@@ -99,6 +99,10 @@
 	.Select-arrow-zone:hover > .Select-arrow {
 		border-top-color: $select-arrow-color-hover;
 	}
+	&.Select--rtl {
+		direction: rtl;
+		text-align: right;
+	}
 }
 
 // base
@@ -251,6 +255,11 @@
 	vertical-align: middle;
 	width: ($select-arrow-width * 5);
 	padding-right: $select-arrow-width;
+
+	.Select--rtl & {
+		padding-right: 0;
+		padding-left: $select-arrow-width;
+	}
 }
 
 .Select-arrow {

scss/multi.scss

@@ -14,6 +14,10 @@
 		margin-left: $select-padding-horizontal;
 		padding: 0;
 	}
+	&.Select--rtl .Select-input {
+		margin-left: 0;
+		margin-right: $select-padding-horizontal;
+	}
 
 	// reduce margin once there is value
 	&.has-value .Select-input {
@@ -75,6 +79,16 @@
 		}
 	}
 
+	&.Select--rtl {
+		.Select-value {
+		  margin-left: 0;
+		  margin-right: $select-item-gutter;
+		}
+		.Select-value-icon {
+			border-right: none;
+			border-left: 1px solid $select-item-border-color;
+		}
+	}
 }
 
 .Select--multi.is-disabled {

src/Select.js

@@ -387,7 +387,10 @@ class Select extends React.Component {
 				this.selectFocusedOption();
 			return;
 			case 13: // enter
-				if (!this.state.isOpen) return;
+				if (!this.state.isOpen) {
+					this.focusNextOption();
+					return;
+				}
 				event.stopPropagation();
 				this.selectFocusedOption();
 			break;
@@ -400,6 +403,17 @@ class Select extends React.Component {
 					event.stopPropagation();
 				}
 			break;
+			case 32: // space
+				if (!this.props.searchable) {
+					event.preventDefault();
+				}
+				if (!this.state.isOpen) {
+					this.focusNextOption();
+					return;
+				}
+				event.stopPropagation();
+				this.selectFocusedOption();
+			break;
 			case 38: // up
 				this.focusPreviousOption();
 			break;
@@ -424,7 +438,7 @@ class Select extends React.Component {
 				}
 				this.focusStartOption();
 			break;
-			case 46: // backspace
+			case 46: // delete
 				if (!this.state.inputValue && this.props.deleteRemoves) {
 					event.preventDefault();
 					this.popValue();
@@ -786,20 +800,21 @@ class Select extends React.Component {
 				[this._instancePrefix + '-list']: isOpen,
 			});
 			return (
-				
+
 				<div
 					{...divProps}
 					role="combobox"
 					aria-expanded={isOpen}
 					aria-owns={ariaOwns}
 					aria-activedescendant={isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value'}
+					aria-labelledby={this.props['aria-labelledby']}
+					aria-label={this.props['aria-label']}
 					className={className}
 					tabIndex={this.props.tabIndex || 0}
 					onBlur={this.handleInputBlur}
 					onFocus={this.handleInputFocus}
 					ref={ref => this.input = ref}
-					id={divProps.id ? divProps.id : this.props.id}
-					aria-readonly={'' + !!this.props.disabled}
+					aria-disabled={'' + !!this.props.disabled}
 					style={{ border: 0, width: 1, display:'inline-block' }}/>
 			);
 		}
@@ -894,6 +909,7 @@ class Select extends React.Component {
 			return this.props.menuRenderer({
 				focusedOption,
 				focusOption: this.focusOption,
+				inputValue: this.state.inputValue,
 				instancePrefix: this._instancePrefix,
 				labelKey: this.props.labelKey,
 				onFocus: this.focusOption,
@@ -903,6 +919,7 @@ class Select extends React.Component {
 				optionRenderer: this.props.optionRenderer || this.getOptionLabel,
 				options,
 				selectValue: this.selectValue,
+				removeValue: this.removeValue,
 				valueArray,
 				valueKey: this.props.valueKey,
 				onOptionRef: this.onOptionRef,
@@ -1009,6 +1026,7 @@ class Select extends React.Component {
 			'is-pseudo-focused': this.state.isPseudoFocused,
 			'is-searchable': this.props.searchable,
 			'has-value': valueArray.length,
+			'Select--rtl': this.props.rtl,
 		});
 
 		let removeMessage = null;
@@ -1118,6 +1136,7 @@ Select.propTypes = {
 	removeSelected: PropTypes.bool,       // whether the selected option is removed from the dropdown on multi selects
 	required: PropTypes.bool,             // applies HTML5 required attribute when needed
 	resetValue: PropTypes.any,            // value to use when you clear the control
+	rtl: PropTypes.bool, 									// set to true in order to use react-select in right-to-left direction
 	scrollMenuIntoView: PropTypes.bool,   // boolean to enable the viewport to shift so that the full menu fully visible when engaged
 	searchable: PropTypes.bool,           // whether to enable searching feature or not
 	simpleValue: PropTypes.bool,          // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
@@ -1168,6 +1187,7 @@ Select.defaultProps = {
 	placeholder: 'Select...',
   	removeSelected: true,
 	required: false,
+	rtl: false,
 	scrollMenuIntoView: true,
 	searchable: true,
 	simpleValue: false,