diff --git a/src/components/ThreeDotsMenu/index.tsx b/src/components/ThreeDotsMenu/index.tsx index 372cf9066ff8..9a34aa635712 100644 --- a/src/components/ThreeDotsMenu/index.tsx +++ b/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({ setRestoreFocusType(undefined)} - isVisible={isPopupMenuVisible && !isBehindModal} + isVisible={isPopupMenuVisible && !isBehindModal && isContainerFocused} anchorPosition={position ?? anchorPosition ?? {horizontal: 0, vertical: 0}} anchorAlignment={anchorAlignment} onItemSelected={(item) => { diff --git a/src/components/ThreeDotsMenu/types.ts b/src/components/ThreeDotsMenu/types.ts index 6617d65b4771..ec38b6074239 100644 --- a/src/components/ThreeDotsMenu/types.ts +++ b/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 = diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx index f25a4f281a80..30bf3330ea74 100644 --- a/src/pages/workspace/WorkspacesListRow.tsx +++ b/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({