From bd2b0a99575c612bc4985210da703cccb7659612 Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 12:29:17 -0400
Subject: [PATCH 01/13] basic grouping

---
 examples/src/app.js                           |   2 +
 .../src/components/GroupedOptionsField.js     |  46 +++++++
 src/OptionGroup.js                            |  41 +++++++
 src/Select.js                                 | 113 ++++++++++++------
 4 files changed, 168 insertions(+), 34 deletions(-)
 create mode 100644 examples/src/components/GroupedOptionsField.js
 create mode 100644 src/OptionGroup.js

diff --git a/examples/src/app.js b/examples/src/app.js
index cb06945ba6..79717ef55a 100644
--- a/examples/src/app.js
+++ b/examples/src/app.js
@@ -5,6 +5,7 @@ import Select from 'react-select';
 
 import CustomRenderField from './components/CustomRenderField';
 import MultiSelectField from './components/MultiSelectField';
+import GroupedOptionsField from './components/GroupedOptionsField';
 import RemoteSelectField from './components/RemoteSelectField';
 import SelectedValuesField from './components/SelectedValuesField';
 import StatesField from './components/StatesField';
@@ -40,6 +41,7 @@ React.render(
 		<CustomRenderField label="Custom render options/values" />
 		<CustomRenderField label="Custom render options/values (multi)" multi delimiter="," />
 		<RemoteSelectField label="Remote Options" hint='Type anything in the remote example to asynchronously load options. Valid alternative results are "A", "AA", and "AB"' />
+    <GroupedOptionsField label="Grouping Options" />
 	</div>,
 	document.getElementById('example')
 );
diff --git a/examples/src/components/GroupedOptionsField.js b/examples/src/components/GroupedOptionsField.js
new file mode 100644
index 0000000000..a0f71ca5a1
--- /dev/null
+++ b/examples/src/components/GroupedOptionsField.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import Select from 'react-select';
+
+function logChange() {
+	console.log.apply(console, [].concat(['Select value changed:'], Array.prototype.slice.apply(arguments)));
+}
+
+var ops = [{
+  label: 'Primary Colors',
+  options: [
+    { label: 'Yellow', value: 'yellow' },
+    { label: 'Red', value: 'red' },
+    { label: 'Blue', value: 'blue' }
+  ]
+}, {
+  label: 'Secondary Colors',
+  options: [
+    { label: 'Orange', value: 'orange' },
+    { label: 'Violet', value: 'violet' },
+    { label: 'Green', value: 'green' }
+  ]
+}];
+
+var GroupedOptionsField = React.createClass({
+	displayName: 'GroupedOptionsField',
+	propTypes: {
+		delimiter: React.PropTypes.string,
+		label: React.PropTypes.string,
+		multi: React.PropTypes.bool,
+	},
+
+	render () {
+		return (
+			<div className="section">
+				<h3 className="section-heading">{this.props.label}</h3>
+				<Select
+					placeholder="Select a color"
+					options={ops}
+					onChange={logChange} />
+			</div>
+		);
+	}
+});
+
+module.exports = GroupedOptionsField;
+
diff --git a/src/OptionGroup.js b/src/OptionGroup.js
new file mode 100644
index 0000000000..f60733db53
--- /dev/null
+++ b/src/OptionGroup.js
@@ -0,0 +1,41 @@
+var React = require('react');
+var classes = require('classnames');
+
+var Option = React.createClass({
+	propTypes: {
+		optionGroup: React.PropTypes.shape({
+      label: React.PropTypes.string.isRequired,
+      options: React.PropTypes.array.isRequired,
+    }).isRequired,     // object that is base for that option
+		renderFunc: React.PropTypes.func               // method passed to ReactSelect component to render label text
+	},
+
+	blockEvent: function(event) {
+		event.preventDefault();
+		if ((event.target.tagName !== 'A') || !('href' in event.target)) {
+			return;
+		}
+
+		if (event.target.target) {
+			window.open(event.target.href);
+		} else {
+			window.location.href = event.target.href;
+		}
+	},
+
+	render: function() {
+		var obj = this.props.optionGroup;
+		var renderedLabel = this.props.renderFunc(obj);
+		var optionClasses = classes(this.props.className, obj.className);
+
+		return (
+			<div className={optionClasses}
+				onMouseDown={this.blockEvent}
+				onClick={this.blockEvent}>
+				{renderedLabel}
+			</div>
+		);
+	}
+});
+
+module.exports = Option;
diff --git a/src/Select.js b/src/Select.js
index e1124f7c03..6a406a0975 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -8,9 +8,34 @@ var classes = require('classnames');
 var Value = require('./Value');
 var SingleValue = require('./SingleValue');
 var Option = require('./Option');
+var OptionGroup = require('./OptionGroup');
 
 var requestId = 0;
 
+function defaultLabelRenderer(op) {
+  return op.label;
+}
+
+function flattenOptions(options) {
+  if (!options) {
+    return options;
+  }
+  var flatten = function(flat, opt) {
+    if (Array.isArray(opt.options)) {
+      return flat.concat(
+        opt,
+        opt.options.reduce(flatten, [])
+      );
+    }
+    return flat.concat(opt);
+  };
+  return options.reduce(flatten, []);
+}
+
+function isGroup(op) {
+  return op && Array.isArray(op.options);
+}
+
 var Select = React.createClass({
 
 	displayName: 'Select',
@@ -81,6 +106,7 @@ var Select = React.createClass({
 			onInputChange: undefined,
 			onOptionLabelClick: undefined,
 			optionComponent: Option,
+			optionGroupComponent: OptionGroup,
 			options: undefined,
 			placeholder: 'Select...',
 			searchable: true,
@@ -106,7 +132,7 @@ var Select = React.createClass({
 			isFocused: false,
 			isLoading: false,
 			isOpen: false,
-			options: this.props.options
+			options: flattenOptions(this.props.options)
 		};
 	},
 
@@ -165,9 +191,10 @@ var Select = React.createClass({
 		var optionsChanged = false;
 		if (JSON.stringify(newProps.options) !== JSON.stringify(this.props.options)) {
 			optionsChanged = true;
+      var flatOptions = flattenOptions(newProps.options);
 			this.setState({
-				options: newProps.options,
-				filteredOptions: this.filterOptions(newProps.options)
+				options: flatOptions,
+				filteredOptions: this.filterOptions(flatOptions)
 			});
 		}
 		if (newProps.value !== this.state.value || newProps.placeholder !== this.props.placeholder || optionsChanged) {
@@ -256,9 +283,8 @@ var Select = React.createClass({
 	},
 
 	getFirstFocusableOption: function (options) {
-
 		for (var optionIndex = 0; optionIndex < options.length; ++optionIndex) {
-			if (!options[optionIndex].disabled) {
+			if (!options[optionIndex].disabled && !isGroup(options[optionIndex])) {
 				return options[optionIndex];
 			}
 		}
@@ -677,12 +703,10 @@ var Select = React.createClass({
 
 	buildMenu: 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;
+			focusedValue = focusedValue == null ? this.state.filteredOptions[0].value : focusedValue;
 		}
+    console.log('buildMenu-focusedValue', focusedValue);
 		// Add the current value to the filtered options in last resort
 		var options = this.state.filteredOptions;
 		if (this.props.allowCreate && this.state.inputValue.trim()) {
@@ -697,31 +721,11 @@ var Select = React.createClass({
 		}
 		var ops = Object.keys(options).map(function(key) {
 			var op = options[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
-			});
-			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;
+      if (isGroup(op)) {
+        console.log('render group!');
+        return this.renderOptionGroup(op);
+      }
+      return this.renderOption(op, focusedValue);
 		}, this);
 
 		if (ops.length) {
@@ -747,6 +751,46 @@ var Select = React.createClass({
 		}
 	},
 
+  renderOption(op, focusedValue) {
+    console.log('focusedValue', focusedValue)
+		var renderLabel = this.props.optionRenderer || defaultLabelRenderer;
+    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
+    });
+    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);
+    return 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
+    });
+  },
+
+  renderOptionGroup(group) {
+		var renderLabel = this.props.optionGroupRenderer || defaultLabelRenderer;
+    var optionClass = classes('Select-option', 'is-disabled');
+    return React.createElement(this.props.optionGroupComponent, {
+      key: 'optionGroup-' + group.label,
+      className: optionClass,
+      renderFunc: renderLabel,
+      optionGroup: group
+    });
+  },
+
 	handleOptionLabelClick: function (value, event) {
 		if (this.props.onOptionLabelClick) {
 			this.props.onOptionLabelClick(value, event);
@@ -754,6 +798,7 @@ var Select = React.createClass({
 	},
 
 	render: function() {
+    console.log('focused', this.state.focusedOption)
 		var selectClass = classes('Select', this.props.className, {
 			'is-multi': this.props.multi,
 			'is-searchable': this.props.searchable,

From 7cd9ccf309d36fbb11cce3b67d5541ed1a6b5a8b Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 12:30:52 -0400
Subject: [PATCH 02/13] remove console.logs

---
 src/Select.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/Select.js b/src/Select.js
index 6a406a0975..48dc4d86fd 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -706,7 +706,6 @@ var Select = React.createClass({
 		if (this.state.filteredOptions.length > 0) {
 			focusedValue = focusedValue == null ? this.state.filteredOptions[0].value : focusedValue;
 		}
-    console.log('buildMenu-focusedValue', focusedValue);
 		// Add the current value to the filtered options in last resort
 		var options = this.state.filteredOptions;
 		if (this.props.allowCreate && this.state.inputValue.trim()) {
@@ -722,7 +721,6 @@ var Select = React.createClass({
 		var ops = Object.keys(options).map(function(key) {
 			var op = options[key];
       if (isGroup(op)) {
-        console.log('render group!');
         return this.renderOptionGroup(op);
       }
       return this.renderOption(op, focusedValue);
@@ -752,7 +750,6 @@ var Select = React.createClass({
 	},
 
   renderOption(op, focusedValue) {
-    console.log('focusedValue', focusedValue)
 		var renderLabel = this.props.optionRenderer || defaultLabelRenderer;
     var isSelected = this.state.value === op.value;
     var isFocused = focusedValue === op.value;
@@ -798,7 +795,6 @@ var Select = React.createClass({
 	},
 
 	render: function() {
-    console.log('focused', this.state.focusedOption)
 		var selectClass = classes('Select', this.props.className, {
 			'is-multi': this.props.multi,
 			'is-searchable': this.props.searchable,

From 0f66fd5e8c8b7bfddbe49c4f10e36af99721d3df Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 12:36:54 -0400
Subject: [PATCH 03/13] tabs and linting

---
 src/OptionGroup.js |   7 +--
 src/Select.js      | 112 ++++++++++++++++++++++-----------------------
 2 files changed, 60 insertions(+), 59 deletions(-)

diff --git a/src/OptionGroup.js b/src/OptionGroup.js
index f60733db53..0edc446ac4 100644
--- a/src/OptionGroup.js
+++ b/src/OptionGroup.js
@@ -3,10 +3,11 @@ var classes = require('classnames');
 
 var Option = React.createClass({
 	propTypes: {
+		className: PropTypes.string,
 		optionGroup: React.PropTypes.shape({
-      label: React.PropTypes.string.isRequired,
-      options: React.PropTypes.array.isRequired,
-    }).isRequired,     // object that is base for that option
+			label: React.PropTypes.string.isRequired,
+			options: React.PropTypes.array.isRequired,
+		}).isRequired,     // object that is base for that option
 		renderFunc: React.PropTypes.func               // method passed to ReactSelect component to render label text
 	},
 
diff --git a/src/Select.js b/src/Select.js
index 48dc4d86fd..b45592186d 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -13,27 +13,27 @@ var OptionGroup = require('./OptionGroup');
 var requestId = 0;
 
 function defaultLabelRenderer(op) {
-  return op.label;
+	return op.label;
 }
 
 function flattenOptions(options) {
-  if (!options) {
-    return options;
-  }
-  var flatten = function(flat, opt) {
-    if (Array.isArray(opt.options)) {
-      return flat.concat(
-        opt,
-        opt.options.reduce(flatten, [])
-      );
-    }
-    return flat.concat(opt);
-  };
-  return options.reduce(flatten, []);
+	if (!options) {
+		return options;
+	}
+	var flatten = function(flat, opt) {
+		if (Array.isArray(opt.options)) {
+			return flat.concat(
+				opt,
+				opt.options.reduce(flatten, [])
+			);
+		}
+		return flat.concat(opt);
+	};
+	return options.reduce(flatten, []);
 }
 
 function isGroup(op) {
-  return op && Array.isArray(op.options);
+	return op && Array.isArray(op.options);
 }
 
 var Select = React.createClass({
@@ -191,7 +191,7 @@ var Select = React.createClass({
 		var optionsChanged = false;
 		if (JSON.stringify(newProps.options) !== JSON.stringify(this.props.options)) {
 			optionsChanged = true;
-      var flatOptions = flattenOptions(newProps.options);
+			var flatOptions = flattenOptions(newProps.options);
 			this.setState({
 				options: flatOptions,
 				filteredOptions: this.filterOptions(flatOptions)
@@ -720,10 +720,10 @@ var Select = React.createClass({
 		}
 		var ops = Object.keys(options).map(function(key) {
 			var op = options[key];
-      if (isGroup(op)) {
-        return this.renderOptionGroup(op);
-      }
-      return this.renderOption(op, focusedValue);
+			if (isGroup(op)) {
+				return this.renderOptionGroup(op);
+			}
+			return this.renderOption(op, focusedValue);
 		}, this);
 
 		if (ops.length) {
@@ -749,44 +749,44 @@ var Select = React.createClass({
 		}
 	},
 
-  renderOption(op, focusedValue) {
+	renderOption(op, focusedValue) {
 		var renderLabel = this.props.optionRenderer || defaultLabelRenderer;
-    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
-    });
-    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);
-    return 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
-    });
-  },
-
-  renderOptionGroup(group) {
+		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
+		});
+		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);
+		return 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
+		});
+	},
+
+	renderOptionGroup(group) {
 		var renderLabel = this.props.optionGroupRenderer || defaultLabelRenderer;
-    var optionClass = classes('Select-option', 'is-disabled');
-    return React.createElement(this.props.optionGroupComponent, {
-      key: 'optionGroup-' + group.label,
-      className: optionClass,
-      renderFunc: renderLabel,
-      optionGroup: group
-    });
-  },
+		var optionClass = classes('Select-option', 'is-disabled');
+		return React.createElement(this.props.optionGroupComponent, {
+			key: 'optionGroup-' + group.label,
+			className: optionClass,
+			renderFunc: renderLabel,
+			optionGroup: group
+		});
+	},
 
 	handleOptionLabelClick: function (value, event) {
 		if (this.props.onOptionLabelClick) {

From 745a6cf8a38a2285228ed4827f8dd21dface8611 Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 12:43:33 -0400
Subject: [PATCH 04/13] never focus groups

---
 src/Select.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Select.js b/src/Select.js
index b45592186d..4b532818cc 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -658,7 +658,7 @@ var Select = React.createClass({
 	focusAdjacentOption: function(dir) {
 		this._focusedOptionReveal = true;
 		var ops = this.state.filteredOptions.filter(function(op) {
-			return !op.disabled;
+			return !op.disabled && !isGroup(op);
 		});
 		if (!this.state.isOpen) {
 			this.setState({

From 6c48c448edf42e560d98adc73e019e89c271cc99 Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 12:43:46 -0400
Subject: [PATCH 05/13] fix a typo

---
 src/OptionGroup.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/OptionGroup.js b/src/OptionGroup.js
index 0edc446ac4..6d48d743ee 100644
--- a/src/OptionGroup.js
+++ b/src/OptionGroup.js
@@ -3,7 +3,7 @@ var classes = require('classnames');
 
 var Option = React.createClass({
 	propTypes: {
-		className: PropTypes.string,
+		className: React.PropTypes.string,
 		optionGroup: React.PropTypes.shape({
 			label: React.PropTypes.string.isRequired,
 			options: React.PropTypes.array.isRequired,

From efeb88c4ea22415b841701068471b07ca5c091e2 Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 12:46:15 -0400
Subject: [PATCH 06/13] reorder the example

---
 examples/src/app.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/src/app.js b/examples/src/app.js
index 79717ef55a..5068e08ccf 100644
--- a/examples/src/app.js
+++ b/examples/src/app.js
@@ -37,11 +37,11 @@ React.render(
 		<SelectedValuesField label="Clickable labels (labels as links)" options={FLAVOURS} hint="Open the console to see click behaviour (data/event)" />
 		<SelectedValuesField label="Disabled option" options={FLAVOURS_WITH_DISABLED_OPTION} hint="You savage! Caramel is the best..." />
 		<DisabledUpsellOptions label="Disable option with an upsell link"/>
+		<GroupedOptionsField label="Option Groups" />
 		<SelectedValuesField label="Option Creation (tags mode)" options={FLAVOURS} allowCreate hint="Enter a value that's not in the list, then hit enter" />
 		<CustomRenderField label="Custom render options/values" />
 		<CustomRenderField label="Custom render options/values (multi)" multi delimiter="," />
 		<RemoteSelectField label="Remote Options" hint='Type anything in the remote example to asynchronously load options. Valid alternative results are "A", "AA", and "AB"' />
-    <GroupedOptionsField label="Grouping Options" />
 	</div>,
 	document.getElementById('example')
 );

From 0637de706c5942c4b6e54f0b0394a35a7c5d6b43 Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 13:40:18 -0400
Subject: [PATCH 07/13] hide groups with no matches

---
 src/Select.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Select.js b/src/Select.js
index 4b532818cc..a4ec3c78c1 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -611,6 +611,7 @@ var Select = React.createClass({
 			return this.props.filterOptions.call(this, options, filterValue, exclude);
 		} else {
 			var filterOption = function(op) {
+        if (isGroup(op)) return op.options.some(filterOption, this);
 				if (this.props.multi && exclude.indexOf(op.value) > -1) return false;
 				if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
 				var valueTest = String(op.value), labelTest = String(op.label);

From 09e378c6b158a490f166f15775a2f3d2000e2acc Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 15:17:08 -0400
Subject: [PATCH 08/13] group styling

---
 .../src/components/GroupedOptionsField.js     |  9 +-
 src/OptionGroup.js                            | 15 ++-
 src/Select.js                                 | 96 ++++++++++++-------
 3 files changed, 79 insertions(+), 41 deletions(-)

diff --git a/examples/src/components/GroupedOptionsField.js b/examples/src/components/GroupedOptionsField.js
index a0f71ca5a1..164e47bbc0 100644
--- a/examples/src/components/GroupedOptionsField.js
+++ b/examples/src/components/GroupedOptionsField.js
@@ -6,6 +6,9 @@ function logChange() {
 }
 
 var ops = [{
+  label: 'Black',
+  value: 'black',
+}, {
   label: 'Primary Colors',
   options: [
     { label: 'Yellow', value: 'yellow' },
@@ -19,6 +22,9 @@ var ops = [{
     { label: 'Violet', value: 'violet' },
     { label: 'Green', value: 'green' }
   ]
+}, {
+  label: 'White',
+  value: 'white',
 }];
 
 var GroupedOptionsField = React.createClass({
@@ -34,8 +40,9 @@ var GroupedOptionsField = React.createClass({
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
 				<Select
-					placeholder="Select a color"
+          open={true}
 					options={ops}
+					placeholder="Select a color"
 					onChange={logChange} />
 			</div>
 		);
diff --git a/src/OptionGroup.js b/src/OptionGroup.js
index 6d48d743ee..aa2c5af517 100644
--- a/src/OptionGroup.js
+++ b/src/OptionGroup.js
@@ -3,6 +3,7 @@ var classes = require('classnames');
 
 var Option = React.createClass({
 	propTypes: {
+    children: React.PropTypes.any,
 		className: React.PropTypes.string,
 		optionGroup: React.PropTypes.shape({
 			label: React.PropTypes.string.isRequired,
@@ -30,11 +31,15 @@ var Option = React.createClass({
 		var optionClasses = classes(this.props.className, obj.className);
 
 		return (
-			<div className={optionClasses}
-				onMouseDown={this.blockEvent}
-				onClick={this.blockEvent}>
-				{renderedLabel}
-			</div>
+      <div>
+        <div
+          className={optionClasses}
+          onMouseDown={this.blockEvent}
+          onClick={this.blockEvent}>
+          <strong>{renderedLabel}</strong>
+        </div>
+        {this.props.children}
+      </div>
 		);
 	}
 });
diff --git a/src/Select.js b/src/Select.js
index a4ec3c78c1..bd1b30f583 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -12,6 +12,48 @@ var OptionGroup = require('./OptionGroup');
 
 var requestId = 0;
 
+function defaultFilterOption(option, filterValue) {
+  if (!filterValue) {
+    return true;
+  }
+  var valueTest = String(option.value), labelTest = String(option.label);
+  if (this.props.ignoreCase) {
+    valueTest = valueTest.toLowerCase();
+    labelTest = labelTest.toLowerCase();
+    filterValue = filterValue.toLowerCase();
+  }
+  return (this.props.matchPos === 'start') ? (
+    (this.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue) ||
+    (this.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue)
+  ) : (
+    (this.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0) ||
+    (this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0)
+  );
+}
+
+function defaultFilterOptions(options, filterValue, exclude) {
+  if (!options) {
+    return [];
+  }
+  var matchedOptions = function(matches, option) {
+    if (isGroup(option)) {
+      var groupMatches = option.options.reduce(matchedOptions, []);
+      if (groupMatches.length > 0) {
+        matches.push(Object.assign({}, option, {
+          options: groupMatches,
+        }));
+      }
+    } else if (
+      (!this.props.multi || exclude.indexOf(option.value) === -1) &&
+      (this.props.filterOption && this.props.filterOption.call(this, option, filterValue))
+    ) {
+      matches.push(option);
+    }
+    return matches;
+  }.bind(this);
+  return options.reduce(matchedOptions, []);
+}
+
 function defaultLabelRenderer(op) {
 	return op.label;
 }
@@ -95,6 +137,8 @@ var Select = React.createClass({
 			clearable: true,
 			delimiter: ',',
 			disabled: false,
+      filterOption: defaultFilterOption,
+      filterOptions: defaultFilterOptions,
 			ignoreCase: true,
 			inputProps: {},
 			matchPos: 'any',
@@ -132,7 +176,8 @@ var Select = React.createClass({
 			isFocused: false,
 			isLoading: false,
 			isOpen: false,
-			options: flattenOptions(this.props.options)
+			options: this.props.options,
+      flatOptions: flattenOptions(this.props.options)
 		};
 	},
 
@@ -191,10 +236,11 @@ var Select = React.createClass({
 		var optionsChanged = false;
 		if (JSON.stringify(newProps.options) !== JSON.stringify(this.props.options)) {
 			optionsChanged = true;
-			var flatOptions = flattenOptions(newProps.options);
+			var options = newProps.options;
 			this.setState({
-				options: flatOptions,
-				filteredOptions: this.filterOptions(flatOptions)
+				flatOptions: flattenOptions(options),
+				filteredOptions: this.filterOptions(options),
+        options: options
 			});
 		}
 		if (newProps.value !== this.state.value || newProps.placeholder !== this.props.placeholder || optionsChanged) {
@@ -607,29 +653,8 @@ var Select = React.createClass({
 		var exclude = (values || this.state.values).map(function(i) {
 			return i.value;
 		});
-		if (this.props.filterOptions) {
-			return this.props.filterOptions.call(this, options, filterValue, exclude);
-		} else {
-			var filterOption = function(op) {
-        if (isGroup(op)) return op.options.some(filterOption, this);
-				if (this.props.multi && exclude.indexOf(op.value) > -1) return false;
-				if (this.props.filterOption) return this.props.filterOption.call(this, op, filterValue);
-				var valueTest = String(op.value), labelTest = String(op.label);
-				if (this.props.ignoreCase) {
-					valueTest = valueTest.toLowerCase();
-					labelTest = labelTest.toLowerCase();
-					filterValue = filterValue.toLowerCase();
-				}
-				return !filterValue || (this.props.matchPos === 'start') ? (
-					(this.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue) ||
-					(this.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue)
-				) : (
-					(this.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0) ||
-					(this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0)
-				);
-			};
-			return (options || []).filter(filterOption, this);
-		}
+    var result = this.props.filterOptions.call(this, options, filterValue, exclude);
+    return result;
 	},
 
 	selectFocusedOption: function() {
@@ -658,7 +683,7 @@ var Select = React.createClass({
 
 	focusAdjacentOption: function(dir) {
 		this._focusedOptionReveal = true;
-		var ops = this.state.filteredOptions.filter(function(op) {
+		var ops = this.state.flatOptions.filter(function(op) {
 			return !op.disabled && !isGroup(op);
 		});
 		if (!this.state.isOpen) {
@@ -719,12 +744,13 @@ var Select = React.createClass({
 			};
 			options.unshift(newOption);
 		}
+
 		var ops = Object.keys(options).map(function(key) {
 			var op = options[key];
 			if (isGroup(op)) {
-				return this.renderOptionGroup(op);
+				return this.renderOptionGroup(focusedValue, op);
 			}
-			return this.renderOption(op, focusedValue);
+			return this.renderOption(focusedValue, op);
 		}, this);
 
 		if (ops.length) {
@@ -750,7 +776,7 @@ var Select = React.createClass({
 		}
 	},
 
-	renderOption(op, focusedValue) {
+	renderOption(focusedValue, op) {
 		var renderLabel = this.props.optionRenderer || defaultLabelRenderer;
 		var isSelected = this.state.value === op.value;
 		var isFocused = focusedValue === op.value;
@@ -778,12 +804,12 @@ var Select = React.createClass({
 		});
 	},
 
-	renderOptionGroup(group) {
+	renderOptionGroup(focusedValue, group) {
 		var renderLabel = this.props.optionGroupRenderer || defaultLabelRenderer;
-		var optionClass = classes('Select-option', 'is-disabled');
 		return React.createElement(this.props.optionGroupComponent, {
 			key: 'optionGroup-' + group.label,
-			className: optionClass,
+			className: 'Select-option Select-optionGroup',
+      children: group.options.map(this.renderOption.bind(this, focusedValue)),
 			renderFunc: renderLabel,
 			optionGroup: group
 		});
@@ -846,7 +872,7 @@ var Select = React.createClass({
 
 		var menu;
 		var menuProps;
-		if (this.state.isOpen) {
+		if (this.props.open || this.state.isOpen) {
 			menuProps = {
 				ref: 'menu',
 				className: 'Select-menu',

From cd74be2192b32e823deaa750fa38cfda4a3ae662 Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 15:45:25 -0400
Subject: [PATCH 09/13] mousing across groups

---
 .../src/components/GroupedOptionsField.js     | 40 ++++++---
 src/OptionGroup.js                            |  6 +-
 src/Select.js                                 | 84 +++++++++++--------
 3 files changed, 78 insertions(+), 52 deletions(-)

diff --git a/examples/src/components/GroupedOptionsField.js b/examples/src/components/GroupedOptionsField.js
index 164e47bbc0..b55f40babf 100644
--- a/examples/src/components/GroupedOptionsField.js
+++ b/examples/src/components/GroupedOptionsField.js
@@ -10,18 +10,37 @@ var ops = [{
   value: 'black',
 }, {
   label: 'Primary Colors',
-  options: [
-    { label: 'Yellow', value: 'yellow' },
-    { label: 'Red', value: 'red' },
-    { label: 'Blue', value: 'blue' }
-  ]
+  options: [{
+    label: 'Yellow',
+    value: 'yellow'
+  }, {
+    label: 'Red',
+    value: 'red'
+  }, {
+    label: 'Blue',
+    value: 'blue'
+  }]
 }, {
   label: 'Secondary Colors',
-  options: [
-    { label: 'Orange', value: 'orange' },
-    { label: 'Violet', value: 'violet' },
-    { label: 'Green', value: 'green' }
-  ]
+  options: [{
+    label: 'Orange',
+    value: 'orange'
+  }, {
+    label: 'Purple',
+    options: [{
+      label: 'Light Purple',
+      value: 'light_purple'
+    }, {
+      label: 'Medium Purple',
+      value: 'medium_purple'
+    }, {
+      label: 'Dark Purple',
+      value: 'dark_purple'
+    }]
+  }, {
+    label: 'Green',
+    value: 'green'
+  }]
 }, {
   label: 'White',
   value: 'white',
@@ -40,7 +59,6 @@ var GroupedOptionsField = React.createClass({
 			<div className="section">
 				<h3 className="section-heading">{this.props.label}</h3>
 				<Select
-          open={true}
 					options={ops}
 					placeholder="Select a color"
 					onChange={logChange} />
diff --git a/src/OptionGroup.js b/src/OptionGroup.js
index aa2c5af517..fd79216e6e 100644
--- a/src/OptionGroup.js
+++ b/src/OptionGroup.js
@@ -28,12 +28,10 @@ var Option = React.createClass({
 	render: function() {
 		var obj = this.props.optionGroup;
 		var renderedLabel = this.props.renderFunc(obj);
-		var optionClasses = classes(this.props.className, obj.className);
-
 		return (
-      <div>
+      <div className={classes(this.props.className, 'Select-optionGroup')}>
         <div
-          className={optionClasses}
+          className="Select-optionGroup-label"
           onMouseDown={this.blockEvent}
           onClick={this.blockEvent}>
           <strong>{renderedLabel}</strong>
diff --git a/src/Select.js b/src/Select.js
index bd1b30f583..d756d6bdfc 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -35,9 +35,9 @@ function defaultFilterOptions(options, filterValue, exclude) {
   if (!options) {
     return [];
   }
-  var matchedOptions = function(matches, option) {
+  var matchingOptions = function(matches, option) {
     if (isGroup(option)) {
-      var groupMatches = option.options.reduce(matchedOptions, []);
+      var groupMatches = option.options.reduce(matchingOptions, []);
       if (groupMatches.length > 0) {
         matches.push(Object.assign({}, option, {
           options: groupMatches,
@@ -51,7 +51,7 @@ function defaultFilterOptions(options, filterValue, exclude) {
     }
     return matches;
   }.bind(this);
-  return options.reduce(matchedOptions, []);
+  return options.reduce(matchingOptions, []);
 }
 
 function defaultLabelRenderer(op) {
@@ -236,10 +236,11 @@ var Select = React.createClass({
 		var optionsChanged = false;
 		if (JSON.stringify(newProps.options) !== JSON.stringify(this.props.options)) {
 			optionsChanged = true;
-			var options = newProps.options;
+			var filteredOptions = this.filterOptions(newProps.options);
 			this.setState({
-				flatOptions: flattenOptions(options),
-				filteredOptions: this.filterOptions(options),
+				flatOptions: flattenOptions(filteredOptions),
+				filteredOptions: filteredOptions,
+        flatOptions: flattenOptions(filteredOptions),
         options: options
 			});
 		}
@@ -323,6 +324,7 @@ var Select = React.createClass({
 			values: values,
 			inputValue: '',
 			filteredOptions: filteredOptions,
+      flatOptions: flattenOptions(filteredOptions),
 			placeholder: !this.props.multi && values.length ? values[0].label : placeholder,
 			focusedOption: focusedOption
 		};
@@ -584,6 +586,7 @@ var Select = React.createClass({
 				isOpen: true,
 				inputValue: event.target.value,
 				filteredOptions: filteredOptions,
+        flatOptions: flattenOptions(filteredOptions),
 				focusedOption: this._getNewFocusedOption(filteredOptions)
 			}, this._bindCloseMenuIfClickedOutside);
 		}
@@ -610,6 +613,7 @@ var Select = React.createClass({
 					var newState = {
 						options: options,
 						filteredOptions: filteredOptions,
+            flatOptions: flattenOptions(filteredOptions),
 						focusedOption: this._getNewFocusedOption(filteredOptions)
 					};
 					for (var key in state) {
@@ -636,6 +640,7 @@ var Select = React.createClass({
 			var newState = {
 				options: data.options,
 				filteredOptions: filteredOptions,
+        flatOptions: flattenOptions(filteredOptions),
 				focusedOption: this._getNewFocusedOption(filteredOptions)
 			};
 			for (var key in state) {
@@ -745,37 +750,43 @@ var Select = React.createClass({
 			options.unshift(newOption);
 		}
 
-		var ops = Object.keys(options).map(function(key) {
-			var op = options[key];
-			if (isGroup(op)) {
-				return this.renderOptionGroup(focusedValue, op);
-			}
-			return this.renderOption(focusedValue, op);
-		}, this);
-
-		if (ops.length) {
-			return ops;
-		} else {
-			var noResultsText, promptClass;
-			if (this.state.isLoading) {
-				promptClass = 'Select-searching';
-				noResultsText = this.props.searchingText;
-			} else if (this.state.inputValue || !this.props.asyncOptions) {
-				promptClass = 'Select-noresults';
-				noResultsText = this.props.noResultsText;
-			} else {
-				promptClass = 'Select-search-prompt';
-				noResultsText = this.props.searchPromptText;
-			}
+    if (!options.length) {
+      return this.renderNoResults();
+    }
 
-			return (
-				<div className={promptClass}>
-					{noResultsText}
-				</div>
-			);
-		}
+    return this.renderOptions(focusedValue, options);
 	},
 
+  renderNoResults() {
+    var noResultsText, promptClass;
+    if (this.state.isLoading) {
+      promptClass = 'Select-searching';
+      noResultsText = this.props.searchingText;
+    } else if (this.state.inputValue || !this.props.asyncOptions) {
+      promptClass = 'Select-noresults';
+      noResultsText = this.props.noResultsText;
+    } else {
+      promptClass = 'Select-search-prompt';
+      noResultsText = this.props.searchPromptText;
+    }
+
+    return (
+      <div className={promptClass}>
+        {noResultsText}
+      </div>
+    );
+  },
+
+  renderOptions(focusedValue, options) {
+    console.log(options);
+		return options.map(function(option) {
+			if (isGroup(option)) {
+				return this.renderOptionGroup(focusedValue, option);
+			}
+			return this.renderOption(focusedValue, option);
+		}, this);
+  },
+
 	renderOption(focusedValue, op) {
 		var renderLabel = this.props.optionRenderer || defaultLabelRenderer;
 		var isSelected = this.state.value === op.value;
@@ -808,8 +819,7 @@ var Select = React.createClass({
 		var renderLabel = this.props.optionGroupRenderer || defaultLabelRenderer;
 		return React.createElement(this.props.optionGroupComponent, {
 			key: 'optionGroup-' + group.label,
-			className: 'Select-option Select-optionGroup',
-      children: group.options.map(this.renderOption.bind(this, focusedValue)),
+      children: this.renderOptions(focusedValue, group.options),
 			renderFunc: renderLabel,
 			optionGroup: group
 		});
@@ -872,7 +882,7 @@ var Select = React.createClass({
 
 		var menu;
 		var menuProps;
-		if (this.props.open || this.state.isOpen) {
+		if (this.state.isOpen) {
 			menuProps = {
 				ref: 'menu',
 				className: 'Select-menu',

From 3f0aec1ae87dd5b867dce03db208f0b424bbc993 Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 15:49:17 -0400
Subject: [PATCH 10/13] fix errors

---
 src/Select.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Select.js b/src/Select.js
index d756d6bdfc..63a4d8e74e 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -234,11 +234,11 @@ var Select = React.createClass({
 
 	componentWillReceiveProps: function(newProps) {
 		var optionsChanged = false;
-		if (JSON.stringify(newProps.options) !== JSON.stringify(this.props.options)) {
+    var options = newProps.options;
+		if (JSON.stringify(options) !== JSON.stringify(this.props.options)) {
 			optionsChanged = true;
-			var filteredOptions = this.filterOptions(newProps.options);
+			var filteredOptions = this.filterOptions(options);
 			this.setState({
-				flatOptions: flattenOptions(filteredOptions),
 				filteredOptions: filteredOptions,
         flatOptions: flattenOptions(filteredOptions),
         options: options

From 65e537b53ec6d0ffb332524665018db76ea0f86f Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 15:50:42 -0400
Subject: [PATCH 11/13] forgot the styles

---
 less/menu.less | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/less/menu.less b/less/menu.less
index 2906579b50..a3579f528f 100644
--- a/less/menu.less
+++ b/less/menu.less
@@ -57,9 +57,20 @@
 		color: @select-option-disabled-color;
 		cursor: not-allowed;
 	}
+}
 
+.Select-optionGroup-label ~ .Select-option,
+.Select-optionGroup-label ~ .Select-optionGroup {
+  margin-left: @select-padding-horizontal;
 }
 
+.Select-optionGroup-label {
+	box-sizing: border-box;
+	color: @select-option-color;
+  cursor: default;
+	display: block;
+	padding: @select-padding-vertical @select-padding-horizontal;
+}
 
 // no results
 

From 1724e07c1eda18cc2ff91e807d11b88c0d9108bc Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 16:37:21 -0400
Subject: [PATCH 12/13] s/space/tabs

---
 less/menu.less     |   4 +-
 src/OptionGroup.js |  20 +++---
 src/Select.js      | 148 ++++++++++++++++++++++-----------------------
 3 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/less/menu.less b/less/menu.less
index a3579f528f..5db6fd2e2d 100644
--- a/less/menu.less
+++ b/less/menu.less
@@ -61,13 +61,13 @@
 
 .Select-optionGroup-label ~ .Select-option,
 .Select-optionGroup-label ~ .Select-optionGroup {
-  margin-left: @select-padding-horizontal;
+	margin-left: @select-padding-horizontal;
 }
 
 .Select-optionGroup-label {
 	box-sizing: border-box;
 	color: @select-option-color;
-  cursor: default;
+	cursor: default;
 	display: block;
 	padding: @select-padding-vertical @select-padding-horizontal;
 }
diff --git a/src/OptionGroup.js b/src/OptionGroup.js
index fd79216e6e..3201ffd0ff 100644
--- a/src/OptionGroup.js
+++ b/src/OptionGroup.js
@@ -3,7 +3,7 @@ var classes = require('classnames');
 
 var Option = React.createClass({
 	propTypes: {
-    children: React.PropTypes.any,
+		children: React.PropTypes.any,
 		className: React.PropTypes.string,
 		optionGroup: React.PropTypes.shape({
 			label: React.PropTypes.string.isRequired,
@@ -29,15 +29,15 @@ var Option = React.createClass({
 		var obj = this.props.optionGroup;
 		var renderedLabel = this.props.renderFunc(obj);
 		return (
-      <div className={classes(this.props.className, 'Select-optionGroup')}>
-        <div
-          className="Select-optionGroup-label"
-          onMouseDown={this.blockEvent}
-          onClick={this.blockEvent}>
-          <strong>{renderedLabel}</strong>
-        </div>
-        {this.props.children}
-      </div>
+			<div className={classes(this.props.className, 'Select-optionGroup')}>
+				<div
+					className="Select-optionGroup-label"
+					onMouseDown={this.blockEvent}
+					onClick={this.blockEvent}>
+					<strong>{renderedLabel}</strong>
+				</div>
+				{this.props.children}
+			</div>
 		);
 	}
 });
diff --git a/src/Select.js b/src/Select.js
index 63a4d8e74e..d18026a5e2 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -13,45 +13,45 @@ var OptionGroup = require('./OptionGroup');
 var requestId = 0;
 
 function defaultFilterOption(option, filterValue) {
-  if (!filterValue) {
-    return true;
-  }
-  var valueTest = String(option.value), labelTest = String(option.label);
-  if (this.props.ignoreCase) {
-    valueTest = valueTest.toLowerCase();
-    labelTest = labelTest.toLowerCase();
-    filterValue = filterValue.toLowerCase();
-  }
-  return (this.props.matchPos === 'start') ? (
-    (this.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue) ||
-    (this.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue)
-  ) : (
-    (this.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0) ||
-    (this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0)
-  );
+	if (!filterValue) {
+		return true;
+	}
+	var valueTest = String(option.value), labelTest = String(option.label);
+	if (this.props.ignoreCase) {
+		valueTest = valueTest.toLowerCase();
+		labelTest = labelTest.toLowerCase();
+		filterValue = filterValue.toLowerCase();
+	}
+	return (this.props.matchPos === 'start') ? (
+		(this.props.matchProp !== 'label' && valueTest.substr(0, filterValue.length) === filterValue) ||
+		(this.props.matchProp !== 'value' && labelTest.substr(0, filterValue.length) === filterValue)
+	) : (
+		(this.props.matchProp !== 'label' && valueTest.indexOf(filterValue) >= 0) ||
+		(this.props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0)
+	);
 }
 
 function defaultFilterOptions(options, filterValue, exclude) {
-  if (!options) {
-    return [];
-  }
-  var matchingOptions = function(matches, option) {
-    if (isGroup(option)) {
-      var groupMatches = option.options.reduce(matchingOptions, []);
-      if (groupMatches.length > 0) {
-        matches.push(Object.assign({}, option, {
-          options: groupMatches,
-        }));
-      }
-    } else if (
-      (!this.props.multi || exclude.indexOf(option.value) === -1) &&
-      (this.props.filterOption && this.props.filterOption.call(this, option, filterValue))
-    ) {
-      matches.push(option);
-    }
-    return matches;
-  }.bind(this);
-  return options.reduce(matchingOptions, []);
+	if (!options) {
+		return [];
+	}
+	var matchingOptions = function(matches, option) {
+		if (isGroup(option)) {
+			var groupMatches = option.options.reduce(matchingOptions, []);
+			if (groupMatches.length > 0) {
+				matches.push(Object.assign({}, option, {
+					options: groupMatches,
+				}));
+			}
+		} else if (
+			(!this.props.multi || exclude.indexOf(option.value) === -1) &&
+			(this.props.filterOption && this.props.filterOption.call(this, option, filterValue))
+		) {
+			matches.push(option);
+		}
+		return matches;
+	}.bind(this);
+	return options.reduce(matchingOptions, []);
 }
 
 function defaultLabelRenderer(op) {
@@ -137,8 +137,8 @@ var Select = React.createClass({
 			clearable: true,
 			delimiter: ',',
 			disabled: false,
-      filterOption: defaultFilterOption,
-      filterOptions: defaultFilterOptions,
+			filterOption: defaultFilterOption,
+			filterOptions: defaultFilterOptions,
 			ignoreCase: true,
 			inputProps: {},
 			matchPos: 'any',
@@ -177,7 +177,7 @@ var Select = React.createClass({
 			isLoading: false,
 			isOpen: false,
 			options: this.props.options,
-      flatOptions: flattenOptions(this.props.options)
+			flatOptions: flattenOptions(this.props.options)
 		};
 	},
 
@@ -234,14 +234,14 @@ var Select = React.createClass({
 
 	componentWillReceiveProps: function(newProps) {
 		var optionsChanged = false;
-    var options = newProps.options;
+		var options = newProps.options;
 		if (JSON.stringify(options) !== JSON.stringify(this.props.options)) {
 			optionsChanged = true;
 			var filteredOptions = this.filterOptions(options);
 			this.setState({
 				filteredOptions: filteredOptions,
-        flatOptions: flattenOptions(filteredOptions),
-        options: options
+				flatOptions: flattenOptions(filteredOptions),
+				options: options
 			});
 		}
 		if (newProps.value !== this.state.value || newProps.placeholder !== this.props.placeholder || optionsChanged) {
@@ -324,7 +324,7 @@ var Select = React.createClass({
 			values: values,
 			inputValue: '',
 			filteredOptions: filteredOptions,
-      flatOptions: flattenOptions(filteredOptions),
+			flatOptions: flattenOptions(filteredOptions),
 			placeholder: !this.props.multi && values.length ? values[0].label : placeholder,
 			focusedOption: focusedOption
 		};
@@ -586,7 +586,7 @@ var Select = React.createClass({
 				isOpen: true,
 				inputValue: event.target.value,
 				filteredOptions: filteredOptions,
-        flatOptions: flattenOptions(filteredOptions),
+				flatOptions: flattenOptions(filteredOptions),
 				focusedOption: this._getNewFocusedOption(filteredOptions)
 			}, this._bindCloseMenuIfClickedOutside);
 		}
@@ -613,7 +613,7 @@ var Select = React.createClass({
 					var newState = {
 						options: options,
 						filteredOptions: filteredOptions,
-            flatOptions: flattenOptions(filteredOptions),
+						flatOptions: flattenOptions(filteredOptions),
 						focusedOption: this._getNewFocusedOption(filteredOptions)
 					};
 					for (var key in state) {
@@ -640,7 +640,7 @@ var Select = React.createClass({
 			var newState = {
 				options: data.options,
 				filteredOptions: filteredOptions,
-        flatOptions: flattenOptions(filteredOptions),
+				flatOptions: flattenOptions(filteredOptions),
 				focusedOption: this._getNewFocusedOption(filteredOptions)
 			};
 			for (var key in state) {
@@ -658,8 +658,8 @@ var Select = React.createClass({
 		var exclude = (values || this.state.values).map(function(i) {
 			return i.value;
 		});
-    var result = this.props.filterOptions.call(this, options, filterValue, exclude);
-    return result;
+		var result = this.props.filterOptions.call(this, options, filterValue, exclude);
+		return result;
 	},
 
 	selectFocusedOption: function() {
@@ -750,42 +750,42 @@ var Select = React.createClass({
 			options.unshift(newOption);
 		}
 
-    if (!options.length) {
-      return this.renderNoResults();
-    }
+		if (!options.length) {
+			return this.renderNoResults();
+		}
 
-    return this.renderOptions(focusedValue, options);
+		return this.renderOptions(focusedValue, options);
 	},
 
-  renderNoResults() {
-    var noResultsText, promptClass;
-    if (this.state.isLoading) {
-      promptClass = 'Select-searching';
-      noResultsText = this.props.searchingText;
-    } else if (this.state.inputValue || !this.props.asyncOptions) {
-      promptClass = 'Select-noresults';
-      noResultsText = this.props.noResultsText;
-    } else {
-      promptClass = 'Select-search-prompt';
-      noResultsText = this.props.searchPromptText;
-    }
+	renderNoResults() {
+		var noResultsText, promptClass;
+		if (this.state.isLoading) {
+			promptClass = 'Select-searching';
+			noResultsText = this.props.searchingText;
+		} else if (this.state.inputValue || !this.props.asyncOptions) {
+			promptClass = 'Select-noresults';
+			noResultsText = this.props.noResultsText;
+		} else {
+			promptClass = 'Select-search-prompt';
+			noResultsText = this.props.searchPromptText;
+		}
 
-    return (
-      <div className={promptClass}>
-        {noResultsText}
-      </div>
-    );
-  },
+		return (
+			<div className={promptClass}>
+				{noResultsText}
+			</div>
+		);
+	},
 
-  renderOptions(focusedValue, options) {
-    console.log(options);
+	renderOptions(focusedValue, options) {
+		console.log(options);
 		return options.map(function(option) {
 			if (isGroup(option)) {
 				return this.renderOptionGroup(focusedValue, option);
 			}
 			return this.renderOption(focusedValue, option);
 		}, this);
-  },
+	},
 
 	renderOption(focusedValue, op) {
 		var renderLabel = this.props.optionRenderer || defaultLabelRenderer;
@@ -819,7 +819,7 @@ var Select = React.createClass({
 		var renderLabel = this.props.optionGroupRenderer || defaultLabelRenderer;
 		return React.createElement(this.props.optionGroupComponent, {
 			key: 'optionGroup-' + group.label,
-      children: this.renderOptions(focusedValue, group.options),
+			children: this.renderOptions(focusedValue, group.options),
 			renderFunc: renderLabel,
 			optionGroup: group
 		});

From a39352ea6a7c2fb21c6b8b4275918d4f3a814e4a Mon Sep 17 00:00:00 2001
From: Colby Rabideau <crabideau@hubspot.com>
Date: Thu, 24 Sep 2015 16:38:03 -0400
Subject: [PATCH 13/13] s/space/tabs

---
 .../src/components/GroupedOptionsField.js     | 70 +++++++++----------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/examples/src/components/GroupedOptionsField.js b/examples/src/components/GroupedOptionsField.js
index b55f40babf..f17fe265c1 100644
--- a/examples/src/components/GroupedOptionsField.js
+++ b/examples/src/components/GroupedOptionsField.js
@@ -6,44 +6,44 @@ function logChange() {
 }
 
 var ops = [{
-  label: 'Black',
-  value: 'black',
+	label: 'Black',
+	value: 'black',
 }, {
-  label: 'Primary Colors',
-  options: [{
-    label: 'Yellow',
-    value: 'yellow'
-  }, {
-    label: 'Red',
-    value: 'red'
-  }, {
-    label: 'Blue',
-    value: 'blue'
-  }]
+	label: 'Primary Colors',
+	options: [{
+		label: 'Yellow',
+		value: 'yellow'
+	}, {
+		label: 'Red',
+		value: 'red'
+	}, {
+		label: 'Blue',
+		value: 'blue'
+	}]
 }, {
-  label: 'Secondary Colors',
-  options: [{
-    label: 'Orange',
-    value: 'orange'
-  }, {
-    label: 'Purple',
-    options: [{
-      label: 'Light Purple',
-      value: 'light_purple'
-    }, {
-      label: 'Medium Purple',
-      value: 'medium_purple'
-    }, {
-      label: 'Dark Purple',
-      value: 'dark_purple'
-    }]
-  }, {
-    label: 'Green',
-    value: 'green'
-  }]
+	label: 'Secondary Colors',
+	options: [{
+		label: 'Orange',
+		value: 'orange'
+	}, {
+		label: 'Purple',
+		options: [{
+			label: 'Light Purple',
+			value: 'light_purple'
+		}, {
+			label: 'Medium Purple',
+			value: 'medium_purple'
+		}, {
+			label: 'Dark Purple',
+			value: 'dark_purple'
+		}]
+	}, {
+		label: 'Green',
+		value: 'green'
+	}]
 }, {
-  label: 'White',
-  value: 'white',
+	label: 'White',
+	value: 'white',
 }];
 
 var GroupedOptionsField = React.createClass({