Focus to first name field on load

zenlex commented 4 years ago

Description

created a ref const called focusRef using useRef(null) passed focusRef as inputRef to FormControl component called focusRef.current.focus() in useEffect hook for VoterRegLookup component

Motivation and Context

Best practice for accessibility and ease of use. Used ref method rather than just setting autoFocus property on FormControl based on screen reader usage recommendations.

How Has This Been Tested?

Loaded in local dev environment and tested tabbing through and refreshing page. Consistent in Chrome. Not tested in other browsers, but I believe the implementation I used is cross-browser consistent.

Screenshots (if appropriate):

Checklist:

[x] My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[ ] I have updated the documentation accordingly.
[ ] I have read the CONTRIBUTING document.
[ ] I have added tests to cover my changes.
[ ] All new and existing tests passed.

zenlex commented 4 years ago

autoFocus prop works and was what I did initially, but after some reading it seemed to be indicated as not best practice in react, and so I tried to learn the more reliable way. :) https://blog.danieljohnson.io/react-ref-autofocus/

stevenbuccini commented 4 years ago

Thanks for sharing. Our app is pretty vanilla and the blog post you referenced says:

I would recommend that you use the autoFocus prop, unless you have odd circumstances (like I did) that prevent it from working.

I recommend using the built-in methodology for focusing in order to reduce complexity.

zenlex commented 4 years ago

fair enough. Makes sense to me. I opted for the option with most control because I wasn't as familiar with the rest of the app yet as I'd like. I'll fix and resubmit.

codeforgso / GoVote