From 741d52175bec3a7743452b74afad8a72e96976e2 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Tue, 30 Jan 2024 06:04:35 -0800
Subject: [PATCH] Open the pose picker to Styles if there's an Alt Style
 applied

---
 .../wardrobe-2020/WardrobePage/PosePicker.js  | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
index 703d7551..d88ba92b 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
@@ -87,11 +87,25 @@ function PosePicker({
   const poseInfos = posesQuery.poseInfos;
   const altStyles = altStylesQuery.data ?? [];
 
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [tabIndex, setTabIndex] = React.useState(0);
+
   const [styleId, setStyleId] = React.useState(null);
   const altStyle = altStyles.find((s) => s.id === styleId);
 
   const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" });
 
+  React.useEffect(() => {
+    // While the popover is open, don't change which tab is open.
+    if (isOpen) {
+      return;
+    }
+
+    // Otherwise, set the tab to Styles if we're wearing an Alt Style, or
+    // Expressions if we're not.
+    setTabIndex(altStyle != null ? 1 : 0);
+  }, [altStyle, isOpen]);
+
   // Resize the Popover when we toggle support mode, because it probably will
   // affect the content size.
   React.useLayoutEffect(() => {
@@ -166,13 +180,19 @@ function PosePicker({
     <Popover
       placement={placement}
       returnFocusOnClose
-      onOpen={onLockFocus}
-      onClose={onUnlockFocus}
+      onOpen={() => {
+        setIsOpen(true);
+        onLockFocus();
+      }}
+      onClose={() => {
+        setIsOpen(false);
+        onUnlockFocus();
+      }}
       initialFocusRef={initialFocusRef}
       isLazy
       lazyBehavior="keepMounted"
     >
-      {({ isOpen }) => (
+      {() => (
         <>
           <PopoverTrigger>
             <PosePickerButton
@@ -192,6 +212,8 @@ function PosePicker({
                 flexDirection={{ base: "column", md: "column-reverse" }}
                 paddingY="2"
                 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