[HOLD for payment 2023-10-12] [$500] Request money - Inappropriate Error message show up when going back

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

Action Performed:

1. Click on FAB > Request money
2. Click 'Next' without entering a valid number
3. Notice an error message show up
4. Enter a Valid number and Click on next
5. Click the back button on the manual page to go back to the Request Money page
6. Erase the valid amount entered. Notice an error message shows up

Expected Result:

The error should only show up after the user taps the button again

Actual Result:

An error message shows up

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.73.0
Reproducible in staging?: y
Reproducible in production?: n
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
Notes/Photos/Videos: Any additional supporting documentation

T150.Errormassagegoingback-1.mp4

Recording.4733.mp4

Expensify/Expensify Issue URL:
Issue reported by: @daveSeife
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695514629151899

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0136329907e03b716d
• Upwork Job ID: 1706132442238746624
• Last Price Increase: 2023-09-25
• Automatic offers:
• fedirjh | Reviewer | 26976243
• akinwale | Contributor | 26976246

[OSBotify]

👋 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.

[melvin-bot]

Everybody was OOO, so I assigned 10 random eligible people.

[akinwale]

Proposal

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

In the first step of a manual money request, an invalid amount error message is being displayed when editing the amount after submitting an invalid amount for the first time.

What is the root cause of that problem?

In MoneyRequestAmountForm, the new amount input is being validated upon every change to the amount input.

App/src/pages/iou/steps/MoneyRequestAmountForm.js

Lines 136 to 138 in 4ea4a55

	const checkInvalidAmount = isAmountValid(newAmountWithoutSpaces);
	setIsInvalidAmount(checkInvalidAmount);
	setFormError(checkInvalidAmount ? 'iou.error.invalidAmount' : '');

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

When the amount changes, if there was a previous form error, then set the form error to empty string.

if (formError.trim().length > 0) {
    setFormError('');
}

Then remove the call to setFormError upon every amount change. We can move this to the onBlur handler of the input and / or the handler for when the Next button is clicked.

Adding an onBlur handler would require forwarding the necessary props to BaseTextInputWithCurrencySymbol and AmountTextInput.

What alternative solutions did you explore? (Optional)

None.

[Ollyws]

Expected Result:
Next button should be disabled

This is no longer the expected behaviour, we removed disabling the button in #23712, in favour of adding an error message if the user tries to move to the next screen when an action is required.
More information in #22660

[dukenv0307]

I don't think this is a bug. After the first time the error appear, if the user go back and enter the invalid amount or clear it, the error will appear. It is the expected that is discussed in here #23712

[situchan]

While this is expected behavior, it doesn't look good to make currency and amount input dance whenever error appears/disappears. We can fix position no matter error shows or not so add absolute style to error view.
Anyway, not a deploy blocker.

Screen.Recording.2023-09-24.at.10.37.51.PM.mov

[Ollyws]

@situchan Yeah agreed, the jumping currency input was discussed with the design team in #23712 (comment) but was considered a reasonable trade-off given the alternatives.

[dukenv0307]

@situchan This is a know bug in this PR but it is accepted here #23712 (comment). The problem is the wrap view of text input has style flex:1.

[situchan]

yes I know the root cause but jumping even on web which has enough height

[akinwale]

Actually now, after the first time the error appears, anytime the value is invalid the error will appear.

That's exactly the case I think we need to fix in this issue.

My proposal already tackles this. Basically, the idea is the error will only be displayed on if the button is clicked when the amount is invalid. As soon as the user starts modifying the amount again, the error is cleared, and will not be displayed until the button is clicked again with an empty amount field.

[fedirjh]

cc @Julesssss Since the issue (#22660) that introduced this bug is still in the regression period, should this bug be treated as a regression or as a separate bug?

[Julesssss]

I don't think this case should be treated as a regression personally

[fedirjh]

@akinwale's proposal makes sense to me, and I believe the right solution is to validate errors within the submitAndNavigateToNextPage callback.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @Julesssss is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @fedirjh 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @akinwale 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[akinwale]

@fedirjh My PR is ready for review. Thanks.

[melvin-bot]

🎯 ⚡️ Woah @fedirjh / @akinwale, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @akinwale got assigned: 2023-10-02 09:14:43 Z
• when the PR got merged: 2023-10-03 12:21:14 UTC

On to the next one 🚀

[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 1.3.77-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: invalid amount error message displayed after clearing amount input #28607

If no regressions arise, payment will be issued on 2023-10-12. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

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

• @akinwale requires payment offer (Contributor)
• @fedirjh requires payment offer (Reviewer)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[fedirjh]

BugZero Checklist:

• Link to the PR: Fix Inconsistency in the security page and Request money page #23712
• Determine if we should create a regression test for this bug:

Regression Test Proposal

1. Open newDot
2. Open the global create menu and select Request Money.
3. Select the Manual tab if it is not already active.
4. Click or tap on the Next button without entering any amount.
5. Verify that an error message is displayed.
6. Enter a valid amount.
7. Optionally, click on the Next button to navigate to the next step, and then click on the Back button to navigate to the amount form.
8. Clear the digits from the input until it is empty.
9. Verify that no error message is displayed.
10. Click on the Next button again when the amount field is empty.
11. Verify that an error message is displayed.

• Do we agree 👍 or 👎

[lschurr]

Payment summary:

• Bug reporter: @daveSeife $50
• Contributor: @akinwale $750
• Contributor+: @fedirjh $750

[lschurr]

Payments are made to @akinwale and @fedirjh. I invited you to the job as well @daveSeife - could you accept and apply?

[akinwale]

Payments are made to @akinwale and @fedirjh. I invited you to the job as well @daveSeife - could you accept and apply?

Received. Thanks!

[lschurr]

All payments made. Closing.