-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove didMount to stop auto focus on PasswordForm #7090
Conversation
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
I have read the CLA Document and I hereby sign the CLA |
@marcochavezf can you please approve the gh actions workflow? thanks! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good. Suggested some changes.
src/pages/signin/PasswordForm.js
Outdated
@@ -55,7 +55,7 @@ class PasswordForm extends React.Component { | |||
} | |||
|
|||
componentDidMount() { | |||
if (!this.input) { | |||
if (!this.input || !this.props.isVisible) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Generally agreed. I sent two emails to join slack this past week and haven't gotten an invite yet.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@marcochavezf PR is ready for review 😃 Tests well on all platforms.
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. |
@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. |
@Enragedsaturday merge main into this branch, that should fix OSBotify issue. I'll ask around about the Slack invite, apologies! |
Cheers! 😃 |
@Enragedsaturday can you please email [email protected] again and include your Upwork profile? |
@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 📝:
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! 😊 |
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
🚀 Deployed to staging by @marcochavezf in version: 1.1.29-6 🚀
|
@Enragedsaturday The issue #7199 still reproduced during the Regression. |
Not sure what happened there. Only fixed issue #7090. |
@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. |
My bad. Fixed it. |
🚀 Deployed to production by @roryabraham in version: 1.1.30-3 🚀
|
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
QA Steps
Tested On
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