From 22a6662f239e9b1b1bb7edc00806f8aedae18273 Mon Sep 17 00:00:00 2001
From: Louis des Landes <ldeslandes@swin.edu.au>
Date: Thu, 4 Aug 2016 12:04:40 +1000
Subject: [PATCH] Add support for optgroup using groupProp

---
 README.md    |  3 +++
 src/index.js | 31 +++++++++++++++++++++++++++----
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 9ca65a8..913151c 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,9 @@ The component will update its display if its `options` list changes length or is
 
 `disabled` - disables each child element if `true`.
 
+`groupProp` - name of the property in each object in `options` in order to 
+group `<option>` tags with the same group within an `<optgroup>` tag.
+
 `placeholder` - placeholder text to be displayed in the filter `<input>`.
 
 `selectedOptions` - list of option objects which are selected, so should no
diff --git a/src/index.js b/src/index.js
index 1393c71..fc6dbf9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -47,6 +47,7 @@ export default React.createClass({
     classNames: PropTypes.object,
     defaultFilter: PropTypes.string,
     disabled: PropTypes.bool,
+    groupProp: PropTypes.string,
     placeholder: PropTypes.string,
     selectedOptions: PropTypes.array,
     size: PropTypes.number,
@@ -61,6 +62,7 @@ export default React.createClass({
       classNames: {},
       defaultFilter: '',
       disabled: false,
+      groupProp: false,
       placeholder: 'type to filter',
       size: 6,
       selectedOptions: [],
@@ -185,8 +187,31 @@ export default React.createClass({
 
   render() {
     let {filter, filteredOptions, selectedValues} = this.state
-    let {className, disabled, placeholder, size, textProp, valueProp} = this.props
+    let {className, disabled, groupProp, placeholder, size, textProp, valueProp} = this.props
     let hasSelectedOptions = selectedValues.length > 0
+    let options = []
+    if (groupProp) {
+      let groups = filteredOptions.reduce((result, option) => {
+        if (!result[option[groupProp]]) {
+          result[option[groupProp]] = []
+        }
+        result[option[groupProp]].push(option)
+        return result
+      }, {})
+      options = Object.keys(groups).map((group) => {
+        return (
+          <optgroup key={group} label={group}>
+            {groups[group].map((option) => {
+              return <option key={option[valueProp]} value={option[valueProp]}>{option[textProp]}</option>
+            })}
+          </optgroup>
+        )
+      })
+    } else {
+      options = filteredOptions.map((option) => {
+        return <option key={option[valueProp]} value={option[valueProp]}>{option[textProp]}</option>
+    })
+    }
     return <div className={className}>
       <input
          type="text"
@@ -205,9 +230,7 @@ export default React.createClass({
          onChange={this._updateSelectedValues}
          onDoubleClick={this._addSelectedToSelection}
          disabled={disabled}>
-        {filteredOptions.map((option) => {
-          return <option key={option[valueProp]} value={option[valueProp]}>{option[textProp]}</option>
-        })}
+        {options}
       </select>
       <button type="button"
          className={this._getClassName('button', hasSelectedOptions && 'buttonActive')}