From 5533e0d35908f7d4e8412d5084b3cc7fa5451ee9 Mon Sep 17 00:00:00 2001
From: Natalie Schauser <natalie.schauser@appfolio.com>
Date: Mon, 16 Apr 2018 19:26:52 -0700
Subject: [PATCH] ds/ns - allow ReactSelect.AsyncCreatable

If you pass in loadOptions as well as creatable,
we will now render an AsyncCreatable.
---
 src/components/Select.js       | 11 ++++++++---
 test/components/Select.spec.js | 12 ++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/Select.js b/src/components/Select.js
index 4b48736bf..0dc71e276 100644
--- a/src/components/Select.js
+++ b/src/components/Select.js
@@ -53,9 +53,14 @@ class Select extends React.Component {
   render() {
     const { className, multi, value, valueComponent, ...props } = this.props;
     delete props.onChange; // don't pass onChange prop to react-select
-    const SelectElement = this.props.loadOptions ? ReactSelect.Async :
-                          this.props.creatable ? ReactSelect.Creatable :
-                          ReactSelect;
+    let SelectElement = ReactSelect;
+    if (this.props.loadOptions && this.props.creatable) {
+      SelectElement = ReactSelect.AsyncCreatable;
+    } else if (this.props.loadOptions) {
+      SelectElement = ReactSelect.Async;
+    } else if (this.props.creatable) {
+      SelectElement = ReactSelect.Creatable;
+    }
     const classNames = classnames(className, { 'select-async': this.props.loadOptions });
     const valueComponentRenderer = valueComponent ? valueComponent :
                                    multi ? SelectMultiValue :
diff --git a/test/components/Select.spec.js b/test/components/Select.spec.js
index 25616c0e7..ec7a61745 100644
--- a/test/components/Select.spec.js
+++ b/test/components/Select.spec.js
@@ -117,4 +117,16 @@ describe('<Select />', () => {
     component.focus();
     sinon.assert.calledOnce(component.selectEl.focus);
   });
+
+  it('should render AsyncCreatable if loadOptions and creatable', () => {
+    const getOptions = () => {};
+
+    const component = shallow(<Select loadOptions={getOptions} creatable />);
+    assert.equal(component.type(), ReactSelect.AsyncCreatable);
+  });
+
+  it('should render Creatable if creatable', () => {
+    const component = shallow(<Select creatable />);
+    assert.equal(component.type(), ReactSelect.Creatable);
+  });
 });