Input does not handle Tab focus and autofocus correctly.

[parasharrajat]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issues:

1. New text input requires extra keystroke when using tab to get focus
2. Autofocus is not set correctly.

Action Performed:

1. Open the Login page.
2. Observe the email input.
3. Go to the password page, observe the password input. It is auto-filled, but input is not focused.
4. Now try to navigate use the Tab key. Users have to press tag two times to set the focus on Input.

Expected Result:

When autofocus is used, Input should be focused and the border should be shown on the input.
The label should float top when input is focused.
Single Tab keystroke should set the focus in the input.

Actual Result:

Input is not focused and the label is overriding the Input text. The cursor is placed on the Input but the label is not placed correctly and there is no blue border that shows the focused state. Users have to press the tab two times to get focus on the input.

Workaround:

Clear the input and refocus.

Platform:

Where is this issue occurring?

• Web
• Desktop App
• Mobile Web

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

Video

https://expensify.slack.com/files/UDQLCFDRA/F02AZA1V0GL/2021-08-10_10-31-21.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

Slack => https://expensify.slack.com/archives/C01GTK53T8Q/p1628627644189200

Upwork Job

[MelvinBot]

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

[strepanier03]

Unique - wasn't able to find another issue similar
Issue hygiene - sections are filled out
Clarity of problem - The problem is not as clear as it could be as it was a little tough to parse out what I think you're seeing. I wasn't able to reproduce the behavior that I believe you're describing so next time it might be better to be a little more clear with what is happening or provide additional visual examples to illustrate.
Value - Polished new dot is critical so passing along.

[MelvinBot]

Triggered auto assignment to @roryabraham (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[roryabraham]

Nice triage checklist @strepanier03! 👏

[roryabraham]

This can be external, but @parasharrajat can you take a minute to clean up the issue template to get rid of the prompt questions and get a bit more specific about the expected result?

[MelvinBot]

Triggered auto assignment to @MitchExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.