[Payment due 03-04][$500] Menu - Pin & Delete request appear on Receipt image when quickly tap on receipt and 3-Dot menu

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.16-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team
Slack conversation: @

Action Performed:

1. Navigate to New dot app as Employee
2. Go to workspace chat> create Scan request
3. On detail page tap receipt and 3-Dot menu in a quick manner

Expected Result:

The receipt should be open and no 3-Dot menu should be open

Actual Result:

3-Dot menu (Pin & Delete request) from detail page appear on Receipt image when quickly tap on receipt and 3-Dot menu

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6324744_1703317651951.az_recorder_20231222_204456.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ea7a6ca457ab8814
• Upwork Job ID: 1738519644108128256
• Last Price Increase: 2024-01-06
• Automatic offers:
• c3024 | Contributor | 28106449

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ea7a6ca457ab8814

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @c3024 (External)

[shahinyan11]

Proposal

Please re-state the problem that we are trying to solve in this issue.

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

What is the root cause of that problem?

The root cause is that the Receipt image view and 3-dot menu are modals. The modals always open on top of screen in react native and the last opened modal will be on top

What changes do you think we should make in order to solve the problem?

I think would be better if we use one component for displaying any modals in root of project . But in this case, we can fix the problem with the following steps.

1. Add call willAlertModalBecomeVisible(true) in this function
2. Add this call willAlertModalBecomeVisible(false); in this function
3. Use getModalState function or wrap ThreeDotsMenu component in withOnyx to access to modal state in component

export default withOnyx({
    modal: {
        key: ONYXKEYS.MODAL,
    },
})(ThreeDotsMenu);

4. Change this function like below

const showPopoverMenu = () => {
        if (!modal.willAlertModalBecomeVisible) {
            setPopupMenuVisible(true);
        }
};

What alternative solutions did you explore? (Optional)

We can add another key in Onyx.modal like willAlertModalBecomeVisible and use it to avoid using the key which seems to be for modal alert only

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The three-dot menu shows on the receipt image attachment page.

What is the root cause of that problem?

This issue happens because of a delay. If the three dots menu shows after we are navigated to the receipt image attachment page, then we will see the menu on that page. We have faced a similar issue before here. Basically the same root cause.

What changes do you think we should make in order to solve the problem?

The solution also will be the same as #29379, we just need to apply it to the three-dot menu.

First, close the menu when the screen blurs.

useFocusEffect(
    useCallback(() => {
        return () => hidePopoverMenu();
    }, []),
);

Next, pass the focused state to the popover isVisible prop.

const isFocused = useIsFocused();
isVisible={isPopupMenuVisible && isFocused}

Optionally, prevent the press when the screen is not focused.

onPress={() => {
    if (!isFocused) return;
    ....
})

(it's optional because so far, we already have a singleExecution apply to BaseGenericPressable which disables the pressable when an interaction is happening, including the navigation transition)

(this issue can happen on every usage of modal, to fix it globally, we can apply the fix to BaseModal, we will call onClose when the screen blurs)

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

3-Dot menu (Pin & Delete request) from detail page appear on Receipt image when quickly tap on receipt and 3-Dot menu

What is the root cause of that problem?

If we click receipt image and 3 dot menu quickly, the receipt image will be opened and then 3 dot menu will be opened on top of it, and currently we don't have any logic to prevent 3 dot menu that are behind modal from being opened on top of the modal.

What changes do you think we should make in order to solve the problem?

We should use similar approach as this PR that fixes a similar issue. Basically if the three dots menu is behind a modal, its popover should not be visible.

1. Connect to ONYXKEYS.MODAL here

export default withOnyx({
    modal: {
        key: ONYXKEYS.MODAL,
    },
})(ThreeDotsMenu);

2. If the three dots menu is behind a modal, hide the popover if it's currently opened
   (We need to check !shouldOverlay below because if shouldOverlay is true, that means the current three dots itself is inside a modal: AttachmentModal)

const isBehindModal = modal.willAlertModalBecomeVisible && !shouldOverlay;

useEffect(() => {
    if (isBehindModal && isPopupMenuVisible) {
        hidePopoverMenu();
    }
}, [isBehindModal, isPopupMenuVisible]);

3. Add isBehindModal to the visible condition as well

isVisible={isPopupMenuVisible && !isBehindModal}

4. We can optionally add || isBehindModal to the disabled condition here

This is basically the same approach already used in this PR for another component, just that in here we relies on the modal visibility rather than screen focus. This is a global fix that makes sure no such issue like this will occur again for the three dots menu, and rely on existing values/lifecycle of willAlertModalBecomeVisible rather than manipulating its lifecycle to workaround the race conditions as suggested in the above proposal, which unfortunately still doesn't work if pressing the receipt image and 3 dot very quickly.

What alternative solutions did you explore? (Optional)

The shouldOverlay name is a bit vague and can be considered renaming to isInModal for clarity.

We can consider relying on modal.isVisible (or both willAlertModalBecomeVisible and isVisible)

[c3024]

I find this extremely difficult to reproduce on my device and emulator. I am not able to quickly press the three dot menu after pressing on the receipt. Any tips to consistently reproduce this?