diff --git a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
index 318800f69..edee4f5ad 100644
--- a/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/MultiSelect/__snapshots__/index.test.js.snap
@@ -1,968 +1,294 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CustomMultiSelect /> matches snapshot when focused 1`] = `
-<CustomMultiSelect
-  autoFocus={true}
-  defaultInputValue=""
-  defaultMenuIsOpen={false}
-  defaultValue={null}
->
-  <StateManager
-    autoFocus={true}
-    defaultInputValue=""
-    defaultMenuIsOpen={false}
-    defaultValue={null}
-    styles={
-      Object {
-        "control": [Function],
-        "indicatorsContainer": [Function],
-        "multiValue": [Function],
-        "multiValueLabel": [Function],
-        "multiValueRemove": [Function],
-        "option": [Function],
-        "valueContainer": [Function],
-      }
-    }
+"
+<div class=\\"css-10nd86i\\">
+  <span class=\\"css-bl6clz\\"
+        aria-live=\\"assertive\\"
   >
-    <Creatable
-      allowCreateWhileLoading={false}
-      autoFocus={true}
-      createOptionPosition="last"
-      defaultInputValue=""
-      defaultMenuIsOpen={false}
-      defaultValue={null}
-      formatCreateLabel={[Function]}
-      getNewOptionData={[Function]}
-      inputValue=""
-      isValidNewOption={[Function]}
-      menuIsOpen={false}
-      onChange={[Function]}
-      onInputChange={[Function]}
-      onMenuClose={[Function]}
-      onMenuOpen={[Function]}
-      styles={
-        Object {
-          "control": [Function],
-          "indicatorsContainer": [Function],
-          "multiValue": [Function],
-          "multiValueLabel": [Function],
-          "multiValueRemove": [Function],
-          "option": [Function],
-          "valueContainer": [Function],
-        }
-      }
-      value={null}
-    >
-      <Select
-        allowCreateWhileLoading={false}
-        autoFocus={true}
-        backspaceRemovesValue={true}
-        blurInputOnSelect={true}
-        captureMenuScroll={false}
-        closeMenuOnScroll={false}
-        closeMenuOnSelect={true}
-        components={Object {}}
-        controlShouldRenderValue={true}
-        createOptionPosition="last"
-        defaultInputValue=""
-        defaultMenuIsOpen={false}
-        defaultValue={null}
-        escapeClearsValue={false}
-        filterOption={[Function]}
-        formatCreateLabel={[Function]}
-        formatGroupLabel={[Function]}
-        getNewOptionData={[Function]}
-        getOptionLabel={[Function]}
-        getOptionValue={[Function]}
-        inputValue=""
-        isDisabled={false}
-        isLoading={false}
-        isMulti={false}
-        isOptionDisabled={[Function]}
-        isRtl={false}
-        isSearchable={true}
-        isValidNewOption={[Function]}
-        loadingMessage={[Function]}
-        maxMenuHeight={300}
-        menuIsOpen={false}
-        menuPlacement="bottom"
-        menuPosition="absolute"
-        menuShouldBlockScroll={false}
-        menuShouldScrollIntoView={true}
-        minMenuHeight={140}
-        noOptionsMessage={[Function]}
-        onChange={[Function]}
-        onInputChange={[Function]}
-        onMenuClose={[Function]}
-        onMenuOpen={[Function]}
-        openMenuOnClick={true}
-        openMenuOnFocus={false}
-        options={Array []}
-        pageSize={5}
-        placeholder="Select..."
-        screenReaderStatus={[Function]}
-        styles={
-          Object {
-            "control": [Function],
-            "indicatorsContainer": [Function],
-            "multiValue": [Function],
-            "multiValueLabel": [Function],
-            "multiValueRemove": [Function],
-            "option": [Function],
-            "valueContainer": [Function],
-          }
-        }
-        tabIndex="0"
-        tabSelectsValue={true}
-        value={null}
-      >
-        <SelectContainer
-          clearValue={[Function]}
-          cx={[Function]}
-          getStyles={[Function]}
-          getValue={[Function]}
-          hasValue={false}
-          innerProps={
-            Object {
-              "id": undefined,
-              "onKeyDown": [Function],
-            }
-          }
-          isDisabled={false}
-          isFocused={true}
-          isMulti={false}
-          isRtl={false}
-          options={Array []}
-          selectOption={[Function]}
-          selectProps={
-            Object {
-              "allowCreateWhileLoading": false,
-              "autoFocus": true,
-              "backspaceRemovesValue": true,
-              "blurInputOnSelect": true,
-              "captureMenuScroll": false,
-              "closeMenuOnScroll": false,
-              "closeMenuOnSelect": true,
-              "components": Object {},
-              "controlShouldRenderValue": true,
-              "createOptionPosition": "last",
-              "defaultInputValue": "",
-              "defaultMenuIsOpen": false,
-              "defaultValue": null,
-              "escapeClearsValue": false,
-              "filterOption": [Function],
-              "formatCreateLabel": [Function],
-              "formatGroupLabel": [Function],
-              "getNewOptionData": [Function],
-              "getOptionLabel": [Function],
-              "getOptionValue": [Function],
-              "inputValue": "",
-              "isDisabled": false,
-              "isLoading": false,
-              "isMulti": false,
-              "isOptionDisabled": [Function],
-              "isRtl": false,
-              "isSearchable": true,
-              "isValidNewOption": [Function],
-              "loadingMessage": [Function],
-              "maxMenuHeight": 300,
-              "menuIsOpen": false,
-              "menuPlacement": "bottom",
-              "menuPosition": "absolute",
-              "menuShouldBlockScroll": false,
-              "menuShouldScrollIntoView": true,
-              "minMenuHeight": 140,
-              "noOptionsMessage": [Function],
-              "onChange": [Function],
-              "onInputChange": [Function],
-              "onMenuClose": [Function],
-              "onMenuOpen": [Function],
-              "openMenuOnClick": true,
-              "openMenuOnFocus": false,
-              "options": Array [],
-              "pageSize": 5,
-              "placeholder": "Select...",
-              "screenReaderStatus": [Function],
-              "styles": Object {
-                "control": [Function],
-                "indicatorsContainer": [Function],
-                "multiValue": [Function],
-                "multiValueLabel": [Function],
-                "multiValueRemove": [Function],
-                "option": [Function],
-                "valueContainer": [Function],
-              },
-              "tabIndex": "0",
-              "tabSelectsValue": true,
-              "value": null,
-            }
-          }
-          setValue={[Function]}
+    <p id=\\"aria-selection-event\\">
+      &nbsp;
+    </p>
+    <p id=\\"aria-context\\">
+      &nbsp;  0 results available. Select is focused ,type to refine list, press Down to open the menu,
+    </p>
+  </span>
+  <div class=\\"css-7i0fzi\\">
+    <div class=\\"css-s4h933\\">
+      <div class=\\"css-1492t68\\">
+        Select...
+      </div>
+      <div class=\\"css-rsyb7x\\">
+        <div class
+             style=\\"display: inline-block;\\"
         >
-          <div
-            className="css-10nd86i"
-            onKeyDown={[Function]}
+          <input autocapitalize=\\"none\\"
+                 autocomplete=\\"off\\"
+                 autocorrect=\\"off\\"
+                 id=\\"react-select-4-input\\"
+                 spellcheck=\\"false\\"
+                 tabindex=\\"0\\"
+                 type=\\"text\\"
+                 aria-autocomplete=\\"list\\"
+                 style=\\"box-sizing: content-box; width: 2px; border: 0px; font-size: inherit; opacity: 1; outline: 0; padding: 0px;\\"
+                 value
           >
-            <A11yText
-              aria-live="assertive"
-            >
-              <span
-                aria-live="assertive"
-                className="css-bl6clz"
-              >
-                <p
-                  id="aria-selection-event"
-                >
-                   
-                </p>
-                <p
-                  id="aria-context"
-                >
-                   
-                    0 results available. Select is focused ,type to refine list, press Down to open the menu, 
-                </p>
-              </span>
-            </A11yText>
-            <Control
-              clearValue={[Function]}
-              cx={[Function]}
-              getStyles={[Function]}
-              getValue={[Function]}
-              hasValue={false}
-              innerProps={
-                Object {
-                  "onMouseDown": [Function],
-                  "onTouchEnd": [Function],
-                }
-              }
-              innerRef={[Function]}
-              isDisabled={false}
-              isFocused={true}
-              isMulti={false}
-              isRtl={false}
-              options={Array []}
-              selectOption={[Function]}
-              selectProps={
-                Object {
-                  "allowCreateWhileLoading": false,
-                  "autoFocus": true,
-                  "backspaceRemovesValue": true,
-                  "blurInputOnSelect": true,
-                  "captureMenuScroll": false,
-                  "closeMenuOnScroll": false,
-                  "closeMenuOnSelect": true,
-                  "components": Object {},
-                  "controlShouldRenderValue": true,
-                  "createOptionPosition": "last",
-                  "defaultInputValue": "",
-                  "defaultMenuIsOpen": false,
-                  "defaultValue": null,
-                  "escapeClearsValue": false,
-                  "filterOption": [Function],
-                  "formatCreateLabel": [Function],
-                  "formatGroupLabel": [Function],
-                  "getNewOptionData": [Function],
-                  "getOptionLabel": [Function],
-                  "getOptionValue": [Function],
-                  "inputValue": "",
-                  "isDisabled": false,
-                  "isLoading": false,
-                  "isMulti": false,
-                  "isOptionDisabled": [Function],
-                  "isRtl": false,
-                  "isSearchable": true,
-                  "isValidNewOption": [Function],
-                  "loadingMessage": [Function],
-                  "maxMenuHeight": 300,
-                  "menuIsOpen": false,
-                  "menuPlacement": "bottom",
-                  "menuPosition": "absolute",
-                  "menuShouldBlockScroll": false,
-                  "menuShouldScrollIntoView": true,
-                  "minMenuHeight": 140,
-                  "noOptionsMessage": [Function],
-                  "onChange": [Function],
-                  "onInputChange": [Function],
-                  "onMenuClose": [Function],
-                  "onMenuOpen": [Function],
-                  "openMenuOnClick": true,
-                  "openMenuOnFocus": false,
-                  "options": Array [],
-                  "pageSize": 5,
-                  "placeholder": "Select...",
-                  "screenReaderStatus": [Function],
-                  "styles": Object {
-                    "control": [Function],
-                    "indicatorsContainer": [Function],
-                    "multiValue": [Function],
-                    "multiValueLabel": [Function],
-                    "multiValueRemove": [Function],
-                    "option": [Function],
-                    "valueContainer": [Function],
-                  },
-                  "tabIndex": "0",
-                  "tabSelectsValue": true,
-                  "value": null,
-                }
-              }
-              setValue={[Function]}
-            >
-              <div
-                className="css-7i0fzi"
-                onMouseDown={[Function]}
-                onTouchEnd={[Function]}
-              >
-                <ValueContainer
-                  clearValue={[Function]}
-                  cx={[Function]}
-                  getStyles={[Function]}
-                  getValue={[Function]}
-                  hasValue={false}
-                  isDisabled={false}
-                  isMulti={false}
-                  isRtl={false}
-                  options={Array []}
-                  selectOption={[Function]}
-                  selectProps={
-                    Object {
-                      "allowCreateWhileLoading": false,
-                      "autoFocus": true,
-                      "backspaceRemovesValue": true,
-                      "blurInputOnSelect": true,
-                      "captureMenuScroll": false,
-                      "closeMenuOnScroll": false,
-                      "closeMenuOnSelect": true,
-                      "components": Object {},
-                      "controlShouldRenderValue": true,
-                      "createOptionPosition": "last",
-                      "defaultInputValue": "",
-                      "defaultMenuIsOpen": false,
-                      "defaultValue": null,
-                      "escapeClearsValue": false,
-                      "filterOption": [Function],
-                      "formatCreateLabel": [Function],
-                      "formatGroupLabel": [Function],
-                      "getNewOptionData": [Function],
-                      "getOptionLabel": [Function],
-                      "getOptionValue": [Function],
-                      "inputValue": "",
-                      "isDisabled": false,
-                      "isLoading": false,
-                      "isMulti": false,
-                      "isOptionDisabled": [Function],
-                      "isRtl": false,
-                      "isSearchable": true,
-                      "isValidNewOption": [Function],
-                      "loadingMessage": [Function],
-                      "maxMenuHeight": 300,
-                      "menuIsOpen": false,
-                      "menuPlacement": "bottom",
-                      "menuPosition": "absolute",
-                      "menuShouldBlockScroll": false,
-                      "menuShouldScrollIntoView": true,
-                      "minMenuHeight": 140,
-                      "noOptionsMessage": [Function],
-                      "onChange": [Function],
-                      "onInputChange": [Function],
-                      "onMenuClose": [Function],
-                      "onMenuOpen": [Function],
-                      "openMenuOnClick": true,
-                      "openMenuOnFocus": false,
-                      "options": Array [],
-                      "pageSize": 5,
-                      "placeholder": "Select...",
-                      "screenReaderStatus": [Function],
-                      "styles": Object {
-                        "control": [Function],
-                        "indicatorsContainer": [Function],
-                        "multiValue": [Function],
-                        "multiValueLabel": [Function],
-                        "multiValueRemove": [Function],
-                        "option": [Function],
-                        "valueContainer": [Function],
-                      },
-                      "tabIndex": "0",
-                      "tabSelectsValue": true,
-                      "value": null,
-                    }
-                  }
-                  setValue={[Function]}
-                >
-                  <div
-                    className="css-s4h933"
-                  >
-                    <Placeholder
-                      clearValue={[Function]}
-                      cx={[Function]}
-                      getStyles={[Function]}
-                      getValue={[Function]}
-                      hasValue={false}
-                      isDisabled={false}
-                      isMulti={false}
-                      isRtl={false}
-                      key="placeholder"
-                      options={Array []}
-                      selectOption={[Function]}
-                      selectProps={
-                        Object {
-                          "allowCreateWhileLoading": false,
-                          "autoFocus": true,
-                          "backspaceRemovesValue": true,
-                          "blurInputOnSelect": true,
-                          "captureMenuScroll": false,
-                          "closeMenuOnScroll": false,
-                          "closeMenuOnSelect": true,
-                          "components": Object {},
-                          "controlShouldRenderValue": true,
-                          "createOptionPosition": "last",
-                          "defaultInputValue": "",
-                          "defaultMenuIsOpen": false,
-                          "defaultValue": null,
-                          "escapeClearsValue": false,
-                          "filterOption": [Function],
-                          "formatCreateLabel": [Function],
-                          "formatGroupLabel": [Function],
-                          "getNewOptionData": [Function],
-                          "getOptionLabel": [Function],
-                          "getOptionValue": [Function],
-                          "inputValue": "",
-                          "isDisabled": false,
-                          "isLoading": false,
-                          "isMulti": false,
-                          "isOptionDisabled": [Function],
-                          "isRtl": false,
-                          "isSearchable": true,
-                          "isValidNewOption": [Function],
-                          "loadingMessage": [Function],
-                          "maxMenuHeight": 300,
-                          "menuIsOpen": false,
-                          "menuPlacement": "bottom",
-                          "menuPosition": "absolute",
-                          "menuShouldBlockScroll": false,
-                          "menuShouldScrollIntoView": true,
-                          "minMenuHeight": 140,
-                          "noOptionsMessage": [Function],
-                          "onChange": [Function],
-                          "onInputChange": [Function],
-                          "onMenuClose": [Function],
-                          "onMenuOpen": [Function],
-                          "openMenuOnClick": true,
-                          "openMenuOnFocus": false,
-                          "options": Array [],
-                          "pageSize": 5,
-                          "placeholder": "Select...",
-                          "screenReaderStatus": [Function],
-                          "styles": Object {
-                            "control": [Function],
-                            "indicatorsContainer": [Function],
-                            "multiValue": [Function],
-                            "multiValueLabel": [Function],
-                            "multiValueRemove": [Function],
-                            "option": [Function],
-                            "valueContainer": [Function],
-                          },
-                          "tabIndex": "0",
-                          "tabSelectsValue": true,
-                          "value": null,
-                        }
-                      }
-                      setValue={[Function]}
-                    >
-                      <div
-                        className="css-1492t68"
-                      >
-                        Select...
-                      </div>
-                    </Placeholder>
-                    <Input
-                      aria-autocomplete="list"
-                      autoCapitalize="none"
-                      autoComplete="off"
-                      autoCorrect="off"
-                      cx={[Function]}
-                      getStyles={[Function]}
-                      id="react-select-2-input"
-                      innerRef={[Function]}
-                      isDisabled={false}
-                      isHidden={false}
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      spellCheck="false"
-                      tabIndex="0"
-                      type="text"
-                      value=""
-                    >
-                      <div
-                        className="css-rsyb7x"
-                      >
-                        <AutosizeInput
-                          aria-autocomplete="list"
-                          autoCapitalize="none"
-                          autoComplete="off"
-                          autoCorrect="off"
-                          className=""
-                          disabled={false}
-                          id="react-select-2-input"
-                          injectStyles={true}
-                          inputRef={[Function]}
-                          inputStyle={
-                            Object {
-                              "background": 0,
-                              "border": 0,
-                              "color": "inherit",
-                              "fontSize": "inherit",
-                              "opacity": 1,
-                              "outline": 0,
-                              "padding": 0,
-                            }
-                          }
-                          minWidth={1}
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          spellCheck="false"
-                          tabIndex="0"
-                          type="text"
-                          value=""
-                        >
-                          <div
-                            className=""
-                            style={
-                              Object {
-                                "display": "inline-block",
-                              }
-                            }
-                          >
-                            <input
-                              aria-autocomplete="list"
-                              autoCapitalize="none"
-                              autoComplete="off"
-                              autoCorrect="off"
-                              disabled={false}
-                              id="react-select-2-input"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              spellCheck="false"
-                              style={
-                                Object {
-                                  "background": 0,
-                                  "border": 0,
-                                  "boxSizing": "content-box",
-                                  "color": "inherit",
-                                  "fontSize": "inherit",
-                                  "opacity": 1,
-                                  "outline": 0,
-                                  "padding": 0,
-                                  "width": "2px",
-                                }
-                              }
-                              tabIndex="0"
-                              type="text"
-                              value=""
-                            />
-                            <div
-                              style={
-                                Object {
-                                  "height": 0,
-                                  "left": 0,
-                                  "overflow": "scroll",
-                                  "position": "absolute",
-                                  "top": 0,
-                                  "visibility": "hidden",
-                                  "whiteSpace": "pre",
-                                }
-                              }
-                            />
-                          </div>
-                        </AutosizeInput>
-                      </div>
-                    </Input>
-                  </div>
-                </ValueContainer>
-                <IndicatorsContainer
-                  clearValue={[Function]}
-                  cx={[Function]}
-                  getStyles={[Function]}
-                  getValue={[Function]}
-                  hasValue={false}
-                  isDisabled={false}
-                  isMulti={false}
-                  isRtl={false}
-                  options={Array []}
-                  selectOption={[Function]}
-                  selectProps={
-                    Object {
-                      "allowCreateWhileLoading": false,
-                      "autoFocus": true,
-                      "backspaceRemovesValue": true,
-                      "blurInputOnSelect": true,
-                      "captureMenuScroll": false,
-                      "closeMenuOnScroll": false,
-                      "closeMenuOnSelect": true,
-                      "components": Object {},
-                      "controlShouldRenderValue": true,
-                      "createOptionPosition": "last",
-                      "defaultInputValue": "",
-                      "defaultMenuIsOpen": false,
-                      "defaultValue": null,
-                      "escapeClearsValue": false,
-                      "filterOption": [Function],
-                      "formatCreateLabel": [Function],
-                      "formatGroupLabel": [Function],
-                      "getNewOptionData": [Function],
-                      "getOptionLabel": [Function],
-                      "getOptionValue": [Function],
-                      "inputValue": "",
-                      "isDisabled": false,
-                      "isLoading": false,
-                      "isMulti": false,
-                      "isOptionDisabled": [Function],
-                      "isRtl": false,
-                      "isSearchable": true,
-                      "isValidNewOption": [Function],
-                      "loadingMessage": [Function],
-                      "maxMenuHeight": 300,
-                      "menuIsOpen": false,
-                      "menuPlacement": "bottom",
-                      "menuPosition": "absolute",
-                      "menuShouldBlockScroll": false,
-                      "menuShouldScrollIntoView": true,
-                      "minMenuHeight": 140,
-                      "noOptionsMessage": [Function],
-                      "onChange": [Function],
-                      "onInputChange": [Function],
-                      "onMenuClose": [Function],
-                      "onMenuOpen": [Function],
-                      "openMenuOnClick": true,
-                      "openMenuOnFocus": false,
-                      "options": Array [],
-                      "pageSize": 5,
-                      "placeholder": "Select...",
-                      "screenReaderStatus": [Function],
-                      "styles": Object {
-                        "control": [Function],
-                        "indicatorsContainer": [Function],
-                        "multiValue": [Function],
-                        "multiValueLabel": [Function],
-                        "multiValueRemove": [Function],
-                        "option": [Function],
-                        "valueContainer": [Function],
-                      },
-                      "tabIndex": "0",
-                      "tabSelectsValue": true,
-                      "value": null,
-                    }
-                  }
-                  setValue={[Function]}
-                >
-                  <div
-                    className="css-mik995"
-                  >
-                    <IndicatorSeparator
-                      clearValue={[Function]}
-                      cx={[Function]}
-                      getStyles={[Function]}
-                      getValue={[Function]}
-                      hasValue={false}
-                      isDisabled={false}
-                      isFocused={true}
-                      isMulti={false}
-                      isRtl={false}
-                      options={Array []}
-                      selectOption={[Function]}
-                      selectProps={
-                        Object {
-                          "allowCreateWhileLoading": false,
-                          "autoFocus": true,
-                          "backspaceRemovesValue": true,
-                          "blurInputOnSelect": true,
-                          "captureMenuScroll": false,
-                          "closeMenuOnScroll": false,
-                          "closeMenuOnSelect": true,
-                          "components": Object {},
-                          "controlShouldRenderValue": true,
-                          "createOptionPosition": "last",
-                          "defaultInputValue": "",
-                          "defaultMenuIsOpen": false,
-                          "defaultValue": null,
-                          "escapeClearsValue": false,
-                          "filterOption": [Function],
-                          "formatCreateLabel": [Function],
-                          "formatGroupLabel": [Function],
-                          "getNewOptionData": [Function],
-                          "getOptionLabel": [Function],
-                          "getOptionValue": [Function],
-                          "inputValue": "",
-                          "isDisabled": false,
-                          "isLoading": false,
-                          "isMulti": false,
-                          "isOptionDisabled": [Function],
-                          "isRtl": false,
-                          "isSearchable": true,
-                          "isValidNewOption": [Function],
-                          "loadingMessage": [Function],
-                          "maxMenuHeight": 300,
-                          "menuIsOpen": false,
-                          "menuPlacement": "bottom",
-                          "menuPosition": "absolute",
-                          "menuShouldBlockScroll": false,
-                          "menuShouldScrollIntoView": true,
-                          "minMenuHeight": 140,
-                          "noOptionsMessage": [Function],
-                          "onChange": [Function],
-                          "onInputChange": [Function],
-                          "onMenuClose": [Function],
-                          "onMenuOpen": [Function],
-                          "openMenuOnClick": true,
-                          "openMenuOnFocus": false,
-                          "options": Array [],
-                          "pageSize": 5,
-                          "placeholder": "Select...",
-                          "screenReaderStatus": [Function],
-                          "styles": Object {
-                            "control": [Function],
-                            "indicatorsContainer": [Function],
-                            "multiValue": [Function],
-                            "multiValueLabel": [Function],
-                            "multiValueRemove": [Function],
-                            "option": [Function],
-                            "valueContainer": [Function],
-                          },
-                          "tabIndex": "0",
-                          "tabSelectsValue": true,
-                          "value": null,
-                        }
-                      }
-                      setValue={[Function]}
-                    >
-                      <span
-                        className="css-d8oujb"
-                      />
-                    </IndicatorSeparator>
-                    <DropdownIndicator
-                      clearValue={[Function]}
-                      cx={[Function]}
-                      getStyles={[Function]}
-                      getValue={[Function]}
-                      hasValue={false}
-                      innerProps={
-                        Object {
-                          "aria-hidden": "true",
-                          "onMouseDown": [Function],
-                          "onTouchEnd": [Function],
-                        }
-                      }
-                      isDisabled={false}
-                      isFocused={true}
-                      isMulti={false}
-                      isRtl={false}
-                      options={Array []}
-                      selectOption={[Function]}
-                      selectProps={
-                        Object {
-                          "allowCreateWhileLoading": false,
-                          "autoFocus": true,
-                          "backspaceRemovesValue": true,
-                          "blurInputOnSelect": true,
-                          "captureMenuScroll": false,
-                          "closeMenuOnScroll": false,
-                          "closeMenuOnSelect": true,
-                          "components": Object {},
-                          "controlShouldRenderValue": true,
-                          "createOptionPosition": "last",
-                          "defaultInputValue": "",
-                          "defaultMenuIsOpen": false,
-                          "defaultValue": null,
-                          "escapeClearsValue": false,
-                          "filterOption": [Function],
-                          "formatCreateLabel": [Function],
-                          "formatGroupLabel": [Function],
-                          "getNewOptionData": [Function],
-                          "getOptionLabel": [Function],
-                          "getOptionValue": [Function],
-                          "inputValue": "",
-                          "isDisabled": false,
-                          "isLoading": false,
-                          "isMulti": false,
-                          "isOptionDisabled": [Function],
-                          "isRtl": false,
-                          "isSearchable": true,
-                          "isValidNewOption": [Function],
-                          "loadingMessage": [Function],
-                          "maxMenuHeight": 300,
-                          "menuIsOpen": false,
-                          "menuPlacement": "bottom",
-                          "menuPosition": "absolute",
-                          "menuShouldBlockScroll": false,
-                          "menuShouldScrollIntoView": true,
-                          "minMenuHeight": 140,
-                          "noOptionsMessage": [Function],
-                          "onChange": [Function],
-                          "onInputChange": [Function],
-                          "onMenuClose": [Function],
-                          "onMenuOpen": [Function],
-                          "openMenuOnClick": true,
-                          "openMenuOnFocus": false,
-                          "options": Array [],
-                          "pageSize": 5,
-                          "placeholder": "Select...",
-                          "screenReaderStatus": [Function],
-                          "styles": Object {
-                            "control": [Function],
-                            "indicatorsContainer": [Function],
-                            "multiValue": [Function],
-                            "multiValueLabel": [Function],
-                            "multiValueRemove": [Function],
-                            "option": [Function],
-                            "valueContainer": [Function],
-                          },
-                          "tabIndex": "0",
-                          "tabSelectsValue": true,
-                          "value": null,
-                        }
-                      }
-                      setValue={[Function]}
-                    >
-                      <div
-                        aria-hidden="true"
-                        className="css-1sjym57"
-                        onMouseDown={[Function]}
-                        onTouchEnd={[Function]}
-                      >
-                        <DownChevron>
-                          <Svg
-                            size={20}
-                          >
-                            <svg
-                              aria-hidden="true"
-                              className="css-19bqh2r"
-                              focusable="false"
-                              height={20}
-                              viewBox="0 0 20 20"
-                              width={20}
-                            >
-                              <path
-                                d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                              />
-                            </svg>
-                          </Svg>
-                        </DownChevron>
-                      </div>
-                    </DropdownIndicator>
-                  </div>
-                </IndicatorsContainer>
-              </div>
-            </Control>
+          <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: inherit; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
           </div>
-        </SelectContainer>
-      </Select>
-    </Creatable>
-  </StateManager>
-</CustomMultiSelect>
+        </div>
+      </div>
+    </div>
+    <div class=\\"css-mik995\\">
+      <span class=\\"css-d8oujb\\">
+      </span>
+      <div aria-hidden=\\"true\\"
+           class=\\"css-1sjym57\\"
+      >
+        <svg height=\\"20\\"
+             width=\\"20\\"
+             viewbox=\\"0 0 20 20\\"
+             aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             class=\\"css-19bqh2r\\"
+        >
+          <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+          </path>
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+"
 `;
 
 exports[`<CustomMultiSelect /> matches snapshot with a value 1`] = `
-<StateManager
-  defaultInputValue=""
-  defaultMenuIsOpen={false}
-  defaultValue={
-    Object {
-      "label": "foo",
-      "value": "foo",
-    }
-  }
-  options={
-    Array [
-      Object {
-        "label": "foo",
-        "value": "foo",
-      },
-    ]
-  }
-  styles={
-    Object {
-      "control": [Function],
-      "indicatorsContainer": [Function],
-      "multiValue": [Function],
-      "multiValueLabel": [Function],
-      "multiValueRemove": [Function],
-      "option": [Function],
-      "valueContainer": [Function],
-    }
-  }
-/>
+"
+<div class=\\"css-10nd86i\\">
+  <div class=\\"css-1qcoghz\\">
+    <div class=\\"css-s4h933\\">
+      <div class=\\"css-va7pk8\\">
+        foo
+      </div>
+      <div class=\\"css-rsyb7x\\">
+        <div class
+             style=\\"display:inline-block\\"
+        >
+          <input type=\\"text\\"
+                 autocapitalize=\\"none\\"
+                 autocomplete=\\"off\\"
+                 autocorrect=\\"off\\"
+                 id=\\"react-select-5-input\\"
+                 spellcheck=\\"false\\"
+                 tabindex=\\"0\\"
+                 value
+                 aria-autocomplete=\\"list\\"
+                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+          >
+          <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"css-mik995\\">
+      <span class=\\"css-d8oujb\\">
+      </span>
+      <div aria-hidden=\\"true\\"
+           class=\\"css-1ep9fjw\\"
+      >
+        <svg height=\\"20\\"
+             width=\\"20\\"
+             viewbox=\\"0 0 20 20\\"
+             aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             class=\\"css-19bqh2r\\"
+        >
+          <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+          </path>
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+"
 `;
 
 exports[`<CustomMultiSelect /> matches snapshot with defaults 1`] = `
-<StateManager
-  defaultInputValue=""
-  defaultMenuIsOpen={false}
-  defaultValue={null}
-  styles={
-    Object {
-      "control": [Function],
-      "indicatorsContainer": [Function],
-      "multiValue": [Function],
-      "multiValueLabel": [Function],
-      "multiValueRemove": [Function],
-      "option": [Function],
-      "valueContainer": [Function],
-    }
-  }
-/>
+"
+<div class=\\"css-10nd86i\\">
+  <div class=\\"css-1qcoghz\\">
+    <div class=\\"css-s4h933\\">
+      <div class=\\"css-1492t68\\">
+        Select...
+      </div>
+      <div class=\\"css-rsyb7x\\">
+        <div class
+             style=\\"display:inline-block\\"
+        >
+          <input type=\\"text\\"
+                 autocapitalize=\\"none\\"
+                 autocomplete=\\"off\\"
+                 autocorrect=\\"off\\"
+                 id=\\"react-select-2-input\\"
+                 spellcheck=\\"false\\"
+                 tabindex=\\"0\\"
+                 value
+                 aria-autocomplete=\\"list\\"
+                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+          >
+          <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"css-mik995\\">
+      <span class=\\"css-d8oujb\\">
+      </span>
+      <div aria-hidden=\\"true\\"
+           class=\\"css-1ep9fjw\\"
+      >
+        <svg height=\\"20\\"
+             width=\\"20\\"
+             viewbox=\\"0 0 20 20\\"
+             aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             class=\\"css-19bqh2r\\"
+        >
+          <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+          </path>
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+"
 `;
 
 exports[`<CustomMultiSelect /> matches snapshot with isMulti=true 1`] = `
-<StateManager
-  defaultInputValue=""
-  defaultMenuIsOpen={false}
-  defaultValue={null}
-  isMulti={true}
-  styles={
-    Object {
-      "control": [Function],
-      "indicatorsContainer": [Function],
-      "multiValue": [Function],
-      "multiValueLabel": [Function],
-      "multiValueRemove": [Function],
-      "option": [Function],
-      "valueContainer": [Function],
-    }
-  }
-/>
+"
+<div class=\\"css-10nd86i\\">
+  <div class=\\"css-1qcoghz\\">
+    <div class=\\"css-1tmgesh\\">
+      <div class=\\"css-1492t68\\">
+        Select...
+      </div>
+      <div class=\\"css-rsyb7x\\">
+        <div class
+             style=\\"display:inline-block\\"
+        >
+          <input type=\\"text\\"
+                 autocapitalize=\\"none\\"
+                 autocomplete=\\"off\\"
+                 autocorrect=\\"off\\"
+                 id=\\"react-select-3-input\\"
+                 spellcheck=\\"false\\"
+                 tabindex=\\"0\\"
+                 value
+                 aria-autocomplete=\\"list\\"
+                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+          >
+          <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"css-mik995\\">
+      <span class=\\"css-d8oujb\\">
+      </span>
+      <div aria-hidden=\\"true\\"
+           class=\\"css-1ep9fjw\\"
+      >
+        <svg height=\\"20\\"
+             width=\\"20\\"
+             viewbox=\\"0 0 20 20\\"
+             aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             class=\\"css-19bqh2r\\"
+        >
+          <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+          </path>
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+"
 `;
 
 exports[`<CustomMultiSelect /> matches snapshot with isMulti=true and a value 1`] = `
-<StateManager
-  defaultInputValue=""
-  defaultMenuIsOpen={false}
-  defaultValue={
-    Object {
-      "label": "foo",
-      "value": "foo",
-    }
-  }
-  isMulti={true}
-  options={
-    Array [
-      Object {
-        "label": "foo",
-        "value": "foo",
-      },
-    ]
-  }
-  styles={
-    Object {
-      "control": [Function],
-      "indicatorsContainer": [Function],
-      "multiValue": [Function],
-      "multiValueLabel": [Function],
-      "multiValueRemove": [Function],
-      "option": [Function],
-      "valueContainer": [Function],
-    }
-  }
-/>
+"
+<div class=\\"css-10nd86i\\">
+  <div class=\\"css-1qcoghz\\">
+    <div class=\\"css-1tmgesh\\">
+      <div class=\\"css-1y5uxcf\\">
+        <div class=\\"css-yagan3\\">
+          foo
+        </div>
+        <div class=\\"css-n82uvk\\">
+          <svg height=\\"14\\"
+               width=\\"14\\"
+               viewbox=\\"0 0 20 20\\"
+               aria-hidden=\\"true\\"
+               focusable=\\"false\\"
+               class=\\"css-19bqh2r\\"
+          >
+            <path d=\\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\\">
+            </path>
+          </svg>
+        </div>
+      </div>
+      <div class=\\"css-rsyb7x\\">
+        <div class
+             style=\\"display:inline-block\\"
+        >
+          <input type=\\"text\\"
+                 autocapitalize=\\"none\\"
+                 autocomplete=\\"off\\"
+                 autocorrect=\\"off\\"
+                 id=\\"react-select-6-input\\"
+                 spellcheck=\\"false\\"
+                 tabindex=\\"0\\"
+                 value
+                 aria-autocomplete=\\"list\\"
+                 style=\\"box-sizing:content-box;width:1px;background:0;border:0;font-size:inherit;opacity:1;outline:0;padding:0;color:inherit\\"
+          >
+          <div style=\\"position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre\\">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class=\\"css-mik995\\">
+      <div aria-hidden=\\"true\\"
+           class=\\"css-1ep9fjw\\"
+      >
+        <svg height=\\"20\\"
+             width=\\"20\\"
+             viewbox=\\"0 0 20 20\\"
+             aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             class=\\"css-19bqh2r\\"
+        >
+          <path d=\\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\\">
+          </path>
+        </svg>
+      </div>
+      <span class=\\"css-d8oujb\\">
+      </span>
+      <div aria-hidden=\\"true\\"
+           class=\\"css-1ep9fjw\\"
+      >
+        <svg height=\\"20\\"
+             width=\\"20\\"
+             viewbox=\\"0 0 20 20\\"
+             aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             class=\\"css-19bqh2r\\"
+        >
+          <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+          </path>
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+"
 `;
diff --git a/ui/src/Components/MultiSelect/index.test.js b/ui/src/Components/MultiSelect/index.test.js
index b575edef4..a60fe54d5 100644
--- a/ui/src/Components/MultiSelect/index.test.js
+++ b/ui/src/Components/MultiSelect/index.test.js
@@ -2,6 +2,8 @@ import React from "react";
 
 import { shallow, mount } from "enzyme";
 
+import toDiffableHtml from "diffable-html";
+
 import { MultiSelect } from ".";
 
 const Option = value => ({ label: value, value: value });
@@ -25,19 +27,19 @@ class CustomMultiSelect extends MultiSelect {
 describe("<CustomMultiSelect />", () => {
   it("matches snapshot with defaults", () => {
     const tree = shallow(<CustomMultiSelect />);
-    expect(tree).toMatchSnapshot();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("matches snapshot with isMulti=true", () => {
     const tree = shallow(<CustomMultiSelect isMulti />);
-    expect(tree).toMatchSnapshot();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("matches snapshot when focused", () => {
     // this test is to cover styles state.isFocused conditions
     const tree = mount(<CustomMultiSelect autoFocus />);
     tree.find("input").simulate("focus");
-    expect(tree).toMatchSnapshot();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("matches snapshot with a value", () => {
@@ -47,7 +49,7 @@ describe("<CustomMultiSelect />", () => {
         options={[Option("foo", Option("bar"))]}
       />
     );
-    expect(tree).toMatchSnapshot();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 
   it("matches snapshot with isMulti=true and a value", () => {
@@ -58,6 +60,6 @@ describe("<CustomMultiSelect />", () => {
         options={[Option("foo", Option("bar"))]}
       />
     );
-    expect(tree).toMatchSnapshot();
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
   });
 });