From c13c6e7bd85e28fdfab48930411fa3a333b51280 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 1 Feb 2024 06:53:32 -0800
Subject: [PATCH] Remove the isLazy focus-management hack from PosePicker

Now that we're tracking tab state ourselves, it's pretty easy to just
pass the `initialFocusRef` to the right place instead of to both!

This helps switching between the tabs feel a lot smoother, because we
don't have to re-render and fade-in all the poses again.
---
 .../wardrobe-2020/WardrobePage/PosePicker.js      | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
index d654a95e..bbf0b9c2 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
@@ -219,11 +219,6 @@ function PosePicker({
                 gap="2"
                 index={tabIndex}
                 onChange={setTabIndex}
-                // 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
               >
                 <TabList paddingX="2" paddingY="0">
                   <Tab width="50%">Expressions</Tab>
@@ -237,7 +232,9 @@ function PosePicker({
                         colorId={colorId}
                         pose={pose}
                         appearanceId={appearanceId}
-                        initialFocusRef={initialFocusRef}
+                        initialFocusRef={
+                          tabIndex === 0 ? initialFocusRef : null
+                        }
                         dispatchToOutfit={dispatchToOutfit}
                       />
                     ) : (
@@ -245,7 +242,9 @@ function PosePicker({
                         <PosePickerTable
                           poseInfos={poseInfos}
                           onChange={onChangePose}
-                          initialFocusRef={initialFocusRef}
+                          initialFocusRef={
+                            tabIndex === 0 ? initialFocusRef : null
+                          }
                         />
                         {numStandardPoses == 0 && (
                           <PosePickerEmptyExplanation />
@@ -266,7 +265,7 @@ function PosePicker({
                       selectedStyleId={altStyleId}
                       altStyles={altStyles}
                       onChange={onChangeStyle}
-                      initialFocusRef={initialFocusRef}
+                      initialFocusRef={tabIndex === 1 ? initialFocusRef : null}
                     />
                     <StyleExplanation />
                   </TabPanel>