From 61458aa1acc7455e818179fefe568c4f3cafc693 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Fri, 16 Oct 2026 16:53:43 -0700
Subject: [PATCH] fix(android): menu icons take taps

Menu row icons are React Native views hosted inside the Compose row,
and the host consumes every touch over the glyph, so tapping a
submenu's Back arrow, a chevron, or a check glyph did nothing. The
icon now runs its row's action itself and stays hidden from
accessibility, so the row remains the accessible element.

Co-authored-by: Pixel Perfect <me@pixp.cc>
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .../src/components/ui/MenuPopup.android.tsx   | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/apps/mobile/src/components/ui/MenuPopup.android.tsx b/apps/mobile/src/components/ui/MenuPopup.android.tsx
index 0237e3edf17aa..66a398bc21a81 100644
--- a/apps/mobile/src/components/ui/MenuPopup.android.tsx
+++ b/apps/mobile/src/components/ui/MenuPopup.android.tsx
@@ -8,7 +8,7 @@ import {
   Text,
 } from "@expo/ui/jetpack-compose";
 import { defaultMinSize, padding, size, width } from "@expo/ui/jetpack-compose/modifiers";
-import { View } from "react-native";
+import { Pressable } from "react-native";
 import { resolveScaledTextRole } from "../../lib/appearancePreferences";
 
 import { useAndroidControlSizing } from "./useAndroidControlSizing";
@@ -16,15 +16,23 @@ import { useAppearancePreferences } from "../../features/settings/appearance/App
 import type { MenuPopupProps } from "./MenuPopup";
 import { isAppSymbolName, SymbolView, type AppSymbolName } from "./AppSymbol";
 
+// The glyph is a React Native view hosted in the Compose row, and its native host consumes
+// every touch over it, so the row's onClick never sees a tap on the icon. The glyph runs the
+// row's action itself; the row stays the accessible element.
 function MenuIcon(props: {
   readonly name: AppSymbolName;
+  readonly onPress: () => void;
   readonly destructive?: boolean;
   readonly disabled?: boolean;
 }) {
   const { iconSize } = useAndroidControlSizing();
   return (
     <RNHostView matchContents modifiers={[size(iconSize, iconSize)]}>
-      <View
+      <Pressable
+        accessible={false}
+        focusable={false}
+        disabled={props.disabled}
+        onPress={props.onPress}
         style={{ width: iconSize, height: iconSize }}
         importantForAccessibility="no-hide-descendants"
       >
@@ -40,7 +48,7 @@ function MenuIcon(props: {
                 : "accent-foreground"
           }
         />
-      </View>
+      </Pressable>
     </RNHostView>
   );
 }
@@ -60,7 +68,7 @@ export function MenuPopup(props: MenuPopupProps) {
       {props.parent ? (
         <DropdownMenuItem onClick={props.onBack} modifiers={itemModifiers}>
           <DropdownMenuItem.LeadingIcon>
-            <MenuIcon name="arrow.left" />
+            <MenuIcon name="arrow.left" onPress={props.onBack} />
           </DropdownMenuItem.LeadingIcon>
           <DropdownMenuItem.Text>
             <Text color={foreground} style={{ typography: "bodyLarge", ...body }}>
@@ -88,6 +96,7 @@ export function MenuPopup(props: MenuPopupProps) {
             <DropdownMenuItem.LeadingIcon>
               <MenuIcon
                 name={action.image}
+                onPress={() => props.onPress(action)}
                 destructive={action.attributes?.destructive}
                 disabled={action.attributes?.disabled}
               />
@@ -116,11 +125,19 @@ export function MenuPopup(props: MenuPopupProps) {
           </DropdownMenuItem.Text>
           {(action.subactions?.length ?? 0) > 0 ? (
             <DropdownMenuItem.TrailingIcon>
-              <MenuIcon name="chevron.right" disabled={action.attributes?.disabled} />
+              <MenuIcon
+                name="chevron.right"
+                onPress={() => props.onPress(action)}
+                disabled={action.attributes?.disabled}
+              />
             </DropdownMenuItem.TrailingIcon>
           ) : action.state === "on" ? (
             <DropdownMenuItem.TrailingIcon>
-              <MenuIcon name="checkmark" disabled={action.attributes?.disabled} />
+              <MenuIcon
+                name="checkmark"
+                onPress={() => props.onPress(action)}
+                disabled={action.attributes?.disabled}
+              />
             </DropdownMenuItem.TrailingIcon>
           ) : null}
         </DropdownMenuItem>