autofocus inputs

This commit is contained in:
Jamie Curnow
2021-07-18 22:08:09 +10:00
parent b616988f7e
commit b9b5cc70bc
2 changed files with 16 additions and 2 deletions

View File

@@ -1,4 +1,4 @@
import React, { useState, ChangeEvent } from "react";
import React, { useEffect, useRef, useState, ChangeEvent } from "react";
import { Alert, Button } from "components";
import { useAuthState } from "context";
@@ -6,6 +6,7 @@ import { useAuthState } from "context";
import logo from "../../img/logo-text-vertical-grey.png";
function Login() {
const emailRef = useRef(null);
const { login } = useAuthState();
const [loading, setLoading] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
@@ -31,6 +32,11 @@ function Login() {
setFormData({ ...formData, [target.name]: target.value });
};
useEffect(() => {
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
emailRef.current.focus();
}, []);
return (
<div className="container-tight py-4">
<div className="text-center mb-4">
@@ -46,6 +52,7 @@ function Login() {
<div className="mb-3">
<label className="form-label">Email address</label>
<input
ref={emailRef}
type="email"
onChange={onChange}
className="form-control"

View File

@@ -1,4 +1,4 @@
import React, { useState, ChangeEvent } from "react";
import React, { useEffect, useRef, useState, ChangeEvent } from "react";
import { createUser } from "api/npm";
import { Alert, Button } from "components";
@@ -7,6 +7,7 @@ import { useAuthState, useHealthState } from "context";
import logo from "../../img/logo-text-vertical-grey.png";
function Setup() {
const nameRef = useRef(null);
const { refreshHealth } = useHealthState();
const { login } = useAuthState();
const [loading, setLoading] = useState(false);
@@ -62,6 +63,11 @@ function Setup() {
setFormData({ ...formData, [target.name]: target.value });
};
useEffect(() => {
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
nameRef.current.focus();
}, []);
return (
<div className="page page-center">
<div className="container-tight py-4">
@@ -86,6 +92,7 @@ function Setup() {
<div className="mb-3">
<label className="form-label">Name</label>
<input
ref={nameRef}
onChange={onChange}
className="form-control"
name="name"