Abstract lag in control.isOpen state

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,

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,

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

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.activated
-                  state.focused ||
-                  state.pressed ||
-                  control.isOpen)
               return (
                 <Button
                   label={props.accessibilityLabel}