From 869d086b0f3fb30c69d006cc9f0a66d5d82c43f1 Mon Sep 17 00:00:00 2001
From: Eric Reynolds <reynolek@gmail.com>
Date: Mon, 21 Sep 2015 14:44:04 -0700
Subject: [PATCH] Add the ability for categorization of react-select options

---
 .eslintrc                                     |    2 +-
 README.md                                     |   93 +-
 examples/src/components/CustomRenderField.js  |    4 +-
 examples/src/components/MultiSelectField.js   |   30 +-
 .../src/components/SelectedValuesField.js     |    4 +-
 examples/src/components/StatesField.js        |    8 +-
 .../src/components/ValuesAsNumbersField.js    |   49 +-
 examples/src/data/states.js                   |    5 +
 less/control.less                             |   24 +-
 less/select.less                              |    5 +
 src/Select.js                                 |  225 ++-
 test/Select-test.js                           | 1506 ++++++++++++++++-
 12 files changed, 1866 insertions(+), 89 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 91a9bdce67..484fc5a615 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -17,7 +17,7 @@
 		"quotes": [2, "single", "avoid-escape"],
 		"react/jsx-boolean-value": 1,
 		"react/jsx-no-undef": 1,
-		"react/jsx-quotes": 1,
+		"jsx-quotes": 1,
 		"react/jsx-sort-prop-types": 1,
 		"react/jsx-uses-react": 1,
 		"react/jsx-uses-vars": 1,
diff --git a/README.md b/README.md
index 27f19880ef..ef6d27e65e 100644
--- a/README.md
+++ b/README.md
@@ -124,6 +124,32 @@ var getOptions = function(input, callback) {
 />
 ```
 
+### Categorized Select
+
+You can utilize categorized selections by setting `categoized={true}`. In this mode:
+
+* You must pass in an object of arrays containing the options
+* The keys of the object become to categories
+
+```js
+var Select = require('react-select');
+
+var options = {
+	"Primary": [
+		{ value: "blue", label: "Blue" },
+		{ value: "green", label: "Green" },
+		{ value: "red", label: "Red" }
+	],
+	"Secondary": [
+		{ value: "yellow", label: "Yellow" },
+		{ value: "magenta", label: "Magenta" },
+		{ value: "cyan", label: "Cyan" }
+	]
+};
+
+<Select options={options} categorized={true} />
+```
+
 ### Filtering options
 
 You can control how options are filtered with the following properties:
@@ -147,39 +173,40 @@ For multi-select inputs, when providing a custom `filterOptions` method, remembe
 ### Further options
 
 
-	Property			|	Type		|	Description
-:-----------------------|:--------------|:--------------------------------
-	addLabelText		|	string		|	text to display when allowCreate is true
-	allowCreate			|	bool		|	allow new options to be created in multi mode (displays an "Add \<option> ?" item when a value not already in the `options` array is entered)
-	asyncOptions 		|	func		|	function to call to get options
-	autoload 			|	bool		|	whether to auto-load the default async options set
-	backspaceRemoves 	|	bool		|	whether pressing backspace removes the last item when there is no input value
-	className 			|	string		|	className for the outer element
-	clearable 			|	bool		|	should it be possible to reset value
-	clearAllText 		|	string		|	title for the "clear" control when multi: true
-	clearValueText 		|	string		|	title for the "clear" control
-	delimiter 			|	string		|	delimiter to use to join multiple values
-	disableCache 		|	bool		|	disables the options cache for asyncOptions
-	disabled 			|	bool		|	whether the Select is disabled or not
-	filterOption 		|	func		|	method to filter a single option: function(option, filterString)
-	filterOptions 		|	func		|	method to filter the options array: function([options], filterString, [values])
-	ignoreCase 			|	bool		|	whether to perform case-insensitive filtering
-	inputProps 			|	object		|	custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
-	matchPos 			|	string		|	(any, start) match the start or entire string when filtering
-	matchProp 			|	string		|	(any, label, value) which option property to filter on
-	multi 				|	bool		|	multi-value input
-	name 				|	string		|	field name, for hidden <input /> tag
-	noResultsText 		|	string		|	placeholder displayed when there are no matching search results
-	onBlur 				|	func		|	onBlur handler: function(event) {}
-	onChange 			|	func		|	onChange handler: function(newValue) {}
-	onFocus 			|	func		|	onFocus handler: function(event) {}
-	optionRenderer		|	func		|	function which returns a custom way to render the options in the menu
-	options 			|	array		|	array of options
-	placeholder 		|	string		|	field placeholder, displayed when there's no value
-	searchable 			|	bool		|	whether to enable searching feature or not
-	searchPromptText 	|	string		|	label to prompt for search input
-	value 				|	any			|	initial field value
-	valueRenderer		|	func		|	function which returns a custom way to render the value selected
+	Property			|	Type			|	Description
+:-----------------------|:------------------|:--------------------------------
+	addLabelText		|	string			|	text to display when allowCreate is true
+	allowCreate			|	bool			|	allow new options to be created in multi mode (displays an "Add \<option> ?" item when a value not already in the `options` array is entered)
+	asyncOptions 		|	func			|	function to call to get options
+	autoload 			|	bool			|	whether to auto-load the default async options set
+	backspaceRemoves 	|	bool			|	whether pressing backspace removes the last item when there is no input value
+	categorized			|	bool			|	whether the options being past in are categorized
+	className 			|	string			|	className for the outer element
+	clearable 			|	bool			|	should it be possible to reset value
+	clearAllText 		|	string			|	title for the "clear" control when multi: true
+	clearValueText 		|	string			|	title for the "clear" control
+	delimiter 			|	string			|	delimiter to use to join multiple values
+	disableCache 		|	bool			|	disables the options cache for asyncOptions
+	disabled 			|	bool			|	whether the Select is disabled or not
+	filterOption 		|	func			|	method to filter a single option: function(option, filterString)
+	filterOptions 		|	func			|	method to filter the options array: function([options], filterString, [values])
+	ignoreCase 			|	bool			|	whether to perform case-insensitive filtering
+	inputProps 			|	object			|	custom attributes for the Input (in the Select-control) e.g: {'data-foo': 'bar'}
+	matchPos 			|	string			|	(any, start) match the start or entire string when filtering
+	matchProp 			|	string			|	(any, label, value) which option property to filter on
+	multi 				|	bool			|	multi-value input
+	name 				|	string			|	field name, for hidden <input /> tag
+	noResultsText 		|	string			|	placeholder displayed when there are no matching search results
+	onBlur 				|	func			|	onBlur handler: function(event) {}
+	onChange 			|	func			|	onChange handler: function(newValue) {}
+	onFocus 			|	func			|	onFocus handler: function(event) {}
+	optionRenderer		|	func			|	function which returns a custom way to render the options in the menu
+	options 			|	array or object |	array of options
+	placeholder 		|	string			|	field placeholder, displayed when there's no value
+	searchable 			|	bool			|	whether to enable searching feature or not
+	searchPromptText 	|	string			|	label to prompt for search input
+	value 				|	any				|	initial field value
+	valueRenderer		|	func			|	function which returns a custom way to render the value selected
 
 ### Methods
 
diff --git a/examples/src/components/CustomRenderField.js b/examples/src/components/CustomRenderField.js
index 6ea7297571..32091d8f75 100644
--- a/examples/src/components/CustomRenderField.js
+++ b/examples/src/components/CustomRenderField.js
@@ -31,7 +31,7 @@ var CustomRenderField = React.createClass({
 				<Select
 					delimiter={this.props.delimiter}
 					multi={this.props.multi}
-					allowCreate={true}
+					allowCreate
 					placeholder="Select your favourite"
 					options={ops}
 					optionRenderer={this.renderOption}
@@ -42,4 +42,4 @@ var CustomRenderField = React.createClass({
 	}
 });
 
-module.exports = CustomRenderField;
\ No newline at end of file
+module.exports = CustomRenderField;
diff --git a/examples/src/components/MultiSelectField.js b/examples/src/components/MultiSelectField.js
index 1613cb91b6..f1f227d7d1 100644
--- a/examples/src/components/MultiSelectField.js
+++ b/examples/src/components/MultiSelectField.js
@@ -13,6 +13,7 @@ var MultiSelectField = React.createClass({
 	getInitialState () {
 		return {
 			disabled: false,
+			categorized: false,
 			value: []
 		};
 	},
@@ -23,6 +24,9 @@ var MultiSelectField = React.createClass({
 	toggleDisabled (e) {
 		this.setState({ 'disabled': e.target.checked });
 	},
+	toggleCategorized (e) {
+		this.setState({ 'categorized': e.target.checked });
+	},
 	render () {
 		var ops = [
 			{ label: 'Chocolate', value: 'chocolate' },
@@ -32,20 +36,40 @@ var MultiSelectField = React.createClass({
 			{ label: 'Cookies and Cream', value: 'cookiescream' },
 			{ label: 'Peppermint', value: 'peppermint' }
 		];
+
+		if (this.state.categorized) {
+			ops = {
+				basic: [
+					{ label: 'Chocolate', value: 'chocolate' },
+					{ label: 'Vanilla', value: 'vanilla' },
+					{ label: 'Strawberry', value: 'strawberry' }
+				],
+				specialty: [
+					{ label: 'Caramel', value: 'caramel' },
+					{ label: 'Cookies and Cream', value: 'cookiescream' },
+					{ label: 'Peppermint', value: 'peppermint' }
+				]
+			};
+		}
+
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
-				<Select multi={true} disabled={this.state.disabled} value={this.state.value} placeholder="Select your favourite(s)" options={ops} onChange={this.handleSelectChange} />
-					
+				<Select multi categorized={this.state.categorized} disabled={this.state.disabled} value={this.state.value} placeholder="Select your favourite(s)" options={ops} onChange={this.handleSelectChange} />
+
 				<div className="checkbox-list">
 					<label className="checkbox">
 						<input type="checkbox" className="checkbox-control" checked={this.state.disabled} onChange={this.toggleDisabled} />
 						<span className="checkbox-label">Disabled</span>
 					</label>
+					<label className="checkbox">
+						<input type="checkbox" className="checkbonx-control" checked={this.state.categorized} onChange={this.toggleCategorized} />
+						<span className="checkbox-label">Categorized</span>
+					</label>
 				</div>
 			</div>
 		);
 	}
 });
 
-module.exports = MultiSelectField;
\ No newline at end of file
+module.exports = MultiSelectField;
diff --git a/examples/src/components/SelectedValuesField.js b/examples/src/components/SelectedValuesField.js
index 10beffb664..18df31e9d9 100644
--- a/examples/src/components/SelectedValuesField.js
+++ b/examples/src/components/SelectedValuesField.js
@@ -30,7 +30,7 @@ var SelectedValuesField = React.createClass({
 					allowCreate={this.props.allowCreate}
 					onOptionLabelClick={this.onLabelClick}
 					value={this.props.options.slice(1,3)}
-					multi={true}
+					multi
 					placeholder="Select your favourite(s)"
 					options={this.props.options}
 					onChange={logChange} />
@@ -40,4 +40,4 @@ var SelectedValuesField = React.createClass({
 	}
 });
 
-module.exports = SelectedValuesField;
\ No newline at end of file
+module.exports = SelectedValuesField;
diff --git a/examples/src/components/StatesField.js b/examples/src/components/StatesField.js
index 9521d99d38..55620871cc 100644
--- a/examples/src/components/StatesField.js
+++ b/examples/src/components/StatesField.js
@@ -22,7 +22,7 @@ var StatesField = React.createClass({
 	},
 	getInitialState () {
 		return {
-			country: 'AU',
+			country: 'Both',
 			disabled: false,
 			searchable: this.props.searchable,
 			id: ++id,
@@ -56,7 +56,7 @@ var StatesField = React.createClass({
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
-				<Select ref="stateSelect" options={ops} disabled={this.state.disabled} value={this.state.selectValue} onChange={this.updateValue} searchable={this.state.searchable} />
+				<Select ref="stateSelect" categorized={this.state.country === 'Both'} options={ops} 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>
@@ -78,6 +78,10 @@ var StatesField = React.createClass({
 						<input type="radio" className="checkbox-control" checked={this.state.country === 'US'} value="US" onChange={this.switchCountry}/>
 						<span className="checkbox-label">United States</span>
 					</label>
+					<label className="checkbox">
+						<input type="radio" className="checkbox-control" checked={this.state.country === 'Both'} value="Both" onChange={this.switchCountry}/>
+						<span className="checkbox-label">Both</span>
+					</label>
 				</div>
 			</div>
 		);
diff --git a/examples/src/components/ValuesAsNumbersField.js b/examples/src/components/ValuesAsNumbersField.js
index 07d36bf435..b080fe044a 100644
--- a/examples/src/components/ValuesAsNumbersField.js
+++ b/examples/src/components/ValuesAsNumbersField.js
@@ -10,7 +10,7 @@ var ValuesAsNumbersField = React.createClass({
 	propTypes: {
 		label: React.PropTypes.string
 	},
-	
+
 	getInitialState () {
 		return {
 			options: [
@@ -20,14 +20,26 @@ var ValuesAsNumbersField = React.createClass({
 				{ value: 23, label: 'Twenty-three' },
 				{ value: 24, label: 'Twenty-four' }
 			],
+			categorizedOptions: {
+				'Category One': [
+					{ value: 10, label: 'Ten' },
+					{ value: 11, label: 'Eleven' }
+				],
+				'Category Two': [
+					{ value: 12, label: 'Twelve' },
+					{ value: 23, label: 'Twenty-three' },
+					{ value: 24, label: 'Twenty-four' }
+				]
+			},
 			matchPos: 'any',
 			matchValue: true,
 			matchLabel: true,
 			value: null,
-			multi: false
+			multi: false,
+			categorized: false
 		};
 	},
-	
+
 	onChangeMatchStart(event) {
 		this.setState({
 			matchPos: event.target.checked ? 'start' : 'any'
@@ -45,43 +57,50 @@ var ValuesAsNumbersField = React.createClass({
 			matchLabel: event.target.checked
 		});
 	},
-	
+
+	onChangeCategorized(event) {
+		this.setState({
+			categorized: event.target.checked
+		});
+	},
+
 	onChange(value, values) {
 		this.setState({
 			value: value
 		});
 		logChange(value, values);
 	},
-	
+
 	onChangeMulti(event) {
 		this.setState({
 			multi: event.target.checked
 		});
 	},
-	
+
 	render () {
-		
+
 		var matchProp = 'any';
-		
+
 		if (this.state.matchLabel && !this.state.matchValue) {
 			matchProp = 'label';
 		}
-		
+
 		if (!this.state.matchLabel && this.state.matchValue) {
 			matchProp = 'value';
 		}
-		
+
 		return (
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
 				<Select
-					searchable={true}
+					searchable
 					matchProp={matchProp}
 					matchPos={this.state.matchPos}
-					options={this.state.options}
+					options={this.state.categorized ? this.state.categorizedOptions : this.state.options}
 					onChange={this.onChange}
 					value={this.state.value}
 					multi={this.state.multi}
+					categorized={this.state.categorized}
 					/>
 				<div className="checkbox-list">
 					<label className="checkbox">
@@ -100,10 +119,14 @@ var ValuesAsNumbersField = React.createClass({
 						<input type="checkbox" className="checkbox-control" checked={this.state.matchPos === 'start'} onChange={this.onChangeMatchStart} />
 						<span className="checkbox-label">Only include matches from the start of the string</span>
 					</label>
+					<label className="checkbox">
+						<input type="checkbox" className="checkbox-control" checked={this.state.categorized} onChange={this.onChangeCategorized} />
+						<span className="checkbox-label">Categorized options</span>
+					</label>
 				</div>
 			</div>
 		);
 	}
 });
 
-module.exports = ValuesAsNumbersField;
\ No newline at end of file
+module.exports = ValuesAsNumbersField;
diff --git a/examples/src/data/states.js b/examples/src/data/states.js
index 4abd75405e..bf6ac1c04e 100644
--- a/examples/src/data/states.js
+++ b/examples/src/data/states.js
@@ -70,3 +70,8 @@ exports.US = [
     { value: 'WI', label: 'Wisconsin' },
     { value: 'WY', label: 'Wyoming' }
 ];
+
+exports.Both = {
+	Australia: exports.AU,
+	'United States': exports.US
+};
diff --git a/less/control.less b/less/control.less
index 37372626ac..1b66deaad3 100644
--- a/less/control.less
+++ b/less/control.less
@@ -1,4 +1,4 @@
-// 
+//
 // Control
 // ------------------------------
 
@@ -28,6 +28,22 @@
 	}
 }
 
+// categories
+
+.Select-category {
+    padding: @select-category-padding-vertical @select-category-padding-horizontal;
+    color: @select-category-text-color;
+    text-transform: capitalize;
+
+
+}
+
+.is-categorized {
+    &.Select-option, &.Select-searching, &.Select-noresults, &.Select-search-prompt {
+	    padding-left: @select-item-categorized-padding-horizontal;
+	}
+}
+
 .is-searchable {
 	&.is-open > .Select-control {
 		cursor: text;
@@ -103,7 +119,7 @@
 // the <input> element users type in
 
 .Select-input {
-	
+
 	> input {
 		cursor: default;
 		background: none transparent;
@@ -117,7 +133,7 @@
 		outline: none;
 		display: inline-block;
 		-webkit-appearance: none;
-		
+
 		.is-focused & {
 			cursor: text;
 		}
@@ -162,7 +178,7 @@
 	&:hover {
 		color: @select-clear-hover-color;
 	}
-	
+
 	> span {
 		font-size: 1.1em;
 	}
diff --git a/less/select.less b/less/select.less
index 6d0bb61270..553535e6b0 100644
--- a/less/select.less
+++ b/less/select.less
@@ -16,6 +16,10 @@
 @select-input-placeholder:         #aaa;
 @select-input-border-focus:        #08c; // blue
 
+@select-category-text-color:	   #888;
+@select-category-padding-vertical: 5px;
+@select-category-padding-horizontal: 10px;
+
 @select-padding-vertical:          8px;
 @select-padding-horizontal:        10px;
 
@@ -48,6 +52,7 @@
 @select-item-disabled-color:       #888;
 @select-item-disabled-bg:          #f2f2f2;
 @select-item-disabled-border-color: darken(@select-item-disabled-bg, 10%);
+@select-item-categorized-padding-horizontal: 20px;
 
 
 @import "control.less";
diff --git a/src/Select.js b/src/Select.js
index e1124f7c03..0a82c89fb2 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -22,6 +22,7 @@ var Select = React.createClass({
 		autoload: React.PropTypes.bool,            // whether to auto-load the default async options set
 		backspaceRemoves: React.PropTypes.bool,    // whether backspace removes an item if there is no text input
 		cacheAsyncResults: React.PropTypes.bool,   // whether to allow cache
+		categorized: React.PropTypes.bool,		   // whether the options are categorized
 		className: React.PropTypes.string,         // className for the outer element
 		clearAllText: React.PropTypes.string,      // title for the "clear" control when multi: true
 		clearValueText: React.PropTypes.string,    // title for the "clear" control
@@ -45,7 +46,10 @@ var Select = React.createClass({
 		onOptionLabelClick: React.PropTypes.func,  // onCLick handler for value labels: function (value, event) {}
 		optionComponent: React.PropTypes.func,     // option component to render in dropdown
 		optionRenderer: React.PropTypes.func,      // optionRenderer: function(option) {}
-		options: React.PropTypes.array,            // array of options
+		options: React.PropTypes.oneOfType([
+			React.PropTypes.array,
+			React.PropTypes.object 				   // an array or an object
+		]),
 		placeholder: React.PropTypes.string,       // field placeholder, displayed when there's no value
 		searchable: React.PropTypes.bool,          // whether to enable searching feature or not
 		searchingText: React.PropTypes.string,     // message to display whilst options are loading via asyncOptions
@@ -238,13 +242,31 @@ var Select = React.createClass({
 		var focusedOption;
 		var valueForState = null;
 		if (!this.props.multi && values.length) {
-			focusedOption = values[0];
-			valueForState = values[0].value;
+			if (Object.getPrototypeOf(filteredOptions) === Object.prototype) {
+				focusedOption = values[0];
+				valueForState = values[0].value;
+			} else {
+				focusedOption = values[0];
+				valueForState = values[0].value;
+			}
 		} else {
-			focusedOption = this.getFirstFocusableOption(filteredOptions);
-			valueForState = values.map(function(v) { return v.value; }).join(this.props.delimiter);
+			if (Object.getPrototypeOf(filteredOptions) === Object.prototype) {
+				var ops = [];
+				for (var key in filteredOptions) {
+					ops = ops.concat(filteredOptions[key]);
+				}
+
+				focusedOption = this.getFirstFocusableOption(ops);
+				valueForState = values.map(function(v) { return v.value; }).join(this.props.delimiter);
+
+			} else {
+				focusedOption = this.getFirstFocusableOption(filteredOptions);
+				valueForState = values.map(function(v) { return v.value; }).join(this.props.delimiter);
+			}
 		}
 
+
+
 		return {
 			value: valueForState,
 			values: values,
@@ -256,7 +278,6 @@ var Select = React.createClass({
 	},
 
 	getFirstFocusableOption: function (options) {
-
 		for (var optionIndex = 0; optionIndex < options.length; ++optionIndex) {
 			if (!options[optionIndex].disabled) {
 				return options[optionIndex];
@@ -269,7 +290,7 @@ var Select = React.createClass({
 			if (typeof values === 'string') {
 				values = values === ''
 					? []
-					: this.props.multi 
+					: this.props.multi
 						? values.split(this.props.delimiter)
 						: [ values ];
 			} else {
@@ -278,17 +299,33 @@ var Select = React.createClass({
 		}
 		return values.map(function(val) {
 			if (typeof val === 'string' || typeof val === 'number') {
-				for (var key in options) {
-					if (options.hasOwnProperty(key) &&
-						options[key] &&
-						(options[key].value === val ||
-							typeof options[key].value === 'number' &&
-							options[key].value.toString() === val
-						)) {
-						return options[key];
+				if (Object.getPrototypeOf(options) === Object.prototype) {
+					for (var category in options) {
+						for (var key in options[category]) {
+							if (options[category].hasOwnProperty(key) &&
+								options[category][key] &&
+								(options[category][key].value === val ||
+									typeof options[category][key].value === 'number' &&
+									options[category][key].value.toString() === val
+								)) {
+								return options[category][key];
+							}
+						}
+					}
+					return { value: val, label: val };
+				} else {
+					for (var key in options) {
+						if (options.hasOwnProperty(key) &&
+							options[key] &&
+							(options[key].value === val ||
+								typeof options[key].value === 'number' &&
+								options[key].value.toString() === val
+							)) {
+							return options[key];
+						}
 					}
+					return { value: val, label: val };
 				}
-				return { value: val, label: val };
 			} else {
 				return val;
 			}
@@ -480,12 +517,28 @@ var Select = React.createClass({
 	// Ensures that the currently focused option is available in filteredOptions.
 	// If not, returns the first available option.
 	_getNewFocusedOption: function(filteredOptions) {
-		for (var key in filteredOptions) {
-			if (filteredOptions.hasOwnProperty(key) && filteredOptions[key] === this.state.focusedOption) {
-				return filteredOptions[key];
+		if (Object.getPrototypeOf(filteredOptions) !== Object.prototype) {
+			for (var key in filteredOptions) {
+				if (filteredOptions.hasOwnProperty(key) && filteredOptions[key] === this.state.focusedOption) {
+					return filteredOptions[key];
+				}
 			}
+
+			return this.getFirstFocusableOption(filteredOptions);
+		} else {
+			var ops = [];
+			for (var category in filteredOptions) {
+				ops = ops.concat(filteredOptions[category]);
+
+				for (var key in filteredOptions[category]) {
+					if (filteredOptions[category].hasOwnProperty(key) && filteredOptions[category][key] === this.state.focusedOption) {
+						return filteredOptions[category][key];
+					}
+				}
+			}
+
+			return this.getFirstFocusableOption(ops);
 		}
-		return this.getFirstFocusableOption(filteredOptions);
 	},
 
 	handleInputChange: function(event) {
@@ -578,6 +631,7 @@ var Select = React.createClass({
 
 	filterOptions: function(options, values) {
 		var filterValue = this._optionsFilterString;
+		var opts = options || [];
 		var exclude = (values || this.state.values).map(function(i) {
 			return i.value;
 		});
@@ -601,7 +655,18 @@ var Select = React.createClass({
 					(this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0)
 				);
 			};
-			return (options || []).filter(filterOption, this);
+
+			if (Object.getPrototypeOf(opts) === Object.prototype) {
+				opts = {};
+
+				for (var key in options) {
+					opts[key] = options[key].filter(filterOption, this);
+				}
+
+				return opts;
+			} else {
+				return opts.filter(filterOption, this);
+			}
 		}
 	},
 
@@ -631,9 +696,21 @@ var Select = React.createClass({
 
 	focusAdjacentOption: function(dir) {
 		this._focusedOptionReveal = true;
-		var ops = this.state.filteredOptions.filter(function(op) {
-			return !op.disabled;
-		});
+		var ops;
+
+		if (this.props.categorized) {
+			ops = [];
+			for (var key in this.state.filteredOptions) {
+				var s = this.state.filteredOptions[key].filter(function(op) {
+					return !op.disabled;
+				});
+				ops = ops.concat(s);
+			}
+		} else {
+			ops = this.state.filteredOptions.filter(function (op) {
+				return !op.disabled;
+			});
+		}
 		if (!this.state.isOpen) {
 			this.setState({
 				isOpen: true,
@@ -695,6 +772,7 @@ var Select = React.createClass({
 			};
 			options.unshift(newOption);
 		}
+
 		var ops = Object.keys(options).map(function(key) {
 			var op = options[key];
 			var isSelected = this.state.value === op.value;
@@ -747,6 +825,99 @@ var Select = React.createClass({
 		}
 	},
 
+	buildCategorizedMenu: function() {
+		var focusedValue = this.state.focusedOption ? this.state.focusedOption.value : null;
+		var renderLabel = this.props.optionRenderer || function(op) {
+				return op.label;
+			};
+		if (this.state.filteredOptions.length > 0) {
+			focusedValue = focusedValue == null ? this.state.filteredOptions[0] : focusedValue;
+		}
+		// Add the current value to the filtered options in last resort
+		// Do not allow to happen in categorization, as we wont know exactly where to put it
+		var options = this.state.filteredOptions;
+		if (this.props.allowCreate && !this.props.categorized && this.state.inputValue.trim()) {
+			var inputValue = this.state.inputValue;
+			options = options.slice();
+			var newOption = this.props.newOptionCreator ? this.props.newOptionCreator(inputValue) : {
+				value: inputValue,
+				label: inputValue,
+				create: true
+			};
+			options.unshift(newOption);
+		}
+
+		var ops = Object.keys(options).map(function(category) {
+			var retOpts = [];
+			retOpts.push(<div className={"Select-category"}>{category}</div>);
+			var results = Object.keys(options[category]).map(function (key) {
+				var op = options[category][key];
+				var isSelected = this.state.value === op.value;
+				var isFocused = focusedValue === op.value;
+				var optionClass = classes({
+					'Select-option': true,
+					'is-selected': isSelected,
+					'is-focused': isFocused,
+					'is-disabled': op.disabled,
+					'is-categorized': true
+				});
+				var ref = isFocused ? 'focused' : null;
+				var mouseEnter = this.focusOption.bind(this, op);
+				var mouseLeave = this.unfocusOption.bind(this, op);
+				var mouseDown = this.selectValue.bind(this, op);
+				var optionResult = React.createElement(this.props.optionComponent, {
+					key: 'option-' + op.value,
+					className: optionClass,
+					renderFunc: renderLabel,
+					mouseEnter: mouseEnter,
+					mouseLeave: mouseLeave,
+					mouseDown: mouseDown,
+					click: mouseDown,
+					addLabelText: this.props.addLabelText,
+					option: op,
+					ref: ref
+				});
+				return optionResult;
+			}, this);
+
+			if (results.length) {
+				results.map(function(option) {
+					retOpts.push(option);
+				});
+
+				return retOpts;
+			} else {
+				var noResultsText;
+				var noResultsClasses = {
+					'Select-searching': false,
+					'Select-noresults': false,
+					'Select-search-prompt': false,
+					'is-categorized': true
+				};
+				if (this.state.isLoading) {
+					noResultsClasses['Select-searching'] = true;
+					noResultsText = this.props.searchingText;
+				} else if (this.state.inputValue || !this.props.asyncOptions) {
+					noResultsClasses['Select-noresults'] = true;
+					noResultsText = this.props.noResultsText;
+				} else {
+					noResultsClasses['Select-search-prompt'] = true;
+					noResultsText = this.props.searchPromptText;
+				}
+
+				retOpts.push(
+					<div className={classes(noResultsClasses)}>
+						{noResultsText}
+					</div>
+				);
+
+				return retOpts;
+			}
+		}, this);
+
+		return ops;
+	},
+
 	handleOptionLabelClick: function (value, event) {
 		if (this.props.onOptionLabelClick) {
 			this.props.onOptionLabelClick(value, event);
@@ -761,7 +932,8 @@ var Select = React.createClass({
 			'is-focused': this.state.isFocused,
 			'is-loading': this.state.isLoading,
 			'is-disabled': this.props.disabled,
-			'has-value': this.state.value
+			'has-value': this.state.value,
+			'is-categorized': this.props.categorized
 		});
 		var value = [];
 		if (this.props.multi) {
@@ -810,9 +982,10 @@ var Select = React.createClass({
 				className: 'Select-menu',
 				onMouseDown: this.handleMouseDown
 			};
+
 			menu = (
 				<div ref="selectMenuContainer" className="Select-menu-outer">
-					<div {...menuProps}>{this.buildMenu()}</div>
+					<div {...menuProps}>{!this.props.categorized ? this.buildMenu() : this.buildCategorizedMenu()}</div>
 				</div>
 			);
 		}
diff --git a/test/Select-test.js b/test/Select-test.js
index 98a8d99b4d..c91355f26b 100644
--- a/test/Select-test.js
+++ b/test/Select-test.js
@@ -153,6 +153,17 @@ describe('Select', function() {
 		{ value: 'four', label: 'AbcDef' }
 	];
 
+	var categorizedOptions = {
+		categoryOne: [
+			{ value: 'one', label: 'One' },
+			{ value: 'two', label: '222' }
+		],
+		categoryTwo: [
+			{ value: 'three', label: 'Three' },
+			{ value: 'four', label: 'AbcDef' }
+		]
+	};
+
 
 	describe('with simple options', function () {
 
@@ -414,6 +425,271 @@ describe('Select', function() {
 
 	});
 
+	describe('with simple options that are categorized', function () {
+
+		beforeEach(function () {
+
+			options = {
+				categoryOne: [
+					{ value: 'one', label: 'One' },
+					{ value: 'two', label: 'Two' }
+				],
+				categoryTwo: [
+					{ value: 'three', label: 'Three' }
+				]
+			};
+
+			instance = createControl({
+				name: 'form-field-name',
+				value: 'one',
+				options: options,
+				searchable: true,
+				categorized: true
+			});
+		});
+
+
+		it('should assign the given name', function () {
+			var selectInputElement = TestUtils.scryRenderedDOMComponentsWithTag(instance, 'input')[0];
+			expect(React.findDOMNode(selectInputElement).name, 'to equal', 'form-field-name');
+		});
+
+		it('should show the options on mouse click', function () {
+			TestUtils.Simulate.mouseDown(React.findDOMNode(instance).querySelector('.Select-control'));
+			var node = React.findDOMNode(instance);
+			expect(node, 'queried for', '.Select-option', 'to have length', 3);
+		});
+
+		it('should display the labels on mouse click', function () {
+			TestUtils.Simulate.mouseDown(React.findDOMNode(instance).querySelector('.Select-control'));
+			var node = React.findDOMNode(instance);
+			expect(node, 'queried for', '.Select-option:nth-child(2)', 'to have items satisfying', 'to have text', 'One');
+			expect(node, 'queried for', '.Select-option:nth-child(3)', 'to have items satisfying', 'to have text', 'Two');
+			expect(node, 'queried for', '.Select-option:nth-child(5)', 'to have items satisfying', 'to have text', 'Three');
+		});
+
+		it('should filter after entering some text', function () {
+
+			typeSearchText('T');
+			var node = React.findDOMNode(instance);
+			expect(node, 'queried for', '.Select-option:nth-child(2)', 'to have items satisfying', 'to have text', 'Two');
+			expect(node, 'queried for', '.Select-option:nth-child(4)', 'to have items satisfying', 'to have text', 'Three');
+			expect(node, 'queried for', '.Select-option', 'to have length', 2);
+		});
+
+		it('should pass input value when entering text', function () {
+			typeSearchText('a');
+			enterSingleCharacter('a');
+			expect(onInputChange, 'was called with', 'a');
+		});
+
+		it('should filter case insensitively', function () {
+
+			typeSearchText('t');
+			var node = React.findDOMNode(instance);
+			expect(node, 'queried for', '.Select-option:nth-child(2)', 'to have items satisfying', 'to have text', 'Two');
+			expect(node, 'queried for', '.Select-option:nth-child(4)', 'to have items satisfying', 'to have text', 'Three');
+			expect(node, 'queried for', '.Select-option', 'to have length', 2);
+		});
+
+		it('should filter using "contains"', function () {
+
+			// Search 'h', should only show 'Three'
+			typeSearchText('h');
+			var node = React.findDOMNode(instance);
+			expect(node, 'queried for', '.Select-option:nth-child(4)', 'to have items satisfying', 'to have text', 'Three');
+			expect(node, 'queried for', '.Select-option', 'to have length', 1);
+		});
+
+		it('should accept when enter is pressed', function () {
+
+			// Search 'h', should only show 'Three'
+			typeSearchText('h');
+			pressEnterToAccept();
+			expect(onChange, 'was called with', 'three');
+		});
+
+		it('should accept when tab is pressed', function () {
+
+			// Search 'h', should only show 'Three'
+			typeSearchText('h');
+			pressTabToAccept();
+			expect(onChange, 'was called with', 'three');
+		});
+
+		describe('pressing escape', function () {
+			beforeEach(function () {
+				typeSearchText('h');
+				pressTabToAccept();
+				expect(onChange, 'was called with', 'three');
+				onChange.reset();
+				pressEscape();
+			});
+
+			it('should call onChange with a empty value', function () {
+
+				// TODO: Shouldn't this be null, really?
+				expect(onChange, 'was called with', '');
+			});
+
+			it('should clear the display', function () {
+
+				expect(React.findDOMNode(instance).querySelector(DISPLAYED_SELECTION_SELECTOR),
+					'to have text', 'Select...');
+			});
+		});
+
+		it('should focus the first value on mouse click', function () {
+
+			TestUtils.Simulate.mouseDown(React.findDOMNode(instance).querySelector('.Select-control'));
+			expect(React.findDOMNode(instance), 'queried for', '.Select-option.is-focused',
+				'to have items satisfying',
+				'to have text', 'One');
+		});
+
+		it('should move the focused value to the second value when down pressed', function () {
+
+			var selectControl = getSelectControl(instance);
+			TestUtils.Simulate.mouseDown(selectControl);
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 40, key: 'ArrowDown' });
+			expect(React.findDOMNode(instance), 'queried for', '.Select-option.is-focused',
+				'to have items satisfying',
+				'to have text', 'Two');
+		});
+
+		it('should move the focused value to the second value when down pressed', function () {
+
+			var selectControl = getSelectControl(instance);
+			TestUtils.Simulate.mouseDown(selectControl);
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 40, key: 'ArrowDown' });
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 40, key: 'ArrowDown' });
+			expect(React.findDOMNode(instance), 'queried for', '.Select-option.is-focused',
+				'to have items satisfying',
+				'to have text', 'Three');
+		});
+
+		it('should loop round to top item when down is pressed on the last item', function () {
+
+			var selectControl = getSelectControl(instance);
+			TestUtils.Simulate.mouseDown(selectControl);
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 40, key: 'ArrowDown' });
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 40, key: 'ArrowDown' });
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 40, key: 'ArrowDown' });
+			expect(React.findDOMNode(instance), 'queried for', '.Select-option.is-focused',
+				'to have items satisfying',
+				'to have text', 'One');
+		});
+
+		it('should loop round to bottom item when up is pressed on the first item', function () {
+
+			var selectControl = getSelectControl(instance);
+			TestUtils.Simulate.mouseDown(selectControl);
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 38, key: 'ArrowUp' });
+			expect(React.findDOMNode(instance), 'queried for', '.Select-option.is-focused',
+				'to have items satisfying',
+				'to have text', 'Three');
+		});
+
+		it('should move the focused value to the second item when up pressed twice', function () {
+
+			var selectControl = getSelectControl(instance);
+			TestUtils.Simulate.mouseDown(selectControl);
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 38, key: 'ArrowUp' });
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 38, key: 'ArrowUp' });
+			expect(React.findDOMNode(instance), 'queried for', '.Select-option.is-focused',
+				'to have items satisfying',
+				'to have text', 'Two');
+		});
+
+		it('should clear the selection on escape', function () {
+
+			var selectControl = getSelectControl(instance);
+			TestUtils.Simulate.mouseDown(selectControl);
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 27, key: 'Escape' });
+			expect(React.findDOMNode(instance), 'to contain no elements matching', '.Select-option');
+
+		});
+
+		it('should open the options on arrow down with the top option focused, when the options are closed', function () {
+
+			var selectControl = getSelectControl(instance);
+			var domNode = React.findDOMNode(instance);
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 38, key: 'ArrowDown' });
+			expect(domNode, 'queried for', '.Select-option.is-focused',
+				'to have items satisfying',
+				'to have text', 'One');
+		});
+
+		it('should open the options on arrow up with the top option focused, when the options are closed', function () {
+
+			var selectControl = getSelectControl(instance);
+			var domNode = React.findDOMNode(instance);
+			TestUtils.Simulate.keyDown(selectControl, { keyCode: 40, key: 'ArrowDown' });
+			expect(domNode, 'queried for', '.Select-option.is-focused',
+				'to have items satisfying',
+				'to have text', 'One');
+		});
+
+		it('should close the options one the second click on the arrow', function () {
+			var selectArrow = React.findDOMNode(instance).querySelector('.Select-arrow');
+			TestUtils.Simulate.mouseDown(selectArrow);
+			expect(React.findDOMNode(instance).querySelectorAll('.Select-option'), 'to have length', 3);
+
+			TestUtils.Simulate.mouseDown(selectArrow);
+			expect(React.findDOMNode(instance), 'to contain no elements matching', '.Select-option');
+		});
+
+		it('should ignore a right mouse click on the arrow', function () {
+			var selectArrow = React.findDOMNode(instance).querySelector('.Select-arrow');
+			TestUtils.Simulate.mouseDown(selectArrow, { type: 'mousedown', button: 1 });
+			expect(React.findDOMNode(instance), 'to contain no elements matching', '.Select-option');
+		});
+
+
+		describe('after mouseEnter and leave of an option', function () {
+
+			beforeEach(function () {
+
+				// Show the options
+				var selectControl = getSelectControl(instance);
+				TestUtils.Simulate.keyDown(selectControl, { keyCode: 40, key: 'ArrowDown' });
+
+				var optionTwo = React.findDOMNode(instance).querySelectorAll('.Select-option')[1];
+				TestUtils.SimulateNative.mouseOver(optionTwo);
+				TestUtils.SimulateNative.mouseOut(optionTwo);
+			});
+
+			it('should have no focused options', function () {
+
+				var domNode = React.findDOMNode(instance);
+				expect(domNode, 'to contain no elements matching', '.Select-option.is-focused');
+			});
+
+			it('should focus top option after down arrow pressed', function () {
+
+				var selectControl = getSelectControl(instance);
+				TestUtils.Simulate.keyDown(selectControl, { keyCode: 40, key: 'ArrowDown' });
+				var domNode = React.findDOMNode(instance);
+				expect(domNode, 'queried for', '.Select-option.is-focused',
+					'to have items satisfying',
+					'to have text', 'One');
+
+			});
+
+			it('should focus last option after up arrow pressed', function () {
+
+				var selectControl = getSelectControl(instance);
+				TestUtils.Simulate.keyDown(selectControl, { keyCode: 38, key: 'ArrowUp' });
+				var domNode = React.findDOMNode(instance);
+				expect(domNode, 'queried for', '.Select-option.is-focused',
+					'to have items satisfying',
+					'to have text', 'Three');
+			});
+
+		});
+
+	});
+
 	describe('with values as numbers', function () {
 
 		beforeEach(function () {
@@ -916,7 +1192,7 @@ describe('Select', function() {
 			pressEnterToAccept();
 			expect(onChange, 'was not called');
 			// And the menu is still open
-			expect(React.findDOMNode(instance), 'to contain no elements matching', DISPLAYED_SELECTION_SELECTOR)
+			expect(React.findDOMNode(instance), 'to contain no elements matching', DISPLAYED_SELECTION_SELECTOR);
 			expect(React.findDOMNode(instance), 'queried for' , '.Select-option',
 				'to satisfy', [
 					expect.it('to have text', 'Two')
@@ -929,7 +1205,7 @@ describe('Select', function() {
 			pressEnterToAccept();
 			expect(onChange, 'was not called');
 			// And the menu is still open
-			expect(React.findDOMNode(instance), 'to contain no elements matching', DISPLAYED_SELECTION_SELECTOR)
+			expect(React.findDOMNode(instance), 'to contain no elements matching', DISPLAYED_SELECTION_SELECTOR);
 			expect(React.findDOMNode(instance), 'queried for' , '.Select-option',
 				'to satisfy', [
 					expect.it('to have text', 'Two')
@@ -942,7 +1218,7 @@ describe('Select', function() {
 			pressEnterToAccept();
 			expect(onChange, 'was not called');
 			// And the menu is still open
-			expect(React.findDOMNode(instance), 'to contain no elements matching', DISPLAYED_SELECTION_SELECTOR)
+			expect(React.findDOMNode(instance), 'to contain no elements matching', DISPLAYED_SELECTION_SELECTOR);
 			expect(React.findDOMNode(instance), 'queried for' , '.Select-option',
 				'to satisfy', [
 					expect.it('to have text', 'Two')
@@ -1680,6 +1956,1230 @@ describe('Select', function() {
 
 	});
 
+	describe('with values as numbers and categorized', function () {
+
+		beforeEach(function () {
+
+			options = {
+				categoryOne: [
+					{ value: 0, label: 'Zero' },
+					{ value: 1, label: 'One' }
+				],
+				categoryTwo: [
+					{ value: 2, label: 'Two' },
+					{ value: 3, label: 'Three' }
+				]
+			};
+
+			wrapper = createControlWithWrapper({
+				value: 2,
+				options: options,
+				searchable: true,
+				categorized: true
+			});
+		});
+
+		it('selects the initial value', function () {
+
+			expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+				'to have text', 'Two');
+		});
+
+		it('set the initial value of the hidden input control', function () {
+
+			expect(React.findDOMNode(wrapper).querySelector(FORM_VALUE).value, 'to equal', '2' );
+		});
+
+		it('updates the value when the value prop is set', function () {
+
+			wrapper.setPropsForChild({ value: 3 });
+			expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+				'to have text', 'Three');
+		});
+
+		it('updates the value of the hidden input control after new value prop', function () {
+
+			wrapper.setPropsForChild({ value: 3 });
+			expect(React.findDOMNode(wrapper).querySelector(FORM_VALUE).value, 'to equal', '3' );
+		});
+
+		it('calls onChange with the new value as a number', function () {
+
+			clickArrowToOpen();
+			pressDown();
+			pressEnterToAccept();
+			expect(onChange, 'was called with', 3, [ { value: 3, label: 'Three' }]);
+		});
+
+		it('supports setting the value to 0 via prop', function () {
+
+			wrapper.setPropsForChild({ value: 0 });
+			expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+				'to have text', 'Zero');
+		});
+
+		it('supports selecting the zero value', function () {
+
+			clickArrowToOpen();
+			pressUp();
+			pressUp();
+			pressEnterToAccept();
+			expect(onChange, 'was called with', 0, [ { value: 0, label: 'Zero' }]);
+		});
+
+		describe('with multi=true', function () {
+
+			beforeEach(function () {
+
+				options = {
+					'Category One': [
+						{ value: 0, label: 'Zero' },
+						{ value: 1, label: 'One' }
+					],
+					'Category Two': [
+						{ value: 2, label: 'Two' },
+						{ value: 3, label: 'Three' },
+						{ value: 4, label: 'Four' }
+					]
+				};
+
+				wrapper = createControlWithWrapper({
+					value: '2,1',
+					options: options,
+					multi: true,
+					searchable: true,
+					categorized: true
+				});
+			});
+
+			it('selects the initial value', function () {
+
+				expect(React.findDOMNode(instance), 'queried for', '.Select-item .Select-item-label',
+					'to satisfy', [
+						expect.it('to have text', 'Two'),
+						expect.it('to have text', 'One')
+					]);
+			});
+
+			it('calls onChange with the correct value when 1 option is selected', function () {
+
+				var removeIcons = React.findDOMNode(instance).querySelectorAll('.Select-item .Select-item-icon');
+				TestUtils.Simulate.click(removeIcons[0]);
+				// For multi-select, the 'value" (first arg) to onChange is always a string
+				expect(onChange, 'was called with', '1', [{ value: 1, label: 'One' }]);
+			});
+
+			it('supports updating the values via props', function () {
+
+				wrapper.setPropsForChild({
+					value: '3,4'
+				});
+
+				expect(React.findDOMNode(instance), 'queried for', '.Select-item .Select-item-label',
+					'to satisfy', [
+						expect.it('to have text', 'Three'),
+						expect.it('to have text', 'Four')
+					]);
+			});
+
+			it('supports updating the value to 0', function () {
+
+				// This test is specifically in case there's a "if (value) {... " somewhere
+				wrapper.setPropsForChild({
+					value: 0
+				});
+
+				expect(React.findDOMNode(instance), 'queried for', '.Select-item .Select-item-label',
+					'to satisfy', [
+						expect.it('to have text', 'Zero')
+					]);
+			});
+
+			it('calls onChange with the correct values when multiple options are selected', function () {
+
+				typeSearchText('fo');
+				pressEnterToAccept(); // Select 'Four'
+
+				expect(onChange, 'was called with', '2,1,4', [
+					{ value: 2, label: 'Two' },
+					{ value: 1, label: 'One' },
+					{ value: 4, label: 'Four' }
+				]);
+			});
+		});
+
+		describe('searching', function () {
+
+			let searchOptions = [
+				{ value: 1, label: 'One' },
+				{ value: 2, label: 'Two' },
+				{ value: 10, label: 'Ten' },
+				{ value: 20, label: 'Twenty' },
+				{ value: 21, label: 'Twenty-one' },
+				{ value: 34, label: 'Thirty-four' },
+				{ value: 54, label: 'Fifty-four' }
+			];
+
+			describe('with matchPos=any and matchProp=any', function () {
+				beforeEach(function () {
+					instance = createControl({
+						matchPos: 'any',
+						matchProp: 'any',
+						options: searchOptions
+					});
+				});
+
+				it('finds text anywhere in value', function () {
+
+					typeSearchText('1');
+					expect(React.findDOMNode(instance), 'queried for', '.Select-option',
+					'to satisfy', [
+							expect.it('to have text', 'One'),
+							expect.it('to have text', 'Ten'),
+							expect.it('to have text', 'Twenty-one')
+						]);
+				});
+
+				it('finds text at end', function () {
+
+					typeSearchText('4');
+					expect(React.findDOMNode(instance), 'queried for', '.Select-option',
+						'to satisfy', [
+							expect.it('to have text', 'Thirty-four'),
+							expect.it('to have text', 'Fifty-four')
+						]);
+				});
+			});
+
+			describe('with matchPos=start and matchProp=any', function () {
+
+				beforeEach(function () {
+					instance = createControl({
+						matchPos: 'start',
+						matchProp: 'any',
+						options: searchOptions
+					});
+				});
+
+				it('finds text at the start of the value', function () {
+
+					typeSearchText('1');
+					expect(React.findDOMNode(instance), 'queried for', '.Select-option',
+						'to satisfy', [
+							expect.it('to have text', 'One'),
+							expect.it('to have text', 'Ten')
+						]);
+				});
+
+				it('does not match text at end', function () {
+
+					typeSearchText('4');
+					expect(React.findDOMNode(instance), 'to contain elements matching',
+						'.Select-noresults');
+					expect(React.findDOMNode(instance), 'to contain no elements matching',
+						'.Select-option');
+				});
+			});
+
+			describe('with matchPos=any and matchProp=value', function () {
+				beforeEach(function () {
+					instance = createControl({
+						matchPos: 'any',
+						matchProp: 'value',
+						options: searchOptions
+					});
+				});
+
+				it('finds text anywhere in value', function () {
+
+					typeSearchText('1');
+					expect(React.findDOMNode(instance), 'queried for', '.Select-option',
+						'to satisfy', [
+							expect.it('to have text', 'One'),
+							expect.it('to have text', 'Ten'),
+							expect.it('to have text', 'Twenty-one')
+						]);
+				});
+
+				it('finds text at end', function () {
+
+					typeSearchText('4');
+					expect(React.findDOMNode(instance), 'queried for', '.Select-option',
+						'to satisfy', [
+							expect.it('to have text', 'Thirty-four'),
+							expect.it('to have text', 'Fifty-four')
+						]);
+				});
+			});
+
+			describe('with matchPos=start and matchProp=value', function () {
+
+				beforeEach(function () {
+					instance = createControl({
+						matchPos: 'start',
+						matchProp: 'value',
+						options: searchOptions
+					});
+				});
+
+				it('finds text at the start of the value', function () {
+
+					typeSearchText('1');
+					expect(React.findDOMNode(instance), 'queried for', '.Select-option',
+						'to satisfy', [
+							expect.it('to have text', 'One'),
+							expect.it('to have text', 'Ten')
+						]);
+				});
+
+				it('does not match text at end', function () {
+
+					typeSearchText('4');
+					expect(React.findDOMNode(instance), 'to contain elements matching',
+						'.Select-noresults');
+					expect(React.findDOMNode(instance), 'to contain no elements matching',
+						'.Select-option');
+				});
+			});
+		});
+	});
+
+	describe('with categorized options and value', function () {
+		beforeEach(function () {
+
+			options = {
+				'Category One': [
+					{ value: 'one', label: 'One' },
+					{ value: 'two', label: 'Two' }
+				],
+				'Category Two': [
+					{ value: 'three', label: 'Three' }
+				]
+			};
+
+			// Render an instance of the component
+			wrapper = createControlWithWrapper({
+				value: 'one',
+				options: options,
+				searchable: true,
+				categorized: true
+			});
+		});
+
+		it('starts with the given value', function () {
+
+			var node = React.findDOMNode(instance);
+			expect(node, 'queried for', DISPLAYED_SELECTION_SELECTOR,
+				'to have items satisfying', 'to have text', 'One');
+		});
+
+		it('supports setting the value via prop', function () {
+
+			wrapper.setPropsForChild({
+				value: 'three'
+			});
+
+			expect(React.findDOMNode(instance), 'queried for', DISPLAYED_SELECTION_SELECTOR,
+				'to have items satisfying', 'to have text', 'Three');
+		});
+
+		it('sets the value of the hidden form node', function () {
+
+			wrapper.setPropsForChild({
+				value: 'three'
+			});
+
+			expect(React.findDOMNode(wrapper).querySelector(FORM_VALUE).value, 'to equal', 'three' );
+		});
+
+		it('display the raw value if the option is not available', function () {
+
+			wrapper.setPropsForChild({
+				value: 'something new'
+			});
+
+			expect(React.findDOMNode(instance), 'queried for', DISPLAYED_SELECTION_SELECTOR,
+				'to have items satisfying', 'to have text', 'something new');
+		});
+
+		it('updates the display text if the option appears later', function () {
+
+			wrapper.setPropsForChild({
+				value: 'new'
+			});
+
+			wrapper.setPropsForChild({
+				options: {
+					'Category One': [
+						{ value: 'one', label: 'One' },
+						{ value: 'two', label: 'Two' }
+					],
+					'Category Two': [
+						{ value: 'new', label: 'New item in the options' },
+						{ value: 'three', label: 'Three' }
+					]
+				}
+			});
+
+			expect(React.findDOMNode(instance), 'queried for', DISPLAYED_SELECTION_SELECTOR,
+				'to have items satisfying', 'to have text', 'New item in the options');
+
+		});
+	});
+
+	describe('with a disabled option in a category', function () {
+
+		beforeEach(function () {
+
+			options = {
+				'Category One': [
+					{ value: 'one', label: 'One' },
+					{ value: 'two', label: 'Two', disabled: true }
+				],
+				'Category Two': [
+					{ value: 'three', label: 'Three' }
+				]
+			};
+
+			wrapper = createControlWithWrapper({
+				options: options,
+				searchable: true,
+				categorized: true
+			});
+		});
+
+		it('adds the is-disabled class to the disabled option', function () {
+
+			clickArrowToOpen();
+			expect(React.findDOMNode(instance).querySelectorAll('.Select-option')[1],
+				'to have attributes', {
+					class: 'is-disabled'
+	       });
+		});
+
+		it('is not selectable by clicking', function () {
+
+			clickArrowToOpen();
+			TestUtils.Simulate.mouseDown(React.findDOMNode(instance).querySelectorAll('.Select-option')[1]);
+
+			expect(onChange, 'was not called');
+			expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+				'to have text', 'Select...');
+		});
+
+		it('is not selectable by keyboard', function () {
+
+			clickArrowToOpen();
+			// Press down to get to the second option
+			TestUtils.Simulate.keyDown(getSelectControl(instance), { keyCode: 40, key: 'ArrowDown' });
+			// Check the disable option is not focused
+			expect(React.findDOMNode(instance), 'to contain no elements matching', '.Select-option.is-disabled.is-focused');
+		});
+
+		it('jumps over the disabled option', function () {
+
+			clickArrowToOpen();
+			// Press down to get to the second option
+			TestUtils.Simulate.keyDown(getSelectControl(instance), { keyCode: 40, key: 'ArrowDown' });
+			// Check the focused option is the one after the disabled option
+			expect(React.findDOMNode(instance), 'queried for first', '.Select-option.is-focused',
+				'to have text', 'Three');
+		});
+
+		it('jumps back to beginning when disabled option is last option', function () {
+
+			wrapper = createControlWithWrapper({
+				options: {
+					'Category One': [
+						{ value: 'one', label: 'One' },
+						{ value: 'two', label: 'Two' }
+					],
+					'Category Two': [
+						{ value: 'three', label: 'Three', disabled: true }
+					]
+				},
+				categorized: true
+			});
+
+			clickArrowToOpen();
+			// Down twice
+			TestUtils.Simulate.keyDown(getSelectControl(instance), { keyCode: 40, key: 'ArrowDown' });
+			TestUtils.Simulate.keyDown(getSelectControl(instance), { keyCode: 40, key: 'ArrowDown' });
+
+			// Selected option should be back to 'One'
+			expect(React.findDOMNode(instance), 'queried for first', '.Select-option.is-focused',
+				'to have text', 'One');
+		});
+
+		it('skips over last option when looping round when last option is disabled', function () {
+
+			wrapper = createControlWithWrapper({
+				options: {
+					'Category One': [
+						{ value: 'one', label: 'One' },
+						{ value: 'two', label: 'Two' }
+					],
+					'Category Two': [
+						{ value: 'three', label: 'Three', disabled: true }
+					]
+				},
+				categorized: true
+			});
+
+			clickArrowToOpen();
+			// Press up, should skip the bottom entry 'Three'...
+			TestUtils.Simulate.keyDown(getSelectControl(instance), { keyCode: 38, key: 'ArrowUp' });
+
+			// ... and land on 'Two'
+			expect(React.findDOMNode(instance), 'queried for first', '.Select-option.is-focused',
+				'to have text', 'Two');
+		});
+
+		it('focuses initially on the second option when the first is disabled', function () {
+
+			wrapper = createControlWithWrapper({
+				options: {
+					'Category One': [
+						{ value: 'one', label: 'One', disabled: true },
+						{ value: 'two', label: 'Two' }
+					],
+					'Category Two': [
+						{ value: 'three', label: 'Three' }
+					]
+				},
+				categorized: true
+			});
+
+			clickArrowToOpen();
+			expect(React.findDOMNode(instance), 'queried for first', '.Select-option.is-focused',
+				'to have text', 'Two');
+		});
+
+		it('doesn\'t focus anything when all options are disabled', function () {
+
+			wrapper = createControlWithWrapper({
+				options: {
+					'Category One': [
+						{ value: 'one', label: 'One', disabled: true },
+						{ value: 'two', label: 'Two', disabled: true }
+					],
+					'Category Two': [
+						{ value: 'three', label: 'Three', disabled: true }
+					]
+				},
+				categorized: true
+			});
+
+			clickArrowToOpen();
+
+			TestUtils.Simulate.keyDown(getSelectControl(instance), { keyCode: 40, key: 'ArrowDown' });
+			expect(React.findDOMNode(instance), 'to contain no elements matching', '.Select-option.is-focused');
+		});
+
+		it('doesn\'t select anything when all options are disabled and enter is pressed', function () {
+
+			wrapper = createControlWithWrapper({
+				options: {
+					'Category One': [
+						{ value: 'one', label: 'One', disabled: true },
+						{ value: 'two', label: 'Two', disabled: true }
+					],
+					'Category Two': [
+						{ value: 'three', label: 'Three', disabled: true }
+					]
+				},
+				categorized: true
+			});
+
+			clickArrowToOpen();
+
+			TestUtils.Simulate.keyDown(getSelectControl(instance), { keyCode: 13, key: 'Enter' });
+			expect(onChange, 'was not called');
+			expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+				'to have text', 'Select...');
+		});
+
+		it("doesn't select anything when a disabled option is the only item in the list after a search", function () {
+
+			typeSearchText('tw'); // Only 'two' in the list
+			pressEnterToAccept();
+			expect(onChange, 'was not called');
+			// And the menu is still open
+			expect(React.findDOMNode(instance), 'to contain no elements matching', DISPLAYED_SELECTION_SELECTOR);
+			expect(React.findDOMNode(instance), 'queried for' , '.Select-option',
+				'to satisfy', [
+					expect.it('to have text', 'Two')
+				]);
+		});
+
+		it("doesn't select anything when a disabled option value matches the entered text", function () {
+
+			typeSearchText('two');  // Matches value
+			pressEnterToAccept();
+			expect(onChange, 'was not called');
+			// And the menu is still open
+			expect(React.findDOMNode(instance), 'to contain no elements matching', DISPLAYED_SELECTION_SELECTOR);
+			expect(React.findDOMNode(instance), 'queried for' , '.Select-option',
+				'to satisfy', [
+					expect.it('to have text', 'Two')
+				]);
+		});
+
+		it("doesn't select anything when a disabled option label matches the entered text", function () {
+
+			typeSearchText('Two');  // Matches label
+			pressEnterToAccept();
+			expect(onChange, 'was not called');
+			// And the menu is still open
+			expect(React.findDOMNode(instance), 'to contain no elements matching', DISPLAYED_SELECTION_SELECTOR);
+			expect(React.findDOMNode(instance), 'queried for' , '.Select-option',
+				'to satisfy', [
+					expect.it('to have text', 'Two')
+				]);
+		});
+
+		it('shows disabled results in a search', function () {
+
+			typeSearchText('t');
+			var options = React.findDOMNode(instance).querySelectorAll('.Select-option');
+			expect(options[0], 'to have text', 'Two');
+			expect(options[0], 'to have attributes', {
+				class: 'is-disabled'
+			});
+			expect(options[1], 'to have text', 'Three');
+		});
+
+		it('is does not close menu when disabled option is clicked', function () {
+
+			clickArrowToOpen();
+			TestUtils.Simulate.mouseDown(React.findDOMNode(instance).querySelectorAll('.Select-option')[1]);
+
+			var options = React.findDOMNode(instance).querySelectorAll('.Select-option');
+			expect(options.length, 'to equal', 3);
+		});
+	});
+
+	describe('with styled options and categories', function () {
+
+		beforeEach(function () {
+
+			options = {
+				'Category One': [
+					{ value: 'one', label: 'One', className: 'extra-one', title: 'Eins' },
+					{ value: 'two', label: 'Two', className: 'extra-two', title: 'Zwei' }
+				],
+				'Category Two': [
+					{ value: 'three', label: 'Three', style: { fontSize: 25 } }
+				]
+			};
+
+			wrapper = createControlWithWrapper({
+				options: options,
+				categorized: true
+			});
+		});
+
+		it('uses the given className for an option', function () {
+
+			clickArrowToOpen();
+			expect(React.findDOMNode(instance).querySelectorAll('.Select-option')[0], 'to have attributes',
+				{
+					class: 'extra-one'
+				});
+		});
+
+		it('uses the given style for an option', function () {
+
+			clickArrowToOpen();
+			expect(React.findDOMNode(instance).querySelectorAll('.Select-option')[2], 'to have attributes',
+				{
+					style: { 'font-size': '25px' }
+				});
+		});
+
+		it('uses the given title for an option', function () {
+
+			clickArrowToOpen();
+			expect(React.findDOMNode(instance).querySelectorAll('.Select-option')[1], 'to have attributes',
+				{
+					title: 'Zwei'
+				});
+		});
+
+		it('uses the given className for a single selection', function () {
+
+			typeSearchText('tw');
+			pressEnterToAccept();
+			expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+				'to have attributes', {
+					class: 'extra-two'
+				});
+		});
+
+		it('uses the given style for a single selection', function () {
+
+			typeSearchText('th');
+			pressEnterToAccept();
+			expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+				'to have attributes', {
+					style: {
+						'font-size': '25px'
+					}
+				});
+		});
+
+		it('uses the given title for a single selection', function () {
+
+			typeSearchText('tw');
+			pressEnterToAccept();
+			expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+				'to have attributes', {
+					title: 'Zwei'
+				});
+		});
+
+		describe('with multi', function () {
+
+			beforeEach(function () {
+
+				wrapper.setPropsForChild({ multi: true, categorized: true });
+			});
+
+
+			it('uses the given className for a selected value', function () {
+
+				typeSearchText('tw');
+				pressEnterToAccept();
+				expect(React.findDOMNode(instance), 'queried for first', '.Select-item',
+					'to have attributes', {
+						class: 'extra-two'
+					});
+			});
+
+			it('uses the given style for a selected value', function () {
+
+				typeSearchText('th');
+				pressEnterToAccept();
+				expect(React.findDOMNode(instance), 'queried for first', '.Select-item',
+					'to have attributes', {
+						style: {
+							'font-size': '25px'
+						}
+					});
+			});
+
+			it('uses the given title for a selected value', function () {
+
+				typeSearchText('tw');
+				pressEnterToAccept();
+				expect(React.findDOMNode(instance), 'queried for first', '.Select-item',
+					'to have attributes', {
+						title: 'Zwei'
+					});
+			});
+
+		});
+
+	});
+
+	describe('with categories and async options', function () {
+
+		var asyncOptions;
+
+		beforeEach(function () {
+
+			asyncOptions = sinon.stub();
+
+			asyncOptions.withArgs('te').callsArgWith(1, null, {
+				options: {
+					'Category One': [
+						{ value: 'test', label: 'TEST one' },
+						{ value: 'test2', label: 'TEST two' }
+					],
+					'Category Two': [
+						{ value: 'tell', label: 'TELL three' }
+					]
+				}
+			});
+
+			asyncOptions.withArgs('tes').callsArgWith(1, null, {
+				options: {
+					'Category One': [
+						{ value: 'test', label: 'TEST one' },
+						{ value: 'test2', label: 'TEST two' }
+					],
+					'Category Two': []
+				}
+			});
+
+
+		});
+
+		describe('with autoload=true', function () {
+
+			beforeEach(function () {
+
+				// Render an instance of the component
+				wrapper = createControlWithWrapper({
+					value: '',
+					asyncOptions: asyncOptions,
+					autoload: true,
+					categorized: true
+				});
+			});
+
+
+			it('calls the asyncOptions initially with autoload=true', function () {
+
+				expect(asyncOptions, 'was called with', '');
+			});
+
+			it('calls the asyncOptions again when the input changes', function () {
+
+				typeSearchText('ab');
+
+				expect(asyncOptions, 'was called twice');
+				expect(asyncOptions, 'was called with', 'ab');
+			});
+
+			it('shows the returned options after asyncOptions calls back', function () {
+
+				typeSearchText('te');
+
+				var optionList = React.findDOMNode(instance).querySelectorAll('.Select-menu .Select-option');
+				expect(optionList, 'to have length', 3);
+				expect(optionList[0], 'to have text', 'TEST one');
+				expect(optionList[1], 'to have text', 'TEST two');
+				expect(optionList[2], 'to have text', 'TELL three');
+			});
+
+			it('uses the options cache when the same text is entered again', function () {
+
+				typeSearchText('te');
+				typeSearchText('tes');
+
+				expect(asyncOptions, 'was called times', 3);
+
+				typeSearchText('te');
+
+				expect(asyncOptions, 'was called times', 3);
+
+			});
+
+			it('displays the correct options from the cache after the input is changed back to a previous value', function () {
+
+				typeSearchText('te');
+				typeSearchText('tes');
+				typeSearchText('te');
+				// Double check the options list is still correct
+				var optionList = React.findDOMNode(instance).querySelectorAll('.Select-menu .Select-option');
+				expect(optionList, 'to have length', 3);
+				expect(optionList[0], 'to have text', 'TEST one');
+				expect(optionList[1], 'to have text', 'TEST two');
+				expect(optionList[2], 'to have text', 'TELL three');
+			});
+
+			it('re-filters an existing options list if complete:true is provided', function () {
+
+				asyncOptions.withArgs('te').callsArgWith(1, null, {
+					options: {
+						'Category One': [
+							{ value: 'test', label: 'TEST one' },
+							{ value: 'test2', label: 'TEST two' }
+						],
+						'Category Two': [
+							{ value: 'tell', label: 'TELL three' }
+						]
+					},
+					complete: true
+				});
+
+				typeSearchText('te');
+				expect(asyncOptions, 'was called times', 2);
+				typeSearchText('tel');
+				expect(asyncOptions, 'was called times', 2);
+				var optionList = React.findDOMNode(instance).querySelectorAll('.Select-menu .Select-option');
+				expect(optionList, 'to have length', 1);
+				expect(optionList[0], 'to have text', 'TELL three');
+			});
+
+			it('rethrows the error if err is set in the callback', function () {
+
+				asyncOptions.withArgs('tes').callsArgWith(1, new Error('Something\'s wrong jim'), {
+					options: {
+						'Category One': [
+							{ value: 'test', label: 'TEST one' },
+							{ value: 'test2', label: 'TEST two' }
+						],
+						'Category Two': []
+					}
+				});
+
+				expect(function () {
+					typeSearchText('tes');
+				}, 'to throw exception', new Error('Something\'s wrong jim'));
+			});
+
+			it('calls the asyncOptions function when the value prop changes', function () {
+
+				expect(asyncOptions, 'was called once');
+
+				wrapper.setPropsForChild({ value: 'test2' });
+
+				expect(asyncOptions, 'was called twice');
+			});
+
+
+		});
+
+		describe('with autoload=false', function () {
+
+			beforeEach(function () {
+
+				// Render an instance of the component
+				instance = createControl({
+					value: '',
+					asyncOptions: asyncOptions,
+					autoload: false,
+					categorized: true
+				});
+			});
+
+			it('does not initially call asyncOptions', function () {
+
+				expect(asyncOptions, 'was not called');
+			});
+
+			it('calls the asyncOptions on first key entry', function () {
+
+				typeSearchText('a');
+				expect(asyncOptions, 'was called with', 'a');
+			});
+		});
+
+		describe('with cacheAsyncResults=false', function () {
+
+			beforeEach(function () {
+
+				// Render an instance of the component
+				wrapper = createControlWithWrapper({
+					value: '',
+					asyncOptions: asyncOptions,
+					cacheAsyncResults: false,
+					categorized: true
+				});
+
+				// Focus on the input, such that mouse events are accepted
+				searchInputNode = instance.getInputNode().getDOMNode().querySelector('input');
+				TestUtils.Simulate.focus(searchInputNode);
+			});
+
+			it('does not use cache when the same text is entered again', function () {
+
+				typeSearchText('te');
+				typeSearchText('tes');
+
+				expect(asyncOptions, 'was called times', 3);
+
+				typeSearchText('te');
+
+				expect(asyncOptions, 'was called times', 4);
+
+			});
+
+			it('updates the displayed value after changing value and refreshing from asyncOptions', function () {
+
+				asyncOptions.reset();
+				asyncOptions.callsArgWith(1, null, {
+					options: [
+						{ value: 'newValue', label: 'New Value from Server' },
+						{ value: 'test', label: 'TEST one' }
+					]
+				});
+
+				wrapper.setPropsForChild({ value: 'newValue' });
+
+				expect(React.findDOMNode(instance), 'queried for first', DISPLAYED_SELECTION_SELECTOR,
+					'to have text', 'New Value from Server');
+			});
+
+
+		});
+	});
+
+	describe('with multi-select and categories', function () {
+
+		beforeEach(function () {
+
+			options = {
+				'Category One': [
+					{ value: 'one', label: 'One' },
+					{ value: 'two', label: 'Two' }
+				],
+				'Category Two': [
+					{ value: 'three', label: 'Three' },
+					{ value: 'four', label: 'Four' }
+				]
+			};
+
+			// Render an instance of the component
+			wrapper = createControlWithWrapper({
+				value: '',
+				options: options,
+				searchable: true,
+				multi: true,
+				categorized: true
+			});
+		});
+
+		it('selects a single option on enter', function () {
+
+			typeSearchText('fo');
+			pressEnterToAccept();
+			expect(onChange, 'was called with', 'four', [{ label: 'Four', value: 'four' }]);
+		});
+
+		it('selects a second option', function () {
+
+			typeSearchText('fo');
+			pressEnterToAccept();
+			typeSearchText('th');
+			onChange.reset();  // Ignore previous onChange calls
+			pressEnterToAccept();
+			expect(onChange, 'was called with', 'four,three',
+				[{ label: 'Four', value: 'four' }, { label: 'Three', value: 'three' }]);
+		});
+
+		it('displays both selected options', function () {
+
+			typeSearchText('fo');
+			pressEnterToAccept();
+			typeSearchText('th');
+			pressEnterToAccept();
+			expect(React.findDOMNode(instance).querySelectorAll('.Select-item-label')[0],
+				'to have text', 'Four');
+			expect(React.findDOMNode(instance).querySelectorAll('.Select-item-label')[1],
+				'to have text', 'Three');
+		});
+
+		it('filters the existing selections from the options', function () {
+
+			wrapper.setPropsForChild({
+				value: 'four,three'
+			});
+
+			typeSearchText('o');
+
+			var options = React.findDOMNode(instance).querySelectorAll('.Select-option');
+			expect(options[0], 'to have text', 'One');
+			expect(options[1], 'to have text', 'Two');
+			expect(options, 'to have length', 2);  // No "Four", as already selected
+		});
+
+		it('removes the last selected option with backspace', function () {
+
+			typeSearchText('fo');
+			pressEnterToAccept();
+			typeSearchText('th');
+			pressEnterToAccept();
+			onChange.reset();  // Ignore previous onChange calls
+			pressBackspace();
+			expect(onChange, 'was called with', 'four', [{ label: 'Four', value: 'four' }]);
+		});
+
+		it('does not remove the last selected option with backspace when backspaceRemoves=false', function () {
+
+			// Disable backspace
+			wrapper.setPropsForChild({
+				backspaceRemoves: false
+			});
+
+			typeSearchText('fo');
+			pressEnterToAccept();
+			typeSearchText('th');
+			pressEnterToAccept();
+			onChange.reset();  // Ignore previous onChange calls
+
+			pressBackspace();
+
+			expect(onChange, 'was not called');
+			var items = React.findDOMNode(instance).querySelectorAll('.Select-item-label');
+			expect(items[0], 'to have text', 'Four');
+			expect(items[1], 'to have text', 'Three');
+		});
+
+		it('removes an item when clicking on the X', function () {
+
+			typeSearchText('fo');
+			pressEnterToAccept();
+			typeSearchText('th');
+			pressEnterToAccept();
+			typeSearchText('tw');
+			pressEnterToAccept();
+			onChange.reset();  // Ignore previous onChange calls
+
+			var threeDeleteButton = React.findDOMNode(instance).querySelectorAll('.Select-item-icon')[1];
+			TestUtils.Simulate.click(threeDeleteButton);
+
+			expect(onChange, 'was called with', 'four,two', [
+				{ label: 'Four', value: 'four' },
+				{ label: 'Two', value: 'two' }
+			]);
+		});
+
+		describe('with late options', function () {
+
+			beforeEach(function () {
+
+				wrapper = createControlWithWrapper({
+					multi: true,
+					options: options,
+					value: 'one,two',
+					categorized: true
+				});
+			});
+
+			it('updates the label when the options are updated', function () {
+
+				wrapper.setPropsForChild({
+					options: {
+						'Category One': [
+							{ value: 'one', label: 'new label for One' },
+							{ value: 'two', label: 'new label for Two' }
+						],
+						'Category Two': [
+							{ value: 'three', label: 'new label for Three' }
+						]
+					}
+				});
+
+				var items = React.findDOMNode(instance).querySelectorAll('.Select-item');
+
+				expect(items[0], 'queried for', '.Select-item-label',
+					'to have items satisfying',
+					'to have text', 'new label for One');
+
+				expect(items[1], 'queried for', '.Select-item-label',
+					'to have items satisfying',
+					'to have text', 'new label for Two');
+			});
+		});
+
+	});
+
+	describe('with multi=true, searchable=false and categories', function () {
+
+		beforeEach(function () {
+
+			options = {
+				'Category One': [
+					{ value: 'one', label: 'One' },
+					{ value: 'two', label: 'Two' }
+				],
+				'Category Two': [
+					{ value: 'three', label: 'Three' },
+					{ value: 'four', label: 'Four' }
+				]
+			};
+
+			// Render an instance of the component
+			wrapper = createControlWithWrapper({
+				value: '',
+				options: options,
+				searchable: false,
+				multi: true,
+				categorized: true
+			});
+
+			// We need a hack here.
+			// JSDOM (at least v3.x) doesn't appear to support div's with tabindex
+			// This just hacks that we are focused
+			// This is (obviously) implementation dependent, and may need to change
+			instance.setState({
+				isFocused: true
+			});
+
+		});
+
+		it('selects multiple options', function () {
+
+			clickArrowToOpen();
+
+			var items = React.findDOMNode(instance).querySelectorAll('.Select-option');
+			TestUtils.Simulate.mouseDown(items[1]);
+			// The menu is now closed, click the arrow to open it again
+			clickArrowToOpen();
+			items = React.findDOMNode(instance).querySelectorAll('.Select-option');
+			TestUtils.Simulate.mouseDown(items[0]);
+
+			var selectedItems = React.findDOMNode(instance).querySelectorAll('.Select-item-label');
+			expect(selectedItems[0], 'to have text', 'Two');
+			expect(selectedItems[1], 'to have text', 'One');
+			expect(selectedItems, 'to have length', 2);
+		});
+
+		it('calls onChange when each option is selected', function () {
+
+			clickArrowToOpen();
+			// First item
+			var items = React.findDOMNode(instance).querySelectorAll('.Select-option');
+			TestUtils.Simulate.mouseDown(items[1]);
+			expect(onChange, 'was called once');
+			expect(onChange, 'was called with', 'two', [{ value: 'two', label: 'Two' }]);
+
+			// Second item
+
+			// The menu is now closed, click the arrow to open it again
+			clickArrowToOpen();
+			items = React.findDOMNode(instance).querySelectorAll('.Select-option');
+			TestUtils.Simulate.mouseDown(items[0]);
+			expect(onChange, 'was called twice');
+		});
+
+		it('removes the selected options from the menu', function () {
+
+			clickArrowToOpen();
+
+			var items = React.findDOMNode(instance).querySelectorAll('.Select-option');
+
+			// Click the option "Two" to select it
+			expect(items[1], 'to have text', 'Two');
+			TestUtils.Simulate.mouseDown(items[1]);
+			expect(onChange, 'was called times', 1);
+
+			// Now get the list again,
+			// The menu is now closed, click the arrow to open it again
+			clickArrowToOpen();
+			items = React.findDOMNode(instance).querySelectorAll('.Select-option');
+			expect(items[0], 'to have text', 'One');
+			expect(items[1], 'to have text', 'Three');
+			expect(items[2], 'to have text', 'Four');
+			expect(items, 'to have length', 3);
+
+			// Click first item, 'One'
+			TestUtils.Simulate.mouseDown(items[0]);
+
+			expect(onChange, 'was called times', 2);
+			// The menu is now closed, click the arrow to open it again
+			clickArrowToOpen();
+			items = React.findDOMNode(instance).querySelectorAll('.Select-option');
+			expect(items[0], 'to have text', 'Three');
+			expect(items[1], 'to have text', 'Four');
+			expect(items, 'to have length', 2);
+
+			// Click second item, 'Four'
+			TestUtils.Simulate.mouseDown(items[1]);
+			expect(onChange, 'was called times', 3);
+
+			// The menu is now closed, click the arrow to open it again
+			clickArrowToOpen();
+			items = React.findDOMNode(instance).querySelectorAll('.Select-option');
+			expect(items[0], 'to have text', 'Three');
+			expect(items, 'to have length', 1);
+		});
+
+	});
+
 	describe('with props', function () {