Remove didMount to stop auto focus on PasswordForm by Enragedsaturday · Pull Request #7090 · Expensify/App

Enragedsaturday · 2022-01-07T22:45:34Z

Details

Hidden password element was pulling focus, and accepting any text input prior to focusing on login form (email). Added a check to see if the component is visible before pulling focus on mount, added same to the login form as per maintainer request on main issue.

Fixed Issues

$ #7199

$ #7133

$ #7058

$ #7090

Tests

Tested on Web, iOS, and Android

Make sure app is on sign on page with the "phone or email" input and not password input.
Check that on initial load focus is on login text input. If not type characters on keyboard. (If it is pull focus and type in characters on keyboard)
Submit and the password component will display.
Ensure the password component does not have the characters you typed in on the previous screen when focus was not on the login component.

[ ✓] Verify that no errors appear in the JS console

QA Steps

Make sure app is on sign on page with the "phone or email" input and not password input.
Check that on initial load focus is on login text input. If not type characters on keyboard. (If it is pull focus and type in characters on keyboard)
Submit and the password component will display.
Ensure the password component does not have the characters you typed in on the previous screen when focus was not on the login component.

[ ✓] Verify that no errors appear in the JS console

Tested On

[ ✓] Web
[ ✓] Mobile Web
[✓ ] Desktop
[ ✓] iOS
[ ✓] Android

Screenshots

Web

New-Expensify.mp4

Mobile Web

New-Expensify.1.mp4

iOS

Simulator.Screen.Recording.-.iPhone.13.-.2022-01-07.at.16.48.49.mp4

Android

androidExpensify.mp4

Desktop

Screen.Recording.2022-01-07.at.5.41.24.PM.mov

github-actions · 2022-01-07T22:45:49Z

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

Enragedsaturday · 2022-01-07T22:47:10Z

I have read the CLA Document and I hereby sign the CLA

rushatgabhane · 2022-01-07T22:50:35Z

@marcochavezf can you please approve the gh actions workflow? thanks!

rushatgabhane

Looks good. Suggested some changes.

rushatgabhane · 2022-01-08T21:50:08Z


    componentDidMount() {
-        if (!this.input) {
+        if (!this.input || !this.props.isVisible) {


Any reason not to check !canFocusInputOnScreenFocus() over here?
Not doing that causes this jarring keyboard bug when you launch the app in the password/login screen.

screen-20220109-004443_2.mp4

Ah I see, you had asked about this in the issue.

The !canFocusInputOnScreenFocus() is only present on the login form and prevents the autofocus on touch screen devices. It seems counterintuitive to the current solution.

I still think we should keep it in both screens. Because once you open the keyboard on login screen, the keyboard stays open on password screen too. And it avoids the keyboard bug.

Thoughts?

@rushatgabhane it was never present on the password form but I agree, it should be. Not to make this more complex then it needs to be but the whole intent of the didMount function is autofocus, and it is now being excluded from the most common use cases (all of mobile). That bug is only present on android, and could be addressed on android with platform specific code. I'll edit the current pr and wait for your feedback.

Good point. Then the question is do we want to autofocus on login page for mobile? Because the current user flow is good imo.

If yes, we'll create a new issue for it.

I'm gonna start a discussion on it on slack. Feel free to join the community if you haven't already and give your input.

Generally agreed. I sent two emails to join slack this past week and haven't gotten an invite yet.

rushatgabhane

@marcochavezf PR is ready for review 😃 Tests well on all platforms.

marcochavezf · 2022-01-12T21:42:52Z

Thank you @Enragedsaturday for creating this PR and thanks @rushatgabhane for reviewing and testing! 😀 The PR also looks good to me, I'm going to merge it once the unit tests are fixed https://github.com/Expensify/Expensify/issues/191675.

Enragedsaturday · 2022-01-12T21:48:11Z

@marcochavezf Thanks. I'm unaware of how to fix the failing test "Decrypt OSbotify GPG Key". I've requested an invite to Slack twice now but haven't gotten an invite sent yet.

rushatgabhane · 2022-01-12T22:03:50Z

@Enragedsaturday merge main into this branch, that should fix OSBotify issue.

I'll ask around about the Slack invite, apologies!

rushatgabhane · 2022-01-12T22:06:58Z

thanks @rushatgabhane for reviewing and testing!

Cheers! 😃

rushatgabhane · 2022-01-12T22:31:32Z

@Enragedsaturday can you please email contributors@expensify.com again and include your Upwork profile?
That should get you the invite.

OSBotify · 2022-01-13T16:04:15Z

@Enragedsaturday, Great job getting your first Expensify/App pull request over the finish line! 🎉

I know there's a lot of information in our contributing guidelines, so here are some points to take note of 📝:

Now that your first PR has been merged, you can be hired for another issue. Once you've completed a few issues, you may be eligible to work on more than one job at a time.
Once your PR is deployed to our staging servers, it will undergo quality assurance (QA) testing. If we find that it doesn't work as expected or causes a regression, you'll be responsible for fixing it. Typically, we would revert this PR and give you another chance to create a similar PR without causing a regression.
Once your PR is deployed to production, we start a 7-day timer ⏰. After it has been on production for 7 days without causing any regressions, then we pay out the Upwork job. 💰

So it might take a while before you're paid for your work, but we typically post multiple new jobs every day, so there's plenty of opportunity. I hope you've had a positive experience contributing to this repo! 😊

OSBotify · 2022-01-13T16:04:44Z

✋ 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 · 2022-01-14T20:00:53Z

🚀 Deployed to staging by @marcochavezf in version: 1.1.29-6 🚀

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

kbecciv · 2022-01-16T02:46:27Z

@Enragedsaturday The issue #7199 still reproduced during the Regression.

Enragedsaturday · 2022-01-16T02:53:45Z

Not sure what happened there. Only fixed issue #7090.

rushatgabhane · 2022-01-16T02:54:01Z

@kbecciv not a regression imho. If I'm not wrong, #7199 was linked to this PR after it was merged.

We didn't test for it or attempt to fix it in this PR 😃

rushatgabhane · 2022-01-16T03:02:47Z

@Enragedsaturday can you please undo changes to fixed issues? This PR might fix multiple issues and it needs to be there until that's verified.

Enragedsaturday · 2022-01-16T03:09:25Z

@rushatgabhane

My bad. Fixed it.

OSBotify · 2022-01-18T22:03:25Z

🚀 Deployed to production by @roryabraham in version: 1.1.30-3 🚀

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

Remove didMount to stop auto focus on PasswordForm

cc0d124

Enragedsaturday requested a review from a team as a code owner January 7, 2022 22:45

MelvinBot requested review from marcochavezf and rushatgabhane and removed request for a team January 7, 2022 22:45

check if form is visible to auto focus

5f07db8

rushatgabhane reviewed Jan 8, 2022

View reviewed changes

check if touchscreen for password form

2e97032

rushatgabhane approved these changes Jan 9, 2022

View reviewed changes

Merge branch 'Expensify:main' into main

1417a78

marcochavezf approved these changes Jan 13, 2022

View reviewed changes

marcochavezf merged commit 13b7b0b into Expensify:main Jan 13, 2022

parasharrajat mentioned this pull request Jan 14, 2022

IOS - Log in - Keypad not dismissed after creating new account #7199

Closed

OSBotify mentioned this pull request Jan 14, 2022

Deploy Checklist: New Expensify 2022-01-14 #7235

Closed

66 tasks

botify mentioned this pull request Jan 18, 2022

[HOLD for payment 2022-01-25] Password field is pre-filled with the text entered on the previous screen - Reported by @adeel0202 #7058

Closed

rushatgabhane mentioned this pull request Jan 19, 2022

Password doesn't autofill when using lastpass and the autofill icon disappears - Reported by @rushatgabhane #7092

Closed

Conversation

Enragedsaturday commented Jan 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

Web

Mobile Web

iOS

Android

Desktop

Uh oh!

github-actions Bot commented Jan 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Enragedsaturday commented Jan 7, 2022

Uh oh!

rushatgabhane commented Jan 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rushatgabhane left a comment

Choose a reason for hiding this comment

Uh oh!

rushatgabhane Jan 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rushatgabhane Jan 8, 2022

Choose a reason for hiding this comment

Uh oh!

Enragedsaturday Jan 8, 2022

Choose a reason for hiding this comment

Uh oh!

rushatgabhane Jan 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Enragedsaturday Jan 9, 2022

Choose a reason for hiding this comment

Uh oh!

rushatgabhane left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marcochavezf commented Jan 12, 2022

Uh oh!

Enragedsaturday commented Jan 12, 2022

Uh oh!

rushatgabhane commented Jan 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rushatgabhane commented Jan 12, 2022

Uh oh!

rushatgabhane commented Jan 12, 2022

Uh oh!

OSBotify commented Jan 13, 2022

Uh oh!

OSBotify commented Jan 13, 2022

Uh oh!

OSBotify commented Jan 14, 2022

Uh oh!

kbecciv commented Jan 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Enragedsaturday commented Jan 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rushatgabhane commented Jan 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rushatgabhane commented Jan 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Enragedsaturday commented Jan 16, 2022

Uh oh!

OSBotify commented Jan 18, 2022

Uh oh!

Enragedsaturday commented Jan 7, 2022 •

edited

Loading

github-actions Bot commented Jan 7, 2022 •

edited

Loading

rushatgabhane commented Jan 7, 2022 •

edited

Loading

rushatgabhane Jan 8, 2022 •

edited

Loading

rushatgabhane Jan 8, 2022 •

edited

Loading

rushatgabhane left a comment •

edited

Loading

rushatgabhane commented Jan 12, 2022 •

edited

Loading

kbecciv commented Jan 16, 2022 •

edited

Loading

Enragedsaturday commented Jan 16, 2022 •

edited

Loading

rushatgabhane commented Jan 16, 2022 •

edited

Loading

rushatgabhane commented Jan 16, 2022 •

edited

Loading