usability improvement: automatically focus inputs

ghackenberg · Nov 23, 2023 · 66942d1 · 66942d1
1 parent 6e9ab79
commit 66942d1
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/packages/frontend/src/scripts/components/views/AuthCode.tsx b/packages/frontend/src/scripts/components/views/AuthCode.tsx
@@ -17,6 +17,10 @@ export const AuthCodeView = () => {
 
     const { go, replace } = useAsyncHistory()
 
+    // REFS
+
+    const inputRef = React.createRef<HTMLInputElement>()
+
     // CONTEXTS
 
     const { authContextToken, setAuthContextUser } = React.useContext(AuthContext)
@@ -38,6 +42,10 @@ export const AuthCodeView = () => {
 
     // EFFECTS
 
+    React.useEffect(() => {
+        inputRef.current.focus()
+    })
+
     React.useEffect(() => {
         let exec = true
         CacheAPI.loadPublicJWK().then(publicJWK => exec && setPublicJWK(publicJWK))
@@ -122,7 +130,7 @@ export const AuthCodeView = () => {
                             Then enter your code below and press <strong>next</strong>.
                         </p>
                         <div>
-                            <input className='button fill lightgray' type="text" placeholder='Your verification code' minLength={6} maxLength={6} value={code} onKeyUp={event => event.key == 'Enter' && handleSubmit(event)} onChange={event => setCode(event.currentTarget.value)}/>
+                            <input ref={inputRef} className='button fill lightgray' type="text" placeholder='Your verification code' minLength={6} maxLength={6} value={code} onKeyUp={event => event.key == 'Enter' && handleSubmit(event)} onChange={event => setCode(event.currentTarget.value)}/>
                             <button className='button fill red' onClick={handleSubmit}>
                                 {load ? 'Loading ...' : 'Next'}
                             </button>

diff --git a/packages/frontend/src/scripts/components/views/AuthEmail.tsx b/packages/frontend/src/scripts/components/views/AuthEmail.tsx
@@ -11,6 +11,10 @@ export const AuthEmailView = () => {
 
     const { push } = useAsyncHistory()
 
+    // REFS
+
+    const inputRef = React.useRef<HTMLInputElement>()
+
     // CONTEXTS
 
     const { setAuthContextToken } = React.useContext(AuthContext)
@@ -21,6 +25,12 @@ export const AuthEmailView = () => {
     const [load, setLoad] = React.useState<boolean>(false)
     const [error, setError] = React.useState<string>()
 
+    // EFFECTS
+
+    React.useEffect(() => {
+        inputRef.current.focus()
+    })
+
     // EVENTS
 
     async function handleSubmit(event: React.UIEvent) {
@@ -52,7 +62,7 @@ export const AuthEmailView = () => {
                             Then we will send you a <strong>verification code</strong> to sign up/in.
                         </p>
                         <div>
-                            <input className='button fill lightgray' type="email" placeholder='Your email address' value={email} onKeyUp={event => event.key == 'Enter' && handleSubmit(event)} onChange={event => setEmail(event.currentTarget.value)}/>
+                            <input ref={inputRef} className='button fill lightgray' type="email" placeholder='Your email address' value={email} onKeyUp={event => event.key == 'Enter' && handleSubmit(event)} onChange={event => setEmail(event.currentTarget.value)}/>
                             <button className='button fill red' onClick={handleSubmit} >
                                 {load ? 'Loading ...' : 'Next'}
                             </button>

diff --git a/packages/frontend/src/scripts/components/views/AuthName.tsx b/packages/frontend/src/scripts/components/views/AuthName.tsx
@@ -12,6 +12,10 @@ export const AuthNameView = () => {
 
     const { push } = useAsyncHistory()
 
+    // REFS
+
+    const inputRef = React.useRef<HTMLInputElement>()
+
     // CONTEXTS
 
     const { authContextUser, setAuthContextUser } = React.useContext(AuthContext)
@@ -22,6 +26,12 @@ export const AuthNameView = () => {
     const [load, setLoad] = React.useState<boolean>(false)
     const [error, setError] = React.useState<string>()
 
+    // EFFECTS
+
+    React.useEffect(() => {
+        authContextUser && inputRef.current.focus()
+    }, [authContextUser])
+
     // FUNCTIONS
 
     async function handleSubmit(event: React.UIEvent) {
@@ -54,7 +64,7 @@ export const AuthNameView = () => {
                                 Note that your profile name will be visible to other users.
                             </p>
                             <div>
-                                <input className='button fill lightgray' type='text' placeholder='Your profile name' value={name} onKeyUp={event => event.key == 'Enter' && handleSubmit(event)} onChange={event => setName(event.currentTarget.value)}/>
+                                <input ref={inputRef} className='button fill lightgray' type='text' placeholder='Your profile name' value={name} onKeyUp={event => event.key == 'Enter' && handleSubmit(event)} onChange={event => setName(event.currentTarget.value)}/>
                                 <button className='button fill red' onClick={handleSubmit}>
                                     {load ? 'Loading ...' : 'Next'}
                                 </button>