From 1938f59060e80c6df2eae634cf9ced033c4ae2ab Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 1 Oct 2020 15:04:45 +1000
Subject: [PATCH] Added creatable option to Select

---
 src/components/Select.js              | 12 +++++++++---
 src/components/map/MapSettings.js     |  2 ++
 src/components/token/TokenSettings.js |  1 +
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Select.js b/src/components/Select.js
index 44b0dad..e7ed8f7 100644
--- a/src/components/Select.js
+++ b/src/components/Select.js
@@ -1,17 +1,19 @@
 import React from "react";
 import ReactSelect from "react-select";
+import Creatable from "react-select/creatable";
 import { useThemeUI } from "theme-ui";
 
-function Select(props) {
+function Select({ creatable, ...props }) {
   const { theme } = useThemeUI();
 
   function getColor(state) {
     return state.isDisabled ? theme.colors.gray : theme.colors.text;
   }
 
+  const Component = creatable ? Creatable : ReactSelect;
+
   return (
-    <ReactSelect
-      isSearchable={false}
+    <Component
       styles={{
         menu: (provided, state) => ({
           ...provided,
@@ -39,6 +41,10 @@ function Select(props) {
             color: state.isDisabled ? theme.colors.gray : theme.colors.primary,
           },
         }),
+        input: (provided, state) => ({
+          ...provided,
+          color: getColor(state),
+        }),
       }}
       theme={(t) => ({
         ...t,
diff --git a/src/components/map/MapSettings.js b/src/components/map/MapSettings.js
index 7d0b376..01233de 100644
--- a/src/components/map/MapSettings.js
+++ b/src/components/map/MapSettings.js
@@ -108,6 +108,7 @@ function MapSettings({
                   { value: "hex", label: "Hex (Coming Soon)" },
                 ]}
                 isOptionDisabled={(option) => option.value === "hex"}
+                isSearchable={false}
               />
             </Box>
             <Flex sx={{ width: "50%", flexDirection: "column" }} ml={2}>
@@ -152,6 +153,7 @@ function MapSettings({
                     (option.value !== "original" &&
                       !map.resolutions[option.value])
                   }
+                  isSearchable={false}
                 />
               </Box>
               <Label sx={{ width: "50%" }} ml={2}>
diff --git a/src/components/token/TokenSettings.js b/src/components/token/TokenSettings.js
index 8fb2012..a01817d 100644
--- a/src/components/token/TokenSettings.js
+++ b/src/components/token/TokenSettings.js
@@ -62,6 +62,7 @@ function TokenSettings({
                 onChange={(option) =>
                   onSettingsChange("category", option.value)
                 }
+                isSearchable={false}
               />
             </Box>
             <Flex sx={{ flexGrow: 1, alignItems: "center" }} ml={2}>