Fix ExpensiInput autoFocus & tab Focus

[parasharrajat]

Details

Fixed Issues

$ Fixes #4514

Tests | QA Steps

1. Open the Login page on the Web.
2. Observe the email input. It should be autofocused correctly.
3. Go to the password page, observe the password input. If it is auto-filled, input should be focused correctly.
4. Now try to navigate using the Tab key. Ony single tab pres, the focus should be set on the Input.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

focus-fix.mp4

Mobile Web

Desktop

iOS

Android

[francoisl]

@roryabraham do we need to apply the CP Staging label before merging this?

[roryabraham]

@francoisl Yep!

[github-actions]

⚠️ ⚠️ Heads up! This pull request has the CP Staging label. ⚠️ ⚠️
Merging it will cause it to be immediately deployed to staging, even if the open StagingDeployCash deploy checklist is locked.

[roryabraham]

Actually JK I am going to remove the CP label in this case to help me finish testing #4274 for the case of manual CP's

[roryabraham]

So I tested this on iOS Safari and also desktop and it seems to work as expected 👍

However, I think we maybe should leave a comment explaining why we are not using the autoFocus prop, to prevent someone coming along and undoing this in the future. NAB though.

[parasharrajat]

@roryabraham Your suggestions are up. Thanks.

[roryabraham]

I am going to merge this w/o waiting for E2E because I want to test the CP audit trail and because the only change between the previous commit, which passed all checks, is a comment.

[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.

[roryabraham]

CPing this to staging here: https://github.com/Expensify/App/actions/runs/1125331217

[roryabraham]

Staging deploy is running here, so hopefully once that finishes we'll see a comment on this PR to the tune of: "CPed to staging by @roryabraham..."

[OSBotify]

🚀 Cherry-picked to staging by @roryabraham in version: 1.0.85-3 🚀

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

[botify]

This has been deployed to production and is now subject to a 7-day regression period.
If no regressions arise, payment will be issued on 2021-08-24. 🎊

[OSBotify]

🚀 Deployed to production by @isagoico in version: 1.0.85-9 🚀

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

[OSBotify]

🚀 Deployed to staging by @roryabraham in version: 1.0.85-10 🚀

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

[botify]

This has been deployed to production and is now subject to a 7-day regression period.
If no regressions arise, payment will be issued on 2021-09-01. 🎊

[OSBotify]

🚀 Deployed to production by @roryabraham in version: 1.0.86-11 🚀

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

[botify]

This has been deployed to production and is now subject to a 7-day regression period.
If no regressions arise, payment will be issued on 2021-09-06. 🎊