[PAID] [$250] Web - Settings is opened on the left with a conversation opened on the right

[IuliiaHerets]

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: v9.0.36-1
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Login to staging.new.expensify.com
2. Navigate to settings
3. Click on status button at the top of the settings
4. With the status modal opening at the right, click on save more than once without setting a status

Expected Result:

The modal to edit status is closed.

Actual Result:

Settings is opened on the left and a conversation is opened on the right.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6606512_1726571253654.bandicam_2024-09-17_13-43-32-991.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021836565276008929567
• Upwork Job ID: 1836565276008929567
• Last Price Increase: 2024-09-19
• Automatic offers:
• ahmedGaber93 | Reviewer | 104190278
• Krishna2323 | Contributor | 104190279

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

@strepanier03 FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Krishna2323]

Proposal


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

Web - Settings is opened on the left with a conversation opened on the right

What is the root cause of that problem?

Interaction manager is used to navigate back and due to this user can click multiple times until the navigation happes.

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

Lines 113 to 115 in 2190f62

	navigateBackToPreviousScreenTask.current = InteractionManager.runAfterInteractions(() => {
	navigateBackToPreviousScreen();
	});

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


We should call navigateBackToPreviousScreenTask.current?.cancel(); before navigateBackToPreviousScreen(); at both places.

What alternative solutions did you explore? (Optional)

We can return early from updateStatus & clearStatus if navigateBackToPreviousScreenTask.current is true.

Result

[BhuvaneshPatil]

Proposal

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

Web - Settings is opened on the left with a conversation opened on the right
Precisely, when we close the modal we should be on settings page, but it takes to report details page when we click it twice consecutively.

What is the root cause of that problem?

When we click multiple times this code block executes multiple times

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

Lines 113 to 115 in 2190f62

	navigateBackToPreviousScreenTask.current = InteractionManager.runAfterInteractions(() => {
	navigateBackToPreviousScreen();
	});

So it first takes us to - profile page, next time to report page

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

We should wrap the submit callback in singleExecution.

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

Lines 167 to 176 in 2190f62

	<FormProvider
	formID={ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM}
	style={[styles.flexGrow1, styles.flex1]}
	ref={formRef}
	submitButtonText={translate('statusPage.save')}
	submitButtonStyles={[styles.mh5, styles.flexGrow1]}
	onSubmit={updateStatus}
	validate={validateForm}
	enabledWhenOffline
	>

const {singleExecution} = useSingleExecution()

            <FormProvider
                formID={ONYXKEYS.FORMS.SETTINGS_STATUS_SET_FORM}
                style={[styles.flexGrow1, styles.flex1]}
                ref={formRef}
                submitButtonText={translate('statusPage.save')}
                submitButtonStyles={[styles.mh5, styles.flexGrow1]}
                onSubmit={singleExecution(updateStatus)}
                validate={validateForm}
                enabledWhenOffline
            >

We can do similar changes for other callbacks as well.

What alternative solutions did you explore? (Optional)

[daledah]

Proposal

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

• Settings is opened on the left and a conversation is opened on the right.

What is the root cause of that problem?

• When clicking on "Save" button on status page, we call updateStatus which will navigateBackToPreviousScreen(). But the navigateBackToPreviousScreen() is called with runAfterInteractions:

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

Lines 113 to 115 in 2190f62

	navigateBackToPreviousScreenTask.current = InteractionManager.runAfterInteractions(() => {
	navigateBackToPreviousScreen();
	});

• So, the status page modal is not closed immediately, so user can click on it multiple time, which leads to navigateBackToPreviousScreen() are called multiple times as well.

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

• We can remove InteractionManager.runAfterInteractions because it's unnecessary and causes a UX issue where the modal doesn't close immediately, unlike other pages in the app. Therefore:

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

Lines 129 to 131 in 2190f62

	navigateBackToPreviousScreenTask.current = InteractionManager.runAfterInteractions(() => {
	navigateBackToPreviousScreen();
	});

will be:

                navigateBackToPreviousScreen();

• Similar with clearStatus function.

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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