[HOLD for payment 2024-08-09] [$250] Expensify Card - Hitting Enter on limit amount page does not proceed to the next page

@adelekennedy

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.6-1
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

Go to staging.new.expensify.com
Go to workspace settings > Expensify Card (enable in More features)
Click Issue new card
Proceed to Step 4 - Set a limit
Enter an amount, then hit Enter (keyboard)

Expected Result:

Hitting Enter on limit amount page will proceed to the next page

Actual Result:

Hitting Enter on limit amount page does not proceed to the next page

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6538919_1720701047945.20240711_202859.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0131bf3ff1bba82181
Upwork Job ID: 1812597871244092170
Last Price Increase: 2024-07-21
Automatic offers:

rayane-djouah | Reviewer | 103253113
nyomanjyotisa | Contributor | 103253115

Issue Owner

Current Issue Owner: @adelekennedy

@srikarparsi

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

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

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

@srikarparsi

@srikarparsi FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

We think that this bug might be related to #wave-collect - Release 2

Proposal

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

Hitting Enter on limit amount page does not proceed to the next page

What is the root cause of that problem?

Default disablePressOnEnter here is true

App/src/components/Form/FormWrapper.tsx

Line 66 in 105dce5

disablePressOnEnter = true,

We don't set disablePressOnEnter on FormProvider here

App/src/pages/workspace/card/issueNew/LimitStep.tsx

Lines 80 to 90 in 105dce5

    
           <FormProvider 
        
               formID={ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM} 
        
               // TODO: change the submitButtonText to 'common.confirm' when editing and navigate to ConfirmationStep 
        
               submitButtonText={translate('common.next')} 
        
               onSubmit={submit} 
        
               style={[styles.flex1]} 
        
               submitButtonStyles={[styles.mh5, styles.mt0]} 
        
               submitFlexEnabled={false} 
        
               enabledWhenOffline 
        
               validate={validate} 
        
           >

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

Add disablePressOnEnter={false} on <FormProvider> here

What alternative solutions did you explore? (Optional)

Proposal

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

Hitting Enter on limit amount page does not proceed to the next page

What is the root cause of that problem?

We don't pass disablePressOnEnter={false} into FormProvider as in other pages like RatePage, WorkspaceNewRoomPage, ...

App/src/pages/workspace/card/issueNew/LimitStep.tsx

Line 80 in 105dce5

<FormProvider

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

Pass disablePressOnEnter={false} into FormProvider here

App/src/pages/workspace/card/issueNew/LimitStep.tsx

Line 80 in 105dce5

<FormProvider

What alternative solutions did you explore? (Optional)

Proposal updated

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

@nyomanjyotisa

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

allow press on enter on limit amount page #46177

If no regressions arise, payment will be issued on 2024-08-09. 🎊

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

@nyomanjyotisa requires payment automatic offer (Contributor)
@rayane-djouah requires payment automatic offer (Reviewer)

@rayane-djouah

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@rayane-djouah] The PR that introduced the bug has been identified. Link to the PR:
[@rayane-djouah] 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:
[@rayane-djouah] 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:
[@rayane-djouah] Determine if we should create a regression test for this bug.
[@rayane-djouah] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@adelekennedy] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@rayane-djouah

Payments made! @rayane-djouah just the checklist here!

The PR that introduced the bug has been identified. Link to the PR: [No QA] Card flow screens #44376
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: https://github.com/Expensify/App/pull/44376/files#r1712720155
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: N/A
Determine if we should create a regression test for this bug. Yes
If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

General regression test steps for forms:

Open the app.
Navigate to any page that contains a form.
Focus on a non-multiline input field and enter text.
Press the Enter key on the keyboard.
Verify that pressing the enter key submits the form.

Regression test steps specific to this bug (The form on limit amount page):

Go to workspace settings > Expensify Card (enable in More features).
Click Issue new card.
Proceed to Step 4 - Set a limit.
Enter an amount, then press the Enter key on the keyboard.
Verify that hitting Enter on limit amount page will proceed to the next page.

Do we agree 👍 or 👎

@srikarparsi

makes sense to me! @srikarparsi any additional thoughts on the steps above?

Nope, the steps look good to me as well!

Navigation Menu

Repository navigation

[HOLD for payment 2024-08-09] [$250] Expensify Card - Hitting Enter on limit amount page does not proceed to the next page #45269

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

43 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<FormProvider
	formID={ONYXKEYS.FORMS.ISSUE_NEW_EXPENSIFY_CARD_FORM}
	// TODO: change the submitButtonText to 'common.confirm' when editing and navigate to ConfirmationStep
	submitButtonText={translate('common.next')}
	onSubmit={submit}
	style={[styles.flex1]}
	submitButtonStyles={[styles.mh5, styles.mt0]}
	submitFlexEnabled={false}
	enabledWhenOffline
	validate={validate}
	>

[HOLD for payment 2024-08-09] [$250] Expensify Card - Hitting Enter on limit amount page does not proceed to the next page #45269

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jul 11, 2024

github-actions commented on Jul 11, 2024

lanitochka17 commented on Jul 11, 2024

lanitochka17 commented on Jul 11, 2024

nyomanjyotisa commented on Jul 11, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

nkdengineer commented on Jul 11, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

nyomanjyotisa commented on Jul 11, 2024

43 remaining items

melvin-bot commented on Aug 2, 2024

melvin-bot commented on Aug 2, 2024

melvin-bot commented on Aug 2, 2024

adelekennedy commented on Aug 9, 2024

rayane-d commented on Aug 10, 2024

adelekennedy commented on Aug 12, 2024

srikarparsi commented on Aug 13, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions