fix: move logic to MenuItem

Author: truph01

src/components/MenuItem.tsx

@@ -1,6 +1,6 @@
 import type {ImageContentFit} from 'expo-image';
 import type {ReactElement, ReactNode, Ref} from 'react';
-import React, {useMemo, useRef} from 'react';
+import React, {useEffect, useMemo, useRef} from 'react';
 import type {GestureResponderEvent, Role, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
@@ -618,6 +618,18 @@ function MenuItem({
     const {isExecuting} = useMenuItemGroupState() ?? {};
     const {singleExecution, waitForNavigate} = useMenuItemGroupActions() ?? {};
     const popoverAnchor = useRef<View>(null);
+    const pressableRef = useRef<View>(null);
+    useEffect(() => {
+        const element = pressableRef.current;
+        if (interactive || !element || typeof HTMLElement === 'undefined' || !(element instanceof HTMLElement) || typeof element.onclick === 'undefined') {
+            return;
+        }
+        // React Native Web's Pressable always attaches an onClick handler to the DOM element.
+        // TalkBack on Android web uses the presence of a click event listener to determine whether
+        // an element is clickable and announces "double tap to activate" even for non-interactive elements.
+        // Removing the onclick property prevents TalkBack from treating the element as clickable.
+        element.onclick = null;
+    }, [interactive]);
     const deviceHasHoverSupport = hasHoverSupport();
     const isCompactMenu = useIsCompactMenu();
     const isCompactPopoverItem = isCompactMenu && !isSmallScreenWidth && !shouldIgnoreCompactStyle;
@@ -861,7 +873,7 @@ function MenuItem({
                                 }
                                 disabledStyle={shouldUseDefaultCursorWhenDisabled && [styles.cursorDefault]}
                                 disabled={disabled || isExecuting}
-                                ref={mergeRefs(ref, popoverAnchor)}
+                                ref={mergeRefs(ref, popoverAnchor, pressableRef)}
                                 role={interactive ? role : undefined}
                                 accessibilityLabel={accessibilityLabelWithContextMenuHint}
                                 accessibilityHint={accessibilityHint}

src/components/MenuItemWithTopDescription.tsx

@@ -1,8 +1,6 @@
-import React, {useEffect, useRef} from 'react';
-import type {View} from 'react-native';
+import React from 'react';
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
 import useTheme from '@hooks/useTheme';
-import mergeRefs from '@libs/mergeRefs';
 import MenuItem from './MenuItem';
 import type {MenuItemProps} from './MenuItem';
 
@@ -18,24 +16,11 @@ function MenuItemWithTopDescription({highlighted, outerWrapperStyle, ref, ...pro
         highlightColor: theme.messageHighlightBG,
         itemEnterDelay: 0,
     });
-    const pressableRef = useRef<View>(null);
-    useEffect(() => {
-        const element = pressableRef.current;
-        if (props.interactive || !element || typeof HTMLElement === 'undefined' || !(element instanceof HTMLElement) || typeof element.onclick === 'undefined') {
-            return;
-        }
-        // React Native Web's Pressable always attaches an onClick handler to the DOM element.
-        // TalkBack on Android web uses the presence of a click event listener to determine whether
-        // an element is clickable and announces "double tap to activate" even for non-interactive elements.
-        // Removing the onclick property prevents TalkBack from treating the element as clickable.
-        element.onclick = null;
-    }, [props.interactive]);
-
     return (
         <MenuItem
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            ref={mergeRefs(ref, pressableRef)}
+            ref={ref}
             shouldShowBasicTitle
             shouldShowDescriptionOnTop
             outerWrapperStyle={highlighted ? highlightedOuterWrapperStyle : outerWrapperStyle}