Settings-"I understand this is not reversible" checkbox is unchecked when tapping back

[mitarachim]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.1.32-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: #59911
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Windows 10/ Chrome, Samsung S23FE/ Android 14
App Component: User Settings

Action Performed:

1. Go to https://staging.new.expensify.com
2. Log in with any Expensifail account
3. Go to Account > Security
4. Click on Merge account
5. Enter the email of another account that has enabled 2FA
6. Mark "I understand this is not reversible" checkbox
7. Click Next
8. Wait 30 seconds
9. Click "Didn't receive a magic code?"
10. Click the app back button

Expected Result:

The phone or email field is filled, and the "I understand this is not reversible" checkbox is checked.

Actual Result:

The "I understand this is not reversible" checkbox is unchecked when tapping the app back button.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6811101_1745446185338.Checkbox_is_unchecked.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @adelekennedy (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.

[Shahidullah-Muffakir]

Proposal

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

When a user tries to merge accounts, enters their information (email and consent checkbox), and then navigates away from the screen (by clicking "Didn't receive a magic code?" and then going back), the consent checkbox is no longer checked.

What is the root cause of that problem?

The root cause is that while the email field value is preserved using a local state variable (useState) from the params, the consent checkbox state is not persisted in the same way.

App/src/pages/settings/Security/MergeAccounts/AccountDetailsPage.tsx

Line 58 in a857e00

const [email, setEmail] = useState(params?.email ?? '');

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

We should add similar state management for the consent checkbox:

1. Add a local state variable to track the checkbox state:

const [isConsentChecked, setIsConsentChecked] = useState(params?.isConsentChecked ?? false);

2. Update the consent checkbox InputWrapper to use this state:

<InputWrapper
    style={[styles.mt8]}
    InputComponent={CheckboxWithLabel}
    inputID={INPUT_IDS.CONSENT}
    label={translate('mergeAccountsPage.accountDetails.notReversibleConsent')}
    aria-label={translate('mergeAccountsPage.accountDetails.notReversibleConsent')}
    value={isConsentChecked}
    onValueChange={(newValue) => setIsConsentChecked(newValue)}
/>

3.When navigating to other screens, pass this state as a parameter:

App/src/pages/settings/Security/MergeAccounts/AccountDetailsPage.tsx

Line 75 in a857e00

return Navigation.navigate(ROUTES.SETTINGS_MERGE_ACCOUNTS_MAGIC_CODE.getRoute(email));

Navigation.navigate(ROUTES.SETTINGS_MERGE_ACCOUNTS_MAGIC_CODE.getRoute(email, isConsentChecked));

Update the deps arrray as well.

4.Update the navigation routes to accept and pass through this parameter.

App/src/ROUTES.ts

Lines 208 to 211 in a857e00

	SETTINGS_MERGE_ACCOUNTS_MAGIC_CODE: {
	route: 'settings/security/merge-accounts/:login/magic-code',
	getRoute: (login: string) => `settings/security/merge-accounts/${encodeURIComponent(login)}/magic-code` as const,
	},

as:

    SETTINGS_MERGE_ACCOUNTS_MAGIC_CODE: {
        route: 'settings/security/merge-accounts/:login/magic-code/:isConsentChecked?',
        getRoute: (login: string, isConsentChecked: boolean = false) => `settings/security/merge-accounts/${encodeURIComponent(login)}/magic-code/${isConsentChecked}` as const,
    },

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

Screen.Recording.2025-04-24.at.6.53.07.AM.mov

[thelullabyy]

Proposal

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

The "I understand this is not reversible" checkbox becomes unchecked when the user taps the app's back button.

What is the root cause of that problem?

• In the following locations:

  • MergeResultPage.tsx#L256
  • AccountValidatePage.tsx#L140

  The Navigation.goBack() function is used without the {compareParams: false} option. As a result, routes like /settings/security/merge-accounts and /settings/security/merge-accounts?email= are treated as different, causing the back button to open a new screen rather than returning to the existing one. This leads to the checkbox state being lost and appearing unchecked.

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

• Update all relevant Navigation.goBack() calls to include the {compareParams: false} option. This ensures that route comparisons ignore query parameter differences, enabling a proper return to the previously mounted screen and preserving the checkbox state.
• Or, we can use Navigation.goback().

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• N/A

What alternative solutions did you explore? (Optional)

• In here and here, we can also update the email param of the url before navigating.

[Krishna2323]

Proposal

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

• Settings-"I understand this is not reversible" checkbox is unchecked when tapping back

What is the root cause of that problem?

• When we press the back button from the magic code input page, the user's email is added to the params, which reinitializes the component's state and causes the checkbox to become unselected, as if it was untouched.

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

• We should add a checkbox state based on the email in the params in AccountDetailsPage, and pass the default value to CheckboxWithLabel.

const [isCheckboxChecked] = useState(!!params?.email);

// Prop to `CheckboxWithLabel`
defaultValue={isCheckboxChecked}

• Optional: Instead of useState we can use useMemo.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

N/A

Result

Monosnap.screencast.2025-04-26.02-33-06.mp4

[melvin-bot]

@adelekennedy Eep! 4 days overdue now. Issues have feelings too...

[adelekennedy]

I can reproduce this but this is very low priority fix imo and I can't imagine a real world user complaining about this

[thelullabyy]

@adelekennedy This bug is caused because there are two similar screens are added. Could you help check these steps in mWeb:

1. Go to https://staging.new.expensify.com/
2. Log in with any Expensifail account
3. Go to Account > Security
4. Click on Merge account
5. Enter the email of another account
6. Mark "I understand this is not reversible" checkbox
7. Click Next
8. Click app's back button
9. Click device back button
10. Verify that there is a similar screen appears in step 9. It is bug

[thelullabyy]

@adelekennedy could you help check my concern above when you have a chance?