Updated to use react-select's AsyncCreatableSelect for getting sugges…

src/components/AsyncSelect/index.jsx

@@ -0,0 +1,111 @@
+/**
+ * AsyncSelect
+ *
+ * A wrapper for react-select's AsyncCreatableSelect.
+ */
+import React from "react";
+import PT from "prop-types";
+import AsyncCreatableSelect from "react-select/async-creatable";
+import "./styles.module.scss";
+
+const AsyncSelect = (props) => {
+  const customStyles = {
+    control: (provided, state) => ({
+      ...provided,
+      minHeight: "40px",
+      border: "1px solid #aaaaab",
+      borderColor: state.isFocused ? "#55a5ff" : "#aaaaab",
+      boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow,
+    }),
+    menu: (provided) => ({
+      ...provided,
+      minHeight: "40px",
+      zIndex: 10,
+    }),
+    valueContainer: (provided) => ({
+      ...provided,
+      padding: "2px 6px",
+    }),
+    input: (provided) => ({
+      ...provided,
+      margin: "0px",
+      height: "auto",
+      padding: "0",
+    }),
+    indicatorSeparator: () => ({
+      display: "none",
+    }),
+    indicatorsContainer: (provided) => ({
+      ...provided,
+      height: "auto",
+    }),
+    option: (provided) => ({
+      ...provided,
+      minHeight: "32px",
+    }),
+    placeholder: (provided) => ({
+      ...provided,
+      color: "#AAAAAA",
+      fontFamily: "Roboto",
+      fontSize: "14px",
+      lineHeight: "22px",
+      textAlign: "left",
+      fontWeight: "400",
+    }),
+    multiValue: (provided) => ({
+      ...provided,
+      margin: "3px 3px",
+      color: "#AAAAAA",
+      fontFamily: "Roboto",
+      fontSize: "14px",
+      lineHeight: "22px",
+      textAlign: "left",
+      borderRadius: "5px",
+    }),
+    dropdownIndicator: () => ({
+      display: "none",
+    }),
+  };
+
+  return (
+    <div styleName="select-wrapper">
+      <AsyncCreatableSelect
+        value={props.value}
+        styles={customStyles}
+        onChange={props.onChange}
+        styleName={props.error ? "error" : ""}
+        isMulti={props.isMulti}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
+        placeholder={props.placeholder}
+        onInputChange={props.onInputChange}
+        noOptionsMessage={() => props.noOptionsText}
+        loadingMessage={() => props.loadingText}
+        isDisabled={props.disabled}
+        cacheOptions={props.cacheOptions}
+        loadOptions={props.loadOptions}
+        defaultOptions={props.defaultOptions}
+      />
+    </div>
+  )
+}
+
+AsyncSelect.propTypes = {
+  value: PT.string,
+  onChange: PT.func,
+  placeholder: PT.string,
+  error: PT.string,
+  isMulti: PT.bool,
+  onBlur: PT.func,
+  onFocus: PT.func,
+  onInputChange: PT.func,
+  cacheOptions: PT.bool,
+  onInputChange: PT.func,
+  noOptionsText: PT.string,
+  loadingText: PT.string,
+  loadOptions: PT.func,
+  defaultOptions: PT.bool || PT.array,
+  disabled: PT.bool,
+}
+
+export default AsyncSelect;

src/components/AsyncSelect/styles.module.scss

@@ -0,0 +1,18 @@
+.error {
+  :first-child {
+    border-color: #ff5b52;
+  }
+}
+
+.select-wrapper {
+  input {
+    border: none !important;
+    box-shadow: none !important;
+    transition: none !important;
+    height: 28px;
+  }
+}
+
+.react-select__option {
+  min-height: 32px;
+}

src/components/ReactSelect/index.jsx

@@ -70,38 +70,20 @@ const ReactSelect = (props) => {
 
   return (
     <div styleName="select-wrapper">
-      {props.isCreatable ? (
-        <CreatableSelect
-          value={props.value}
-          styles={customStyles}
-          onChange={props.onChange}
-          options={props.options}
-          styleName={props.error ? "error" : ""}
-          isMulti={props.isMulti}
-          onBlur={props.onBlur}
-          onFocus={props.onFocus}
-          placeholder={props.placeholder}
-          onInputChange={props.onInputChange}
-          noOptionsMessage={() => props.noOptionsText}
-          createOptionPosition="first"
-          isDisabled={props.disabled}
-        />
-      ) : (
-        <Select
-          value={props.value}
-          styles={customStyles}
-          onChange={props.onChange}
-          options={props.options}
-          styleName={props.error ? "error" : ""}
-          isMulti={props.isMulti}
-          onBlur={props.onBlur}
-          onFocus={props.onFocus}
-          placeholder={props.placeholder}
-          onInputChange={props.onInputChange}
-          noOptionsMessage={() => props.noOptionsText}
-          isDisabled={props.disabled}
-        />
-      )}
+      <Select
+        value={props.value}
+        styles={customStyles}
+        onChange={props.onChange}
+        options={props.options}
+        styleName={props.error ? "error" : ""}
+        isMulti={props.isMulti}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
+        placeholder={props.placeholder}
+        onInputChange={props.onInputChange}
+        noOptionsMessage={() => props.noOptionsText}
+        isDisabled={props.disabled}
+      />
     </div>
   );
 };
@@ -121,7 +103,6 @@ ReactSelect.propTypes = {
       label: PT.string.isRequired,
     }).isRequired
   ),
-  isCreatable: PT.bool,
   noOptionsText: PT.string,
   disabled: PT.bool,
 };

src/routes/TeamAccess/actions/index.js

@@ -6,7 +6,6 @@ import {
   getTeamMembers,
   getTeamInvitees,
   deleteTeamMember,
-  getMemberSuggestions,
   postMembers,
 } from "services/teams";
 import { ACTION_TYPE } from "constants";
@@ -74,31 +73,6 @@ export const removeTeamMember = (teamId, memberId) => ({
   },
 });
 
-/**
- * Loads suggestions for invites
- *
- * @param {string} fragment
- *
- * @returns {Promise<object[]>} list of suggestions or error
- */
-export const loadSuggestions = (fragment) => ({
-  type: ACTION_TYPE.LOAD_MEMBERS_SUGGESTIONS,
-  payload: async () => {
-    const res = await getMemberSuggestions(fragment);
-    return res.data.result.content;
-  },
-  meta: {
-    fragment,
-  },
-});
-
-/**
- * Clears invite suggestions
- */
-export const clearSuggestions = () => ({
-  type: ACTION_TYPE.CLEAR_MEMBERS_SUGGESTIONS,
-});
-
 /**
  * Adds members to team
  *