From bc77c261fb3100651a70a319654af58a8ae846d4 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Mon, 29 Jan 2024 09:17:09 -0800
Subject: [PATCH] Set initial focus when opening the PosePicker to the Styles
 tab

Later on I'll want to control the picker to open to Styles if a style
is selected, or to Expressions if not.
---
 .../wardrobe-2020/WardrobePage/PosePicker.js  | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
index 05e6064c..db302d73 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
@@ -186,6 +186,11 @@ function PosePicker({
                 flexDirection={{ base: "column", md: "column-reverse" }}
                 paddingY="2"
                 gap="2"
+                // HACK: To only apply `initialFocusRef` to the selected input
+                // in the *active* tab, we just use `isLazy` to only *render*
+                // the active tab. We could also watch the tab state and set
+                // the ref accordingly!
+                isLazy
               >
                 <SupportOnly>
                   <TabList paddingX="2" paddingY="0">
@@ -226,7 +231,10 @@ function PosePicker({
                     </SupportOnly>
                   </TabPanel>
                   <TabPanel paddingX="4" paddingY="0">
-                    <StyleSelect altStyles={altStyles} />
+                    <StyleSelect
+                      altStyles={altStyles}
+                      initialFocusRef={initialFocusRef}
+                    />
                     <StyleExplanation />
                   </TabPanel>
                 </TabPanels>
@@ -564,11 +572,13 @@ function PosePickerEmptyExplanation() {
   );
 }
 
-function StyleSelect({ altStyles }) {
+function StyleSelect({ altStyles, initialFocusRef }) {
   const [selectedStyleId, setSelectedStyleId] = React.useState(null);
 
   const defaultStyle = { id: null, adjectiveName: "Default" };
 
+  const styles = [defaultStyle, ...altStyles];
+
   return (
     <Flex
       as="form"
@@ -578,24 +588,20 @@ function StyleSelect({ altStyles }) {
       padding="4px"
       overflow="auto"
     >
-      <StyleOption
-        altStyle={defaultStyle}
-        checked={selectedStyleId == null}
-        onChange={setSelectedStyleId}
-      />
-      {altStyles.map((altStyle) => (
+      {styles.map((altStyle) => (
         <StyleOption
           key={altStyle.id}
           altStyle={altStyle}
           checked={selectedStyleId === altStyle.id}
           onChange={setSelectedStyleId}
+          inputRef={selectedStyleId === altStyle.id ? initialFocusRef : null}
         />
       ))}
     </Flex>
   );
 }
 
-function StyleOption({ altStyle, checked, onChange }) {
+function StyleOption({ altStyle, checked, onChange, inputRef }) {
   const theme = useTheme();
   const selectedBorderColor = useColorModeValue(
     theme.colors.green["600"],
@@ -622,6 +628,7 @@ function StyleOption({ altStyle, checked, onChange }) {
             value={altStyle.id}
             checked={checked}
             onChange={(e) => onChange(altStyle.id)}
+            ref={inputRef}
           />
           <Flex
             alignItems="center"