Web/Desktop Press Enter key to go next

[rushatgabhane]

Details

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 or button not disabled)
              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.

Remove redundant event listeners for Enter from BaseModal.
And add pressOnEnter to replicate previous behaviour of ConfirmModal

Fixed Issues

$ #3785

Tests

Request payment

1. Request payment to any user
2. Enter amount and press Enter to go next.
3. Verify that pressing Enter makes the payment request.

Add PayPal.me

1. Settings -> Payments
2. Add PayPal.me
3. Enter user name
4. Verify that pressing Enter adds PayPal account.

Add workspace

1. Click on + icon.
2. Add Workspace
3. Enter workspace name
4. Verify that pressing Enter adds workspace.

Split bill in group chat

1. Go to a group chat
2. Split bill.
3. Enter amount, press Enter to go next.
4. Verify that pressing Enter confirms split.

Workspace Invite Page

1. Go to any workspace
2. Navigate to People tab
3. Click Invite
4. Add the email or phone
5. Verify that pressing Enter invites the user.

QA

Verify that mobile apps don't crash by navigating to the above mentioned pages.

Tested On

• Web
• Desktop

Screenshots

Web

Screencast.from.14-07-21.08_27_42.AM.+03.mp4

Screencast.from.14-07-21.08_33_19.AM.03.mp4

Desktop

[luacmartins]

Looks mostly ok. The displayed amount seems to have some style issues in both iOS and android versions.

[rushatgabhane]

Looks mostly ok. The displayed amount seems to have some style issues in both iOS and android versions.

@luacmartins I locally merged with main, and this issue wasn't there.

This branch (enter-go-next) doesn't modify any styling.
This makes me believe it's a regression from previous commits, and it's fixed in the newer commits.

I think we're good to merge with main, if there isn't any other issue.

[luacmartins]

I agree that it is probably a regression. LGTM, we just need to fix the conflict and we are good to go.

[luacmartins]

Thanks for the fixes! One last comment that I have: pressing enter selects/deselects the first recent contact on Split Bills, is that intended behavior? Should we make it so enter moves the user to the next step if they have other users selected?

Screen.Recording.2021-07-15.at.12.53.51.PM.mov

[rushatgabhane]

Thanks for the fixes! One last comment that I have: pressing enter selects/deselects the first recent contact on Split Bills, is that intended behavior? Should we make it so enter moves the user to the next step if they have other users selected?

Screen.Recording.2021-07-15.at.12.53.51.PM.mov

Yes, that's the intended behaviour.
The page for selecting split participants doesn't really work well with keyboard. The same is true for currency selector.

Both need to be fixed in a seperate issue because of support for arrow keys etc.

[luacmartins]

LGTM! Thanks @rushatgabhane!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[OSBotify]

🚀 Deployed to staging in version: 1.0.78-3🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production in version: 1.0.79-4🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅