[HOLD for payment 2024-12-07] [HOLD for payment 2024-12-05] iOS - Expense - Tapping Save button (from Merchant page) for the second time returns to BNP

[IuliiaHerets]

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.0.67-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Launch the app.
2. Go to workspace chat.
3. Tap + > Submit expense.
4. Enter amount > Next.
5. Tap Merchant.
6. Enter merchant.
7. Tap Save.
8. Tap Save button again after the keyboard closes (merchant editor exits after delay).

Expected Result:

• Merchant editor will exit instantly after tapping Save button (production behavior).
• App will return to confirmation page when tapping Save button for the second time.

Actual Result:

• Merchant editor does not exit instantly after tapping Save button. It closes the keyboard first and exits after some delay, which allows Save button to be tapped for the second time.
• App returns to BNP when tapping Save button for the second time.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6677216_1732642719040.ScreenRecording_11-27-2024_01-34-51_1.mp4

View all open jobs on GitHub

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.

[melvin-bot]

Triggered auto assignment to @marcaaron (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[ChavdaSachin]

Edited by proposal-police: This proposal was edited at 2024-11-26 19:31:15 UTC.

Proposal

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

iOS - Expense - Tapping Save button (from Merchant page) for the second time returns to BNP

What is the root cause of that problem?

When clicking save button twice, function call for updateMerchant is triggered twice.
And hence updateMerchant function function calls navigateBack() function twice here.

Prior to this addition, when hitting submit button it used to execute onSubmit() on the first go, and as soon as onSubmit() starts executing, formState?.isLoading value turns true and submit function early returns on second execution.

App/src/components/Form/FormProvider.tsx

Line 210 in c4ff235

KeyboardUtils.dismiss().then(() => onSubmit(trimmedStringValues));

But now it is possible to click submit button for the second time until KeyboardUtils.dismiss().then(() => onSubmit(trimmedStringValues)); is executed and hence formstate.isLoading is still false and hence no early return.

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

Now we can include a new local state to to hold information about submission state.
and do trigger early return if isSubmitting is true similar to formState.isLoading

    const [isSubmitting, setIsSubmitting] = useState(false);
    const submit = useCallback(() => {
        // Return early if the form is already submitting to avoid duplicate submission
        if (formState?.isLoading || isSubmitting) {
            return;
        }

        // Prepare values before submitting
        const trimmedStringValues = shouldTrimValues ? ValidationUtils.prepareValues(inputValues) : inputValues;

        // Touches all form inputs, so we can validate the entire form
        Object.keys(inputRefs.current).forEach((inputID) => (touchedInputs.current[inputID] = true));

        // Validate form and return early if any errors are found
        if (!isEmptyObject(onValidate(trimmedStringValues))) {
            return;
        }

        // Do not submit form if network is offline and the form is not enabled when offline
        if (network?.isOffline && !enabledWhenOffline) {
            return;
        }
        setIsSubmitting(true);
        KeyboardUtils.dismiss().then(() => onSubmit(trimmedStringValues));
    }, [enabledWhenOffline, formState?.isLoading, inputValues, network?.isOffline, onSubmit, onValidate, shouldTrimValues,isSubmitting]);

App/src/components/Form/FormProvider.tsx

Lines 188 to 211 in c4ff235

	const submit = useCallback(() => {
	// Return early if the form is already submitting to avoid duplicate submission
	if (formState?.isLoading) {
	return;
	}
	// Prepare values before submitting
	const trimmedStringValues = shouldTrimValues ? ValidationUtils.prepareValues(inputValues) : inputValues;
	// Touches all form inputs, so we can validate the entire form
	Object.keys(inputRefs.current).forEach((inputID) => (touchedInputs.current[inputID] = true));
	// Validate form and return early if any errors are found
	if (!isEmptyObject(onValidate(trimmedStringValues))) {
	return;
	}
	// Do not submit form if network is offline and the form is not enabled when offline
	if (network?.isOffline && !enabledWhenOffline) {
	return;
	}
	KeyboardUtils.dismiss().then(() => onSubmit(trimmedStringValues));
	}, [enabledWhenOffline, formState?.isLoading, inputValues, network?.isOffline, onSubmit, onValidate, shouldTrimValues]);

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[mountiny]

@ChavdaSachin can you please point what PR caused this regression from the checklist?

[marcaaron]

Yes, I appreciate the investigation. But I am unsure about this proposal and would like to understand the root cause.

[marcaaron]

My guess would be this PR #52392

[marcaaron]

Specifically this stuff:

https://github.com/margelo/expensify-app-fork/blob/84175de2f85e89cee967b3f9c73153e115620a53/src/utils/keyboard.ts#L1-L33

Maybe the handler is slow or something. But it's pretty much a guess.

[mountiny]

@kirillzyusko @c3024 could you please investigate this flow for a fix? this is in standalone app too so you should be able to test

[ChavdaSachin]

Yes this is coming from #52392.
Specifically from this line
https://github.com/margelo/expensify-app-fork/blob/84175de2f85e89cee967b3f9c73153e115620a53/src/components/Form/FormProvider.tsx#L210

[ChavdaSachin]

Updated Proposal
Added root cause and improvement around it.

@marcaaron could you take a look at my updated proposal, I could raise a quick fix.

Result

Screen.Recording.2024-11-27.at.3.15.01.AM.mov

[marcaaron]

Yes, let's give some time to @kirillzyusko first since it is a regression.

[kirillzyusko]

I agree with proposal from @ChavdaSachin

Two things that I would do differently:

• for isSubmitting I would use useRef (to avoid unnecessary re-renders);
• we need to set the variable back to false in KeyboardUtils.dismiss().then(() => { /*.set ref/state to false here */ onSubmit(trimmedStringValues); });

@ChavdaSachin will you fix this problem? Or should I fix it because it was my changes that introduced a regression?

[ChavdaSachin]

@ChavdaSachin will you fix this problem?

I would be happy to fix this

[kirillzyusko]

@ChavdaSachin then I'm happy to approve your proposal. Is there anything else required from my side?

[ChavdaSachin]

As of now it's pretty straightforward, but I will let you know if I face any further complications.

[ChavdaSachin]

I have got it working

[ChavdaSachin]

just testing on all the platforms
And raising PR in few minutes

[mountiny]

@ChavdaSachin Nice, please feel free to make a draft

[kirillzyusko]

@IuliiaHerets I also discovered that a problem with double navigations happens on:

• Settings -> Profile -> Date of birth
• Settings -> Profile -> Phone number (you can close keyboard and then press submit)
• Settings -> Profile -> Address

[mountiny]

CPing the fix, thanks @kirillzyusko

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.67-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] fix: do not call submit function twice if user clicks fast #53227

If no regressions arise, payment will be issued on 2024-12-05. 🎊

For reference, here are some details about the assignees on this issue:

• @kirillzyusko does not require payment (Contractor)
• @c3024 requires payment (Needs manual offer from BZ)

[melvin-bot]

@c3024 @strepanier03 @c3024 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.68-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] fix: do not call submit function twice if user clicks fast #53227

If no regressions arise, payment will be issued on 2024-12-07. 🎊

For reference, here are some details about the assignees on this issue:

• @kirillzyusko does not require payment (Contractor)
• @c3024 requires payment (Needs manual offer from BZ)

[melvin-bot]

@c3024 @strepanier03 @c3024 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[mountiny]

This is confirmed as fixed @c3024 can you pelase complete the checklist?

[c3024]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on both staging and production
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: NA. This was identified in regression testing and the blocker was fixed by offending PR author.

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

Test:

1. Launch the app.
2. Go to workspace chat.
3. Tap + > Submit expense.
4. Enter amount > Next.
5. Tap Merchant.
6. Enter merchant.
7. Tap Save.
8. Tap Save button again after the keyboard closes.
9. You should be redirected to the previous screen.

Do we agree 👍 or 👎

[mountiny]

I dont think we need to add a regression test specifically for this, the QA will most likely catch some bug in normal testing

[mountiny]

Given this came from a PR @c3024 reviewed and the author fixed it, I think we can just close it, thanks!