From d59a4948a0cd68e28b09f095ac86f555ad395bc2 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 4 Dec 2020 13:01:39 -0800
Subject: [PATCH] fix species/color dropdown focus bug

Oops, creating a new `SpeciesColorPicker` fn on each render meant that React treated it as a whole new dropdown each time. I've extracted it out into a stable component class, and just pass in the extra props now!

This bug caused changes to kick you out of focus for the dropdown, because it had unmounted and remounted.
---
 src/app/components/SpeciesColorPicker.js | 98 ++++++++++++++----------
 1 file changed, 58 insertions(+), 40 deletions(-)

diff --git a/src/app/components/SpeciesColorPicker.js b/src/app/components/SpeciesColorPicker.js
index 26c490e..21276d1 100644
--- a/src/app/components/SpeciesColorPicker.js
+++ b/src/app/components/SpeciesColorPicker.js
@@ -58,48 +58,8 @@ function SpeciesColorPicker({
   const allSpecies = (meta && [...meta.allSpecies]) || [];
   allSpecies.sort((a, b) => a.name.localeCompare(b.name));
 
-  const backgroundColor = useColorModeValue("white", "gray.600");
-  const borderColor = useColorModeValue("green.600", "transparent");
   const textColor = useColorModeValue("inherit", "green.50");
 
-  const SpeciesColorSelect = ({ isDisabled, isLoading, ...props }) => {
-    const loadingProps = isLoading
-      ? {
-          // Visually the disabled state is the same as the normal state, but
-          // with a wait cursor. We don't expect this to take long, and the flash
-          // of content is rough!
-          opacity: "1 !important",
-          cursor: "wait !important",
-        }
-      : {};
-
-    return (
-      <Select
-        backgroundColor={backgroundColor}
-        color={textColor}
-        size={size}
-        border="1px"
-        borderColor={borderColor}
-        boxShadow="md"
-        width="auto"
-        transition="all 0.25s"
-        _hover={{
-          borderColor: "green.400",
-        }}
-        isInvalid={
-          valids &&
-          speciesId &&
-          colorId &&
-          !pairIsValid(valids, speciesId, colorId)
-        }
-        isDisabled={isDisabled || isLoading}
-        errorBorderColor="red.300"
-        {...props}
-        {...loadingProps}
-      />
-    );
-  };
-
   if ((loadingMeta || loadingValids) && !showPlaceholders) {
     return (
       <Delay ms={5000}>
@@ -191,6 +151,10 @@ function SpeciesColorPicker({
         isLoading={allColors.length === 0}
         isDisabled={isDisabled}
         onChange={onChangeColor}
+        size={size}
+        valids={valids}
+        speciesId={speciesId}
+        colorId={colorId}
       >
         {
           // If the selected color isn't in the set we have here, show the
@@ -218,6 +182,10 @@ function SpeciesColorPicker({
         isLoading={allSpecies.length === 0}
         isDisabled={isDisabled}
         onChange={onChangeSpecies}
+        size={size}
+        valids={valids}
+        speciesId={speciesId}
+        colorId={colorId}
       >
         {
           // If the selected species isn't in the set we have here, show the
@@ -243,6 +211,56 @@ function SpeciesColorPicker({
   );
 }
 
+const SpeciesColorSelect = ({
+  size,
+  valids,
+  speciesId,
+  colorId,
+  isDisabled,
+  isLoading,
+  ...props
+}) => {
+  const backgroundColor = useColorModeValue("white", "gray.600");
+  const borderColor = useColorModeValue("green.600", "transparent");
+  const textColor = useColorModeValue("inherit", "green.50");
+
+  const loadingProps = isLoading
+    ? {
+        // Visually the disabled state is the same as the normal state, but
+        // with a wait cursor. We don't expect this to take long, and the flash
+        // of content is rough!
+        opacity: "1 !important",
+        cursor: "wait !important",
+      }
+    : {};
+
+  return (
+    <Select
+      backgroundColor={backgroundColor}
+      color={textColor}
+      size={size}
+      border="1px"
+      borderColor={borderColor}
+      boxShadow="md"
+      width="auto"
+      transition="all 0.25s"
+      _hover={{
+        borderColor: "green.400",
+      }}
+      isInvalid={
+        valids &&
+        speciesId &&
+        colorId &&
+        !pairIsValid(valids, speciesId, colorId)
+      }
+      isDisabled={isDisabled || isLoading}
+      errorBorderColor="red.300"
+      {...props}
+      {...loadingProps}
+    />
+  );
+};
+
 function getPairByte(valids, speciesId, colorId) {
   // Reading a bit table, owo!
   const speciesIndex = speciesId - 1;