Fix: Pin & Delete request appear on Receipt image when quickly tap on receipt and 3-Dot menu

src/components/Modal/BaseModal.tsx

@@ -39,6 +39,7 @@ function BaseModal(
         onLayout,
         avoidKeyboard = false,
         children,
+        isPopover = false,
         shouldUseCustomBackdrop = false,
     }: BaseModalProps,
     ref: React.ForwardedRef<View>,
@@ -59,7 +60,7 @@ function BaseModal(
      */
     const hideModal = useCallback(
         (callHideCallback = true) => {
-            Modal.willAlertModalBecomeVisible(false);
+            Modal.willAlertModalBecomeVisible(false, isPopover);
             if (shouldSetModalVisibility) {
                 Modal.setModalVisibility(false);
             }
@@ -71,14 +72,14 @@ function BaseModal(
                 ComposerFocusManager.setReadyToFocus();
             }
         },
-        [shouldSetModalVisibility, onModalHide, fullscreen],
+        [shouldSetModalVisibility, onModalHide, fullscreen, isPopover],
     );
 
     useEffect(() => {
         isVisibleRef.current = isVisible;
         let removeOnCloseListener: () => void;
         if (isVisible) {
-            Modal.willAlertModalBecomeVisible(true);
+            Modal.willAlertModalBecomeVisible(true, isPopover);
             // To handle closing any modal already visible when this modal is mounted, i.e. PopoverReportActionContextMenu
             removeOnCloseListener = Modal.setCloseModal(onClose);
         }
@@ -89,7 +90,7 @@ function BaseModal(
             }
             removeOnCloseListener();
         };
-    }, [isVisible, wasVisible, onClose]);
+    }, [isVisible, wasVisible, onClose, isPopover]);
 
     useEffect(
         () => () => {

src/components/Modal/types.ts

@@ -60,6 +60,9 @@ type BaseModalProps = Partial<ModalProps> & {
      * */
     hideModalContentWhileAnimating?: boolean;
 
+    /** Whether the modal is popover or not */
+    isPopover?: boolean;
+
     /** Should we use a custom backdrop for the modal? (This prevents focus issues on desktop) */
     shouldUseCustomBackdrop?: boolean;
 };

src/components/Popover/index.tsx

@@ -69,6 +69,7 @@ function Popover(props: PopoverWithWindowDimensionsProps) {
                 onLayout={onLayout}
                 animationIn={animationIn}
                 animationOut={animationOut}
+                isPopover
             />,
             document.body,
         );
@@ -100,6 +101,7 @@ function Popover(props: PopoverWithWindowDimensionsProps) {
             onLayout={onLayout}
             animationIn={animationIn}
             animationOut={animationOut}
+            isPopover
         />
     );
 }

src/components/PopoverWithoutOverlay/index.tsx

@@ -59,7 +59,7 @@ function PopoverWithoutOverlay(
             close(anchorRef);
             Modal.onModalDidClose();
         }
-        Modal.willAlertModalBecomeVisible(isVisible);
+        Modal.willAlertModalBecomeVisible(isVisible, true);
 
         return () => {
             if (!removeOnClose) {

src/components/ThreeDotsMenu/index.tsx

@@ -1,6 +1,8 @@
-import React, {useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import type {AnchorAlignment} from '@components/Popover/types';
@@ -14,10 +16,17 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type {AnchorPosition} from '@src/styles';
+import type {Modal} from '@src/types/onyx';
 import type IconAsset from '@src/types/utils/IconAsset';
 
-type ThreeDotsMenuProps = {
+type ThreeDotsMenuOnyxProps = {
+    /** Details about any modals being used */
+    modal: OnyxEntry<Modal>;
+};
+
+type ThreeDotsMenuProps = ThreeDotsMenuOnyxProps & {
     /** Tooltip for the popup icon */
     iconTooltip?: TranslationPaths;
 
@@ -67,12 +76,14 @@ function ThreeDotsMenu({
     shouldOverlay = false,
     shouldSetModalVisibility = true,
     disabled = false,
+    modal = {},
 }: ThreeDotsMenuProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
     const buttonRef = useRef(null);
     const {translate} = useLocalize();
+    const isBehindModal = modal?.willAlertModalBecomeVisible && !modal?.isPopover && !shouldOverlay;
 
     const showPopoverMenu = () => {
         setPopupMenuVisible(true);
@@ -82,6 +93,13 @@ function ThreeDotsMenu({
         setPopupMenuVisible(false);
     };
 
+    useEffect(() => {
+        if (!isBehindModal || !isPopupMenuVisible) {
+            return;
+        }
+        hidePopoverMenu();
+    }, [isBehindModal, isPopupMenuVisible]);
+
     return (
         <>
             <View>
@@ -119,7 +137,7 @@ function ThreeDotsMenu({
             </View>
             <PopoverMenu
                 onClose={hidePopoverMenu}
-                isVisible={isPopupMenuVisible}
+                isVisible={isPopupMenuVisible && !isBehindModal}
                 anchorPosition={anchorPosition}
                 anchorAlignment={anchorAlignment}
                 onItemSelected={hidePopoverMenu}
@@ -134,4 +152,8 @@ function ThreeDotsMenu({
 
 ThreeDotsMenu.displayName = 'ThreeDotsMenu';
 
-export default ThreeDotsMenu;
+export default withOnyx<ThreeDotsMenuProps, ThreeDotsMenuOnyxProps>({
+    modal: {
+        key: ONYXKEYS.MODAL,
+    },
+})(ThreeDotsMenu);

src/libs/actions/Modal.ts

@@ -54,8 +54,8 @@ function setModalVisibility(isVisible: boolean) {
  * Allows other parts of app to know that an alert modal is about to open.
  * This will trigger as soon as a modal is opened but not yet visible while animation is running.
  */
-function willAlertModalBecomeVisible(isVisible: boolean) {
-    Onyx.merge(ONYXKEYS.MODAL, {willAlertModalBecomeVisible: isVisible});
+function willAlertModalBecomeVisible(isVisible: boolean, isPopover = false) {
+    Onyx.merge(ONYXKEYS.MODAL, {willAlertModalBecomeVisible: isVisible, isPopover});
 }
 
 export {setCloseModal, close, onModalDidClose, setModalVisibility, willAlertModalBecomeVisible};

src/types/onyx/Modal.ts

@@ -4,6 +4,8 @@ type Modal = {
 
     /** Indicates if there is a modal currently visible or not */
     isVisible?: boolean;
+
+    isPopover?: boolean;
 };
 
 export default Modal;