[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 contributors@expensify.com 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): applausetester+232803@applause.expensifail.com
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?