[$500] Send money - Enter keypress on amount page triggers pay with expensify popup and displays in corner

[kbecciv]

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: 1.3.84.0
Reproducible in staging?: y
Reproducible in production?: y
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
Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697205384875589

Action Performed:

1. Open the app
2. Click on green plus and click send money
3. Select USD as currency, enter any amount and click Next
4. Select any user
5. Open amount page
6. Click enter and observe that pay with expensify popup is open in top left corner

Expected Result:

App should not trigger pay with expensify popup on enter keypress on amount page

Actual Result:

App triggers pay with expensify popup on enter keypress on amount page and displays it in top left corner

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

windows.chrome.enter.click.triggers.pay.with.expensify.popup.mp4

mac.chrome.enter.on.amount.page.triggers.popup.mov

Recording.4991.mp4

MacOS: Desktop

mac.desktop.enter.amount.page.triggers.popup.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01620c1716cd0baeb7
• Upwork Job ID: 1713208560531128320
• Last Price Increase: 2023-10-14

[abzokhattab]

Proposal

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

Enter keypress on amount page triggers the pay with expensify popup which is present in the prev page

What is the root cause of that problem?

user goes to confimation list then to the amount page then back to the confirmation...
on back from the amount page, the confirmation page opens the same ref

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

enforce fallback route when going back from the amount page so that it respwans the confirmation list page ,,, the same as we are doing in the other request money pages .

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

Line 145 in 2c9c303

Navigation.goBack(ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID));

to

Navigation.goBack(
  ROUTES.MONEY_REQUEST_CONFIRMATION.getRoute(iouType, reportID),
  true
);

POC

Screen.Recording.2023-10-14.at.3.52.06.AM.mov

[melvin-bot]

Triggered auto assignment to @twisterdotcom (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[saranshbalyan-1234]

Proposal

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

Enter keypress on amount page triggers pay with expensify popup and displays in corner

What is the root cause of that problem?

the RCA is that we are passing pressOnEnter here in the settlementButton component here

https://github.com/Expensify/App/blob/fe282b45cb13e01519282ccc023e5bfbd7714158/src/components/MoneyRequestConfirmationList.js#L495-L510

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

We can just remove this prop and enter button functionality will not work anymore

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

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

[bernhardoj]

Proposal

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

Pressing enter on the edit amount page will save the amount but also submit the money request.

What is the root cause of that problem?

This is a regression from #28374 where we allow the enter shortcut event bubble on the amount request form component.

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

Lines 284 to 286 in fe282b4

	<Button
	success
	allowBubble

If we allow a bubble for a keyboard shortcut, it will continue to execute the other registered (same-key) keyboard shortcut callback. For example, if we register 2 enter shortcuts and allow it to bubble on the first shortcut, it will trigger both shortcut callbacks. If we don't allow it to bubble, then only the first shortcut will be executed.

It is to fix this issue on the money request page where we have 2 CTA buttons, 1 on the Manual tab and 1 on the Distance Tab. We want both buttons to be executed when pressing Enter. If we don't allow both, then only the last registered enter shortcut will be executed, that is the Distance tab CTA button.

When we visit the edit amount page and press enter, there will be 2 enter shortcut buttons executed. First is the edit amount Save button and then the "Request $x" button on the confirmation page (remember that we allow bubble on the amount page CTA button) is executed later.

We actually prevent the button from being executed if not focused here,

App/src/components/Button/index.js

Lines 182 to 185 in fe282b4

	if (!validateSubmitShortcut(this.props.isFocused, this.props.isDisabled, this.props.isLoading, e)) {
	return;
	}
	this.props.onPress();

however, pressing the Save of edit amount page will navigate the user back to the confirm page and when the 2nd enter shortcut callback (Request $x) is executed, the confirm page is already focused, so it gets executed.

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

On the edit amount page, we only have 1 CTA button, so it makes sense to not allow the shortcut bubble on edit page.

allowBubble={!isEditing}

[saranshbalyan-1234]

The corner display is will be handled here #29332
We just need to have handle enter function here

[mkhutornyi]

Same root cause as #29051
cc: @eVoloshchak @parasharrajat

[parasharrajat]

Its a duplicate issue.

[twisterdotcom]

Okay, closing as dupe: #29051