From 64ad77ec4944e1eaeed19cbdb5132b7ad338e65d Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 31 Aug 2020 01:32:25 -0700
Subject: [PATCH] focus dropdown when opening support pose picker

Oops, opening the dropdown would auto-focus the left arrow button, because it's now the first focusable element! Make explicit that we want the dropdown instead.
---
 src/app/WardrobePage/PosePicker.js            | 21 ++++++++++---------
 .../WardrobePage/support/PosePickerSupport.js |  4 ++++
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/app/WardrobePage/PosePicker.js b/src/app/WardrobePage/PosePicker.js
index b030d26..09b30a3 100644
--- a/src/app/WardrobePage/PosePicker.js
+++ b/src/app/WardrobePage/PosePicker.js
@@ -63,7 +63,7 @@ function PosePicker({
   onUnlockFocus,
 }) {
   const theme = useTheme();
-  const checkedInputRef = React.useRef();
+  const initialFocusRef = React.useRef();
   const { loading, error, poseInfos } = usePoses(speciesId, colorId, pose);
   const [isInSupportMode, setIsInSupportMode] = useLocalStorage(
     "DTIPosePickerIsInSupportMode",
@@ -111,7 +111,7 @@ function PosePicker({
       returnFocusOnClose
       onOpen={onLockFocus}
       onClose={onUnlockFocus}
-      initialFocusRef={checkedInputRef}
+      initialFocusRef={initialFocusRef}
     >
       {({ isOpen }) => (
         <>
@@ -166,6 +166,7 @@ function PosePicker({
                     colorId={colorId}
                     pose={pose}
                     appearanceId={appearanceId}
+                    initialFocusRef={initialFocusRef}
                     dispatchToOutfit={dispatchToOutfit}
                   />
                 ) : (
@@ -173,7 +174,7 @@ function PosePicker({
                     <PosePickerTable
                       poseInfos={poseInfos}
                       onChange={onChange}
-                      checkedInputRef={checkedInputRef}
+                      initialFocusRef={initialFocusRef}
                     />
                     {numAvailablePoses <= 1 && (
                       <SupportOnly>
@@ -210,7 +211,7 @@ function PosePicker({
   );
 }
 
-function PosePickerTable({ poseInfos, onChange, checkedInputRef }) {
+function PosePickerTable({ poseInfos, onChange, initialFocusRef }) {
   return (
     <table width="100%">
       <thead>
@@ -236,21 +237,21 @@ function PosePickerTable({ poseInfos, onChange, checkedInputRef }) {
             <PoseOption
               poseInfo={poseInfos.happyMasc}
               onChange={onChange}
-              inputRef={poseInfos.happyMasc.isSelected && checkedInputRef}
+              inputRef={poseInfos.happyMasc.isSelected && initialFocusRef}
             />
           </Cell>
           <Cell as="td">
             <PoseOption
               poseInfo={poseInfos.sadMasc}
               onChange={onChange}
-              inputRef={poseInfos.sadMasc.isSelected && checkedInputRef}
+              inputRef={poseInfos.sadMasc.isSelected && initialFocusRef}
             />
           </Cell>
           <Cell as="td">
             <PoseOption
               poseInfo={poseInfos.sickMasc}
               onChange={onChange}
-              inputRef={poseInfos.sickMasc.isSelected && checkedInputRef}
+              inputRef={poseInfos.sickMasc.isSelected && initialFocusRef}
             />
           </Cell>
         </tr>
@@ -262,21 +263,21 @@ function PosePickerTable({ poseInfos, onChange, checkedInputRef }) {
             <PoseOption
               poseInfo={poseInfos.happyFem}
               onChange={onChange}
-              inputRef={poseInfos.happyFem.isSelected && checkedInputRef}
+              inputRef={poseInfos.happyFem.isSelected && initialFocusRef}
             />
           </Cell>
           <Cell as="td">
             <PoseOption
               poseInfo={poseInfos.sadFem}
               onChange={onChange}
-              inputRef={poseInfos.sadFem.isSelected && checkedInputRef}
+              inputRef={poseInfos.sadFem.isSelected && initialFocusRef}
             />
           </Cell>
           <Cell as="td">
             <PoseOption
               poseInfo={poseInfos.sickFem}
               onChange={onChange}
-              inputRef={poseInfos.sickFem.isSelected && checkedInputRef}
+              inputRef={poseInfos.sickFem.isSelected && initialFocusRef}
             />
           </Cell>
         </tr>
diff --git a/src/app/WardrobePage/support/PosePickerSupport.js b/src/app/WardrobePage/support/PosePickerSupport.js
index 8b4d728..3766efb 100644
--- a/src/app/WardrobePage/support/PosePickerSupport.js
+++ b/src/app/WardrobePage/support/PosePickerSupport.js
@@ -17,6 +17,7 @@ function PosePickerSupport({
   colorId,
   pose,
   appearanceId,
+  initialFocusRef,
   dispatchToOutfit,
 }) {
   const { loading, error, data } = useQuery(
@@ -108,6 +109,7 @@ function PosePickerSupport({
         petAppearances={data.petAppearances}
         currentPetAppearance={currentPetAppearance}
         canonicalAppearanceIds={canonicalAppearanceIds}
+        dropdownRef={initialFocusRef}
         dispatchToOutfit={dispatchToOutfit}
       />
       <Metadata
@@ -143,6 +145,7 @@ function PosePickerSupportNavigator({
   petAppearances,
   currentPetAppearance,
   canonicalAppearanceIds,
+  dropdownRef,
   dispatchToOutfit,
 }) {
   const currentIndex = petAppearances.indexOf(currentPetAppearance);
@@ -175,6 +178,7 @@ function PosePickerSupportNavigator({
         size="sm"
         width="auto"
         value={currentPetAppearance.id}
+        ref={dropdownRef}
         onChange={(e) => {
           const id = e.target.value;
           const petAppearance = petAppearances.find((pa) => pa.id === id);