Web/Desktop Press Enter key to go next.

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:

These are the places where this issue is occuring. If you find any more, please comment below.

Request payment

Request payment to any user
Enter amount and press Enter to go next.
Press Enter again on confirm page.

Add PayPal.me

Settings -> Payments
Add PayPal.me
Enter user name
Press Enter to add PayPal account.

Add workspace

Click on + icon.
Add Workspace
Enter workspace name
Press Enter to add workspace.

Split bill in group chat

Go to a group chat
Split bill.
Enter amount, press Enter to go next.
Press Enter to split.

Workspace Invite Page

Go to any workspace
Navigate to People tab
Click Invite
Add the email or phone
Press Enter to invite the user.

Change currency

Will be fixed in a seperate issue.

Expected Result:

Pressing Enter should press the button to go next step.

Actual Result:

Pressing Enter doesn't do anything.

Workaround:

User can click on the button.

Platform:

Where is this issue occurring?

Web ✅
iOS
Android
Desktop App ✅
Mobile Web

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Expensify/Expensify Issue URL:

View all open jobs on Upwork

@muttmuure

Triggered auto assignment to @muttmuure (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

@rushatgabhane

Thanks @rushatgabhane , checking in on the Slack thread to see if we want to address other places we might want to 'fix' this at the same time. Do you know of any others? I can't think of any and I def noticed this one previously

@parasharrajat

From thread.... @parasharrajat recommends:
Yeah, a audit is good. There are few places to look for.

Profile Page.
Add Secondary Login.
Add Paypal me.
Change password.
Sign In page.
Forget password.
Change currency.
Confirm IOU payments. Both Split and Requests.
Add workspace.
Create Group.
Create Chat.

@parasharrajat

@parasharrajat Thanks!

I've done an audit, and updated the issue to reflect the places this is happening.
@mallenexpensify should I proceed with a PR?

@rushatgabhane

Great job @rushatgabhane , that's a clean and clear OP. Can you submit a proposal for how you plan to fix the issue/s then @muttmuure will assign an engineer to review? (I'm OOO all next week.... ) Thanks again!

@muttmuure

Awesome!
@muttmuure here's my proposal 😃

Proposal

Convert the functional component Button to a class component.

Create a new prop pressOnEnter for Button.
If it's true, onPress() is called when Enter key is pressed.

This is done by adding Enter as a keyboard shortcut for onPress() using libs/KeyboardShortcut

componentDidMount() {
    return if pressOnEnter is false

      KeyboardShortcut.subscribe('Enter', () => {
          if (button not disabled etc)
              props.onPress()
      })

}

Unsubscribe on unmount.

For all the pages like request payment, add workspace etc.
Pass the prop pressOnEnter to their buttons, so that onPress() is called when Enter key is pressed.

With this proposal, we can simply pass the prop to make any button be pressed with Enter key.
This'll cleanup IOUAmountPage too.

@tgolen

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

I think the proposal is mostly fine. I would simplify it more to just this:

componentDidMount() {
        KeyboardShortcut.subscribe('Enter', () => {
                props.onPress()
        })
}

I don't think some of the extra code there was really necessary. As far as the naming of the prop, I actually liked pressOnEnter. I don't think bindEnter makes as much intuitive sense (what is being bound to enter and what consequence does that have?). I don't think we need to worry yet about binding any other keys either. Especially not for triggering onPress().

@rushatgabhane

🟢 to move forward @rushatgabhane

Hired in Upwork!

@tgolen

@tgolen reassigning to you, you'll be the one reviewing the incoming PR (assuming this is working, which it should be)

@mallenexpensify

@mallenexpensify It seems PR is already merged and created before proposal Approval.

@parasharrajat

Thanks @parasharrajat , didn't scroll up far enough to see that. It looks like @tgolen wasn't assigned to review the PR because he unassigned himself and our bot/logic wasn't able to find him.

@mallenexpensify

@mallenexpensify I had created a draft PR, and published it when @tgolen approved the proposal.

Apologies for the confusion.

@mallenexpensify

@mallenexpensify Issue can be closed. Merged ~2 weeks ago.

@rushatgabhane

Paid in Upwork and added a $250 bonus (per process update last week) for posting the issue.
One thing before closing....

I found another example of where I think it'd be good to allow for usage of the enter key.

Add additional users to group text

Go to a group chat (command+shift+k is a shortcut)
Type user A name then hit enter when their name is at top.
Type user B name then hit enter when their name is at top.
Observe that User B isn't added to the group chat but replaces User A.
Expected result: User B is added along with User A, and any other additional users.
Bonus - once all users are added, allow to start chat by clicking shift+enter.

Reckon it's likely best if I create a new GH to have this addressed. Maybe create and put a HOLD on it to see if there are other examples we want to add too? @rushatgabhane Any thoughts on the above before I close out this issue?

@mallenexpensify

Thanks!
@mallenexpensify I would've fixed it in this issue itself, but Enter works as intended.

The thing that'll need to be changed is how search works for New Group and that'll need some planning.

Dropped in #expensify-open-source as a feature request https://expensify.slack.com/archives/C01GTK53T8Q/p1628002164119000

Navigation Menu

Repository navigation

Web/Desktop Press Enter key to go next. #3785

Action Performed:

Request payment

Add PayPal.me

Add workspace

Split bill in group chat

Workspace Invite Page

Change currency

Expected Result:

Actual Result:

Workaround:

Platform:

Proposal

5 remaining items

Add additional users to group text

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Web/Desktop Press Enter key to go next. #3785

Description

Action Performed:

Request payment

Add PayPal.me

Add workspace

Split bill in group chat

Workspace Invite Page

Change currency

Expected Result:

Actual Result:

Workaround:

Platform:

Activity

MelvinBot commented on Jun 29, 2021

rushatgabhane commented on Jun 29, 2021

mallenexpensify commented on Jun 29, 2021

mallenexpensify commented on Jun 29, 2021

rushatgabhane commented on Jun 30, 2021

mallenexpensify commented on Jul 2, 2021

rushatgabhane commented on Jul 6, 2021

Proposal

MelvinBot commented on Jul 12, 2021

5 remaining items

tgolen commented on Jul 12, 2021

tgolen commented on Jul 12, 2021

mallenexpensify commented on Jul 13, 2021

mallenexpensify commented on Jul 18, 2021

parasharrajat commented on Jul 18, 2021

mallenexpensify commented on Jul 18, 2021

rushatgabhane commented on Jul 19, 2021

rushatgabhane commented on Aug 3, 2021

mallenexpensify commented on Aug 3, 2021

Add additional users to group text

rushatgabhane commented on Aug 3, 2021

mallenexpensify commented on Aug 3, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions