fix: remove autofocus usage

rare-magma · May 21, 2023 · b9d68e7 · b9d68e7
1 parent 7cdc99e
commit b9d68e7
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 13 deletions.
diff --git a/src/components/CalculateButton/CalculateButton.tsx b/src/components/CalculateButton/CalculateButton.tsx
@@ -24,13 +24,14 @@ function CalculateButton({
 }: CalculateButtonProps) {
   const [operation, setOperation] = useState("add");
   const [changeValue, setChangeValue] = useState(0);
-  const ref = useRef<HTMLButtonElement>(null);
+  const opButtonRef = useRef<HTMLButtonElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const handleCalculate = () => {
     if (changeValue > 0) {
       onCalculate(changeValue, operation);
     }
-    ref?.current?.click();
+    opButtonRef?.current?.click();
   };
 
   return (
@@ -94,12 +95,11 @@ function CalculateButton({
                   className="text-right form-control straight-corners"
                   aria-label={"change item value amount"}
                   name="item-operate-value"
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
-                  autoFocus
                   intlConfig={intlConfig}
                   defaultValue={0}
                   allowNegativeValue={false}
                   maxLength={14}
+                  ref={inputRef}
                   onValueChange={(value) =>
                     setChangeValue(isNaN(Number(value)) ? 0 : Number(value))
                   }
@@ -128,7 +128,12 @@ function CalculateButton({
           aria-haspopup="dialog"
           variant="outline-secondary"
           type="button"
-          ref={ref}
+          ref={opButtonRef}
+          onClick={() => {
+            setTimeout(() => {
+              inputRef.current?.focus();
+            }, 0);
+          }}
         >
           <BsPlusSlashMinus />
         </Button>

diff --git a/src/components/ItemForm/ItemFormGroup.tsx b/src/components/ItemForm/ItemFormGroup.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { RefObject, useRef, useState } from "react";
 import {
   Button,
   Form,
@@ -17,6 +17,7 @@ interface ItemFormProps {
   itemForm: ItemForm;
   costPercentage: number;
   intlConfig: CurrencyInputProps["intlConfig"];
+  inputRef: RefObject<HTMLInputElement>;
   onChange: (itemForm: ItemForm) => void;
   onRemove: (itemForm: ItemForm) => void;
 }
@@ -25,11 +26,13 @@ function ItemFormGroup({
   itemForm: initialItemForm,
   costPercentage,
   intlConfig,
+  inputRef,
   onRemove,
   onChange,
 }: ItemFormProps) {
   const [itemForm, setItemForm] = useState(initialItemForm);
   const [changed, setChanged] = useState(false);
+  const deleteButtonRef = useRef<HTMLButtonElement>(null);
 
   const handleRemove = (item: ItemForm) => {
     onRemove(item);
@@ -89,8 +92,7 @@ function ItemFormGroup({
           aria-label={"item-name"}
           key={`${itemForm.id}-name`}
           className="w-25"
-          // eslint-disable-next-line jsx-a11y/no-autofocus
-          autoFocus
+          ref={inputRef}
           defaultValue={itemForm.name}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
             handleChange("name", undefined, e)
@@ -163,8 +165,7 @@ function ItemFormGroup({
                   variant="delete"
                   type="button"
                   size="sm"
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
-                  autoFocus
+                  ref={deleteButtonRef}
                   onClick={() => {
                     handleRemove(itemForm);
                   }}
@@ -182,6 +183,11 @@ function ItemFormGroup({
           key={`${itemForm.id}-button`}
           variant="delete"
           type="button"
+          onClick={() => {
+            setTimeout(() => {
+              deleteButtonRef.current?.focus();
+            }, 0);
+          }}
         >
           <BsXLg />
         </Button>

diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -60,6 +60,7 @@ function NavBar({
   const currencyRef = useRef<TypeaheadRef>(null);
   const nameRef =
     useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
+  const deleteButtonRef = useRef<HTMLButtonElement>(null);
 
   const [expanded, setExpanded] = useState(false);
   const [showDelete, setShowDelete] = useState(false);
@@ -400,8 +401,7 @@ function NavBar({
                                 key={"budget-deletion-button"}
                                 variant="delete"
                                 type="button"
-                                // eslint-disable-next-line jsx-a11y/no-autofocus
-                                autoFocus
+                                ref={deleteButtonRef}
                                 onClick={() => {
                                   setShowDelete(!showDelete);
                                   handleRemove(initialId);
@@ -418,6 +418,11 @@ function NavBar({
                         className="w-100"
                         aria-label="delete budget"
                         variant="outline-danger"
+                        onClick={() => {
+                          setTimeout(() => {
+                            deleteButtonRef.current?.focus();
+                          }, 0);
+                        }}
                       >
                         {expanded ? "delete" : <BsXLg />}
                       </Button>

diff --git a/src/components/TableCard/TableCard.tsx b/src/components/TableCard/TableCard.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { ItemForm } from "../ItemForm/ItemForm";
 import {
   Card,
@@ -34,6 +34,7 @@ function TableCard({
   const [table, setTable] = useState(initialItems);
   const [total, setTotal] = useState(roundBig(calcTotal(table.items), 2));
   const revenuePercentage = calcPercentage(total, revenueTotal);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const addTable = (tableBeingEdited: Income | Expense) => {
     let newTable;
@@ -154,6 +155,7 @@ function TableCard({
             itemForm={item}
             intlConfig={intlConfig}
             costPercentage={calcPercentage(item.value, revenueTotal)}
+            inputRef={inputRef}
             onChange={handleChange}
             onRemove={() => {
               removeTable(item);
@@ -180,6 +182,9 @@ function TableCard({
               size="sm"
               onClick={() => {
                 addTable(table);
+                setTimeout(() => {
+                  inputRef.current?.focus();
+                }, 0);
               }}
               name=""
               value=""