[HOLD for payment 2024-06-11] [$250] Tapping outside quickly after clear status leads the user going back to the report screen

[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.4.61-0
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: @dukenv0307
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1712306439703269

Action Performed:

1. Go to Settings > Profile > Status
2. Change the status and save
3. Tapping status again
4. Click on clear status
5. Tapping outside quickly and notice

Expected Result:

The user should keep the side on the profile page

Actual Result:

The user goes back to report screen

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

Add any screenshot/video evidence

Recording.2953.mp4

Screen.Recording.2024-04-05.at.15.35.03.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014d6d259b4d3f1b08
• Upwork Job ID: 1777489376165974016
• Last Price Increase: 2024-04-09
• Automatic offers:
• GandalfGwaihir | Contributor | 0
• nkdengineer | Contributor | 0

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

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

[FitseTLT]

Proposal

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

Tapping outside quickly after clear status leads the user going back to the report screen

What is the root cause of that problem?

B/c we are navigating back here after interaction

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 109 to 110 in ec41a4b

	InteractionManager.runAfterInteractions(() => {
	navigateBackToPreviousScreen();

when we quickly dismiss modal then it will run goBack on that route opening the report screen instead of the intended dismissing of the status modal

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

we should use dismissModal instead of goBack

            Navigation.dismissModal();

Also apply same change here

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Lines 94 to 95 in ec41a4b

	navigateBackToPreviousScreen();
	});

What alternative solutions did you explore? (Optional)

We can also remove the runAfterInteraction and make the navigation happen immediately

[jliexpensify]

Interesting, I can repro but it doesn't take me to a Report - instead I get taken to my Profile screen. Also on v1.4.61-0

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~014d6d259b4d3f1b08

[melvin-bot]

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

[jliexpensify]

I also think this shoudl go in #vip-vsb as it deals with Chat Functionality

[allgandalf]

Proposal

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

We are navigated to the last navigated route before profile if we dismiss model quickly after clearing status

What is the root cause of that problem?

When we call clearStatus after the action is performed it will call navigateBackToPreviousScreen which will call the goBack funciton:

App/src/pages/settings/Profile/CustomStatus/StatusPage.tsx

Line 77 in ec41a4b

const navigateBackToPreviousScreen = useCallback(() => Navigation.goBack(), []);

Now if we have already dismissed the RHP this will take us back to the last accessed route, it can be security tab/preferences/workspaces anything last visited and not limited to reports.

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

We can take help of the isDisplayedInModal function from Navigation:

App/src/libs/Navigation/Navigation.ts

Lines 354 to 355 in ec41a4b

	/** Check if the modal is being displayed */
	function isDisplayedInModal() {

This will help us to Check if the modal is being displayed, if the modal is still displayed then we will call the navigateBackToPreviousScreen function, if not then we won't call the function, this will also help us avoid unnecessary function calls to navigateBackToPreviousScreen, so if the Modal/RHP is open then only we will call the goBack function , otherwise we can simply end the function over there and not execute navigateBackToPreviousScreen.

diff --git a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx
index bb7be4a686..0912e610e7 100644
--- a/src/pages/settings/Profile/CustomStatus/StatusPage.tsx
+++ b/src/pages/settings/Profile/CustomStatus/StatusPage.tsx
@@ -107,7 +107,9 @@ function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps)
         formRef.current?.resetForm({[INPUT_IDS.EMOJI_CODE]: ''});
 
         InteractionManager.runAfterInteractions(() => {
-            navigateBackToPreviousScreen();
+            if (Navigation.isDisplayedInModal()) {
+                navigateBackToPreviousScreen();
+            }
         });
     };
 

What alternative solutions did you explore? (Optional)

N/A