Merge pull request Expensify#79319 from daledah/fix/78944

fix: quickly tapping a workspace row and the 3‑dot button

Author: JS00001

src/components/ThreeDotsMenu/index.tsx

@@ -45,6 +45,7 @@ function ThreeDotsMenu({
     shouldSelfPosition = false,
     threeDotsMenuRef,
     sentryLabel,
+    isContainerFocused = true,
 }: ThreeDotsMenuProps) {
     const [modal] = useOnyx(ONYXKEYS.MODAL, {canBeMissing: true});
 
@@ -100,13 +101,12 @@ function ThreeDotsMenu({
         hidePopoverMenu,
         onThreeDotsPress,
     }));
-
     useEffect(() => {
-        if (!isBehindModal || !isPopupMenuVisible) {
+        if ((!isBehindModal || !isPopupMenuVisible) && isContainerFocused) {
             return;
         }
         hidePopoverMenu();
-    }, [hidePopoverMenu, isBehindModal, isPopupMenuVisible]);
+    }, [hidePopoverMenu, isBehindModal, isPopupMenuVisible, isContainerFocused]);
 
     useLayoutEffect(() => {
         if (!getMenuPosition || !isPopupMenuVisible) {
@@ -166,7 +166,7 @@ function ThreeDotsMenu({
             <PopoverMenu
                 onClose={hidePopoverMenu}
                 onModalHide={() => setRestoreFocusType(undefined)}
-                isVisible={isPopupMenuVisible && !isBehindModal}
+                isVisible={isPopupMenuVisible && !isBehindModal && isContainerFocused}
                 anchorPosition={position ?? anchorPosition ?? {horizontal: 0, vertical: 0}}
                 anchorAlignment={anchorAlignment}
                 onItemSelected={(item) => {

src/components/ThreeDotsMenu/types.ts

@@ -51,6 +51,9 @@ type ThreeDotsMenuProps = WithSentryLabel & {
 
     /** Ref to the menu */
     threeDotsMenuRef?: React.RefObject<{hidePopoverMenu: () => void; isPopupMenuVisible: boolean} | null>;
+
+    /** Whether the menu is focused */
+    isContainerFocused?: boolean;
 };
 
 type ThreeDotsMenuWithOptionalAnchorProps =

src/pages/workspace/WorkspacesListRow.tsx

@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import {Str} from 'expensify-common';
 import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
@@ -126,6 +127,7 @@ function WorkspacesListRow({
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const theme = useTheme();
+    const isFocused = useIsFocused();
     const isNarrow = layoutWidth === CONST.LAYOUT_WIDTH.NARROW;
     const icons = useMemoizedLazyExpensifyIcons(['ArrowRight', 'Hourglass']);
     const illustrations = useMemoizedLazyIllustrations(['Mailbox', 'ShieldYellow']);
@@ -208,6 +210,7 @@ function WorkspacesListRow({
                         <BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
                     </View>
                     <ThreeDotsMenu
+                        isContainerFocused={isFocused}
                         shouldSelfPosition
                         menuItems={menuItems}
                         anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}