16212: Set focus on username input element.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas@di-pentima.com.ar>

diff --git a/src/views-components/login-form/login-form.tsx b/src/views-components/login-form/login-form.tsx
index 404c91ff69ba51d112dac97054fc51d7096b349a..80d59995e8d3add6092104ed5a0c7ef8e534e60f 100644 (file)
--- a/src/views-components/login-form/login-form.tsx
+++ b/src/views-components/login-form/login-form.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { withStyles, WithStyles, StyleRulesCallback } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { Button, Card, CardContent, TextField, CardActions } from '@material-ui/core';
@@ -47,6 +47,7 @@ interface LoginFormProps {
 
 export const LoginForm = withStyles(styles)(
     ({ handleSubmit, classes }: LoginFormProps & WithStyles<CssRules>) => {
+        const userInput = useRef<HTMLInputElement>(null);
         const [username, setUsername] = useState('');
         const [password, setPassword] = useState('');
         const [isButtonDisabled, setIsButtonDisabled] = useState(true);
@@ -64,6 +65,11 @@ export const LoginForm = withStyles(styles)(
             }
         }, [username, password]);
 
+        // This only run once after render.
+        useEffect(() => {
+            userInput.current!.focus();
+        }, []);
+
         const handleLogin = () => {
             setSubmitting(true);
             handleSubmit(username, password)
@@ -96,6 +102,7 @@ export const LoginForm = withStyles(styles)(
                         <CardContent>
                             <div>
                                 <TextField
+                                    inputRef={userInput}
                                     disabled={isSubmitting}
                                     error={error} fullWidth id="username" type="email"
                                     label="Username" margin="normal"