Merge pull request #387 from appfolio/forceBumpReactSelectPlus

Force bump react select plus

package.json

@@ -39,7 +39,7 @@
     "lodash.noop": "^3.0.1",
     "prop-types": "^15.5.10",
     "react-fontawesome": "^1.4.0",
-    "react-select-plus": "1.0.0-rc.5",
+    "react-select-plus": "1.2.0",
     "react-text-mask": "~5.0.2",
     "react-transition-group": "~1.1.3",
     "reactstrap": "4.8.0",

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 :

src/components/Select.scss

@@ -2,6 +2,7 @@
   // Import and override react-select's SCSS variables to match BS4:
   $select-input-height: 2.35rem !default;
   $select-input-internal-height: 2.25rem !default;
+  $select-arrow-width: 0.35rem !default;
 
   // Override react-select styles to match Saffron (TODO move to theme?)
   $select-input-bg-disabled: #eceeef;

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);
+  });
 });