[HOLD for payment 2023-10-10] [$500] Request money flow is not proceeded to the next page

[dylanexpensify]

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

---

Issue found when executing PR #26520

Action Performed:

1. Go to staging.new.expensify.com
2. Go to + > Request money
3. Change to the Distance tab.
4. Add waypoints.
5. When the submit button is enabled, Hit Enter on the keyboard.

Expected:

Pressing Enter should submit the Distance request.

Actual:

Enter key submission does not work on Distance Page.

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.62-1

Reproducible in staging?: Yes

Reproducible in production?: No

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

Bug6186267_20230902_234752.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0126a0498c5bbce06a
• Upwork Job ID: 1705231943999688704
• Last Price Increase: 2023-09-22

[melvin-bot]

Current assignee @dylanexpensify is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0126a0498c5bbce06a

[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

[melvin-bot]

Current assignee @dylanexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[dylanexpensify]

related #26588

[ZhenjaHorbach]

On the latest version main and on staging do not reproduce

[parasharrajat]

The issue details are a little off as we added a patch to solve the previous issue which caused a new issue. The issue would be>

1. Distance requests are not submitted with Enter key press.

Steps:

1. Go to staging.new.expensify.com
2. Go to + > Request money
3. Change to the Distance tab.
4. Add waypoints.
5. When the submit button is enabled, Hit Enter on the keyboard.

Expected:
Pressing Enter should submit the Distance request.

Actual:
Enter key submission does not work on Distance Page.

cc: @dylanexpensify

[parasharrajat]

Proposal

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

Pressing the Enter key on the Distance Amount page does not take the user to the next page after the form is enabled.

What is the root cause of that problem?

we have disabled the pressOnEnter on Distance Request page to fix #26588. We should enable it back and fix the root of #26588.

The real root cause of #26588 is explained below:

I analyzed and it seems we are preventing the bubbling of the Enter key event on the Button component.

App/src/components/Button/index.js

Line 186 in 52b1e3e

false,

As all 3 tabs are loaded together, the last mounted button component on DistanceRequest will take precedence in event callbacks when the event is fired from the browser. Because bubbling is disabled, only one handler is called when the same component is mounted multiple times on the page. We never expected multiple CTA buttons on a single page so bubbling was prevented but the tab behave differently thus we need to handle that.

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

The easiest solution to keep pressonEnter as well as fix the issue without causing regression on other pages where Button is used would be to create a new prop on Buttoncomponent called allowBubble(please suggest a better name) and then pass that to the shortcut subscription configuration allowBubble parameter.

App/src/components/Button/index.js

Line 186 in 52b1e3e

false,

We can keep this prop false by default as before and just enable it for two pages DistanceRequest & MoneyRequestAmountForm.

App/src/components/DistanceRequest.js

Line 254 in 52b1e3e

<Button

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

Line 246 in 52b1e3e

<Button

What alternative solutions did you explore? (Optional)

None

[dylanexpensify]

thanks @parasharrajat, updated! @eVoloshchak let's get the proposal reviewed please!

[dylanexpensify]

Bump!

[eVoloshchak]

@parasharrajat's #28022 (comment) looks good to me!
I think we should also apply the same fix to MoneyRequestConfirmationList/SettlementButton, it's the last step of request money flow and it also cannot be submitted by pressing enter

🎀👀🎀 C+ reviewed!

[melvin-bot]

Triggered auto assignment to @johnmlee101, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @eVoloshchak Please request via NewDot manual requests for the Reviewer role ($500)

[melvin-bot]

📣 @parasharrajat Please request via NewDot manual requests for the Contributor role ($500)

[melvin-bot]

@johnmlee101, @eVoloshchak, @parasharrajat, @dylanexpensify Huh... This is 4 days overdue. Who can take care of this?

[parasharrajat]

Update: Looking into the regression issue ATM.

[parasharrajat]

PR Created #30259

[eVoloshchak]

Not overdue, PR is in production

[dylanexpensify]

@eVoloshchak thanks for the update!

[melvin-bot]

@johnmlee101, @eVoloshchak, @parasharrajat, @dylanexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[eVoloshchak]

Not overdue, PR with the fix was deployed to prod on Oct 30

[dylanexpensify]

Should be good now?

[dylanexpensify]

@eVoloshchak to confirm

[parasharrajat]

Yes, the payment date should be 6 Nov here. @dylanexpensify

[melvin-bot]

@johnmlee101, @eVoloshchak, @parasharrajat, @dylanexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@johnmlee101, @eVoloshchak, @parasharrajat, @dylanexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[eVoloshchak]

• The PR that introduced the bug has been identified. Link to the PR: [CP Staging] Fix the Enter on Money request flows #26606. However, I don't think we can call this a regression, the PR description specifically states that Now this means you cannot use Enter to submit the Distance request, however, its a new feature and its going to be used in mobiles right now mainly so this is fine.
• 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: N/A
• A discussion in #expensify-bugs 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: I don't think an additional discussion is needed here

Regression Test Proposal

1. Open the app.
2. Click on the FAB button > Request Money.
3. Select the Manual Tab.
4. Enter an amount.
5. Press Enter on the keyboard.
6. Verify that you are navigated to the next step (contact selector)

Do we agree 👍 or 👎

Also noting that this has caused a regression in #29051

[dylanexpensify]

Payment summary:

• Contributor: @parasharrajat $250
• Contributor+: @eVoloshchak $250

Please apply in Upwork or create a NewDot request!

[JmillsExpensify]

$250 payment approved for @eVoloshchak based on the comment above.

[parasharrajat]

Payment requested as per #28022 (comment)

[JmillsExpensify]

$250 approved for @parasharrajat