From 62c3b9f9c9902e9b3364bf1afcdbb874e306273f Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 7 Jan 2025 14:50:05 -0600
Subject: [PATCH] Abstract lag in control.isOpen state

---
 src/components/Menu/index.tsx      | 6 ++++++
 src/components/Menu/index.web.tsx  | 6 ++++++
 src/components/Menu/types.ts       | 2 ++
 src/view/shell/desktop/LeftNav.tsx | 7 ++-----
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
index 99fb2d127e..10f16dbf9f 100644
--- a/src/components/Menu/index.tsx
+++ b/src/components/Menu/index.tsx
@@ -56,10 +56,16 @@ export function Trigger({children, label, role = 'button'}: TriggerProps) {
     onOut: onPressOut,
   } = useInteractionState()
 
+  const prevControlIsOpen = React.useRef(context.control.isOpen)
+  const open = prevControlIsOpen.current || context.control.isOpen
+  const activated = Boolean(pressed || focused || open)
+  prevControlIsOpen.current = context.control.isOpen
+
   return children({
     isNative: true,
     control: context.control,
     state: {
+      activated,
       hovered: false,
       focused,
       pressed,
diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx
index d1863e478e..3d5d4112d1 100644
--- a/src/components/Menu/index.web.tsx
+++ b/src/components/Menu/index.web.tsx
@@ -119,6 +119,11 @@ export function Trigger({children, label, role = 'button'}: TriggerProps) {
   } = useInteractionState()
   const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
 
+  const prevControlIsOpen = React.useRef(control.isOpen)
+  const open = prevControlIsOpen.current || control.isOpen
+  const activated = Boolean(hovered || focused || open)
+  prevControlIsOpen.current = control.isOpen
+
   return (
     <DropdownMenu.Trigger asChild>
       <RadixTriggerPassThrough>
@@ -127,6 +132,7 @@ export function Trigger({children, label, role = 'button'}: TriggerProps) {
             isNative: false,
             control,
             state: {
+              activated,
               hovered,
               focused,
               pressed: false,
diff --git a/src/components/Menu/types.ts b/src/components/Menu/types.ts
index 44171d42cb..cc0e25028d 100644
--- a/src/components/Menu/types.ts
+++ b/src/components/Menu/types.ts
@@ -50,6 +50,7 @@ export type TriggerChildProps =
         hovered: false
         focused: boolean
         pressed: boolean
+        activated: boolean
       }
       /**
        * We don't necessarily know what these will be spread on to, so we
@@ -78,6 +79,7 @@ export type TriggerChildProps =
          * Native only, `false` on web
          */
         pressed: false
+        activated: boolean
       }
       props: RadixPassThroughTriggerProps & {
         onPress: () => void
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 12f19f68a2..c300418942 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -104,13 +104,10 @@ function ProfileCard() {
       {!isLoading && profile ? (
         <Menu.Root>
           <Menu.Trigger label={_(msg`Switch accounts`)}>
-            {({props, state, control}) => {
+            {({props, state}) => {
               const active =
                 gtTablet && // desktop only
-                (state.hovered ||
-                  state.focused ||
-                  state.pressed ||
-                  control.isOpen)
+                state.activated
               return (
                 <Button
                   label={props.accessibilityLabel}