[HOLD for payment 2024-02-07] [$500] Search Page opens in Background when delete Reciept Confirm Modal is visible

[m-natarajan]

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.3.83-5
Reproducible in staging?: Yes
Reproducible in production?: Yes
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: @ishpaul777
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697143133874499

Action Performed:

1. Navigate to Distance Request money and request money from Location "X" to Location "Y" in a workspace.
2. Navigation to Money Request Details and Open the Map Image
3. Click on Threedot and Click Delete
4. Navigate to search page using CMD+K

Expected Result:

Attachment modal is also closed.

Actual Result:

Attachment modal remains open and Search Page is open in background.

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Screen.Recording.2023-10-13.at.2.05.30.AM.mov

delete.search.mp4

MacOS: Desktop

Screen.Recording.2023-10-13.at.2.18.06.AM.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f56f13a4f213744d
• Upwork Job ID: 1712594130617856000
• Last Price Increase: 2023-11-02
• Automatic offers:
• aimane-chnaif | Reviewer | 28062789

[melvin-bot]

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

[melvin-bot]

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

[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 - @aimane-chnaif (External)

[zukilover]

Proposal

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

Search Page opens in Background when delete Reciept Confirm Modal is visible

What is the root cause of that problem?

When opening the search modal, closeConfirmModal is only closing the delete confirmation modal itself, and not reading from is isNavigating to trigger the removal of the attachment modal.

App/src/components/AttachmentModal.js

Lines 218 to 221 in cb4b8a0

	const closeConfirmModal = useCallback(() => {
	setIsAttachmentInvalid(false);
	setIsDeleteReceiptConfirmModalVisible(false);
	}, []);

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

Dismiss attachment modal if it is navigating to /search (opening search modal), e.g.:

const closeConfirmModal = useCallback((isNavigating) => {
        setIsAttachmentInvalid(false);
        setIsDeleteReceiptConfirmModalVisible(false);
        if (isNavigating) {
            Navigation.dismissModal(props.report.reportID);
        }
    }, []);

Result:

modal.mp4

[tienifr]

Proposal

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

Search Page opens in Background when delete Reciept Confirm Modal is visible

What is the root cause of that problem?

When the modal is open, we store the onclose function, and clear it when the modal is close. But in this case, we have two modals are open at the same time, so when we open the second modal, onClose on first modal will be replaced by the one of second modal -> When we navigate to search page, just the onClose of second modal is executed

App/src/components/Modal/BaseModal.js

Lines 87 to 90 in be18d1e

	Modal.setCloseModal(onClose);
	} else if (wasVisible && !isVisible) {
	Modal.willAlertModalBecomeVisible(false);
	Modal.setCloseModal(null);

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

As we can see there are more than 1 modal are open at the same time, that why we should store their onClose in the object (closeModals = {key1: func, key2: func,...}).
When the modal is mounted, we will assign the free key to identify this modal (the key that don't have value). If the modal is open, we will store the onClose to this key, and clear it when the modal is close

After users press CMD + K to open search page we will execute Modal.close()

App/src/libs/Navigation/AppNavigator/AuthScreens.js

Line 201 in be18d1e

Modal.close(() => Navigation.navigate(ROUTES.SEARCH));

In Modal.close, we will execute all the onClose functions, then reset this object to empty ({})

[carlosalmonte04]

Proposal

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

Search page opens behind attachment modal. Leaving search page not usable unless the modal is manually closed.

What is the root cause of that problem?

This is a navigation error where the modal screen (ReportAttachments) remains mounted when navigating to the search page. No Navigation.dismissModal is called and due to this the search screen is pushed on top of the ReportAttachment modal.

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

We need to dismiss both, confirmation and attachment modals, in order to accomplish this I propose to create a new function Navigation.dismissAllModals. This new function within Navigation.js would remove any modal screens from the navigation state.

// https://github.com/Expensify/App/blob/main/src/libs/actions/Modal.ts
function closeAll(callback) {
    Navigation.dismissAllModals();
    callback();
}

// https://github.com/Expensify/App/blob/main/src/libs/Navigation/AppNavigator/AuthScreens.js#L201
Modal.closeAll(() => {
    Navigation.navigate(ROUTES.SEARCH);
});

// https://github.com/Expensify/App/blob/main/src/libs/Navigation/Navigation.js
function dismissAllModals() {
    navigationRef.current.dispatch((state) => {
        let newState = {...state};
        newState.routes = removeModalScreens(newState.routes);
        newState.index = newState.routes.length - 1;
        const action = getActionFromState(newState, linkingConfig.config);
        return action;
    });
}

What alternative solutions did you explore? (Optional)

Please also consider this solution. Modal.closeAll can also only remove the 2 top most modals if the user experience is guaranteed to be 2 modals max.

function closeAll(callback: () => void) {
    close(() => {}); // 1 
    Navigation.dismissAllModals(); // 2
    callback();  // navigate
}

[ishpaul777]

I have proposed the exact same solution @tienifr in #27277 (comment) a while ago