From a63dfed09e811c7e2739595c432e02e10d0bc234 Mon Sep 17 00:00:00 2001
From: Sendou <sendou77@gmail.com>
Date: Fri, 13 Mar 2020 14:32:57 +0200
Subject: [PATCH] country input black text when option focused

---
 frontend-react/src/components/elements/Select.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/frontend-react/src/components/elements/Select.tsx b/frontend-react/src/components/elements/Select.tsx
index d50821144..f909221de 100644
--- a/frontend-react/src/components/elements/Select.tsx
+++ b/frontend-react/src/components/elements/Select.tsx
@@ -89,6 +89,12 @@ const Select: React.FC<SelectProps> = ({
     return value
   }
 
+  const getOptionColor = (focused: boolean) => {
+    if (focused) return "black"
+
+    return colorMode === "light" ? "black" : "white"
+  }
+
   return (
     <Box>
       {label && <Label required={required}>{label}</Label>}
@@ -150,6 +156,13 @@ const Select: React.FC<SelectProps> = ({
             background: themeColorHexLighter,
             color: "black",
           }),
+          option: (styles, { data, isDisabled, isFocused, isSelected }) => {
+            return {
+              ...styles,
+              backgroundColor: isFocused ? themeColorHexLighter : undefined,
+              color: getOptionColor(isFocused),
+            }
+          },
         }}
       />
     </Box>