Adding a bunch of refs

src/components/MyAccount/Settings/AddButton.tsx

@@ -1,30 +1,36 @@
 import { Button } from "@nypl/design-system-react-components"
+import { forwardRef } from "react"
 
 type AddButtonProps = {
   inputType?: string
   label: string
   onClick: () => void
 }
 
-const AddButton = ({ inputType, label, onClick }: AddButtonProps) => {
-  return (
-    <Button
-      id={inputType ? `add-${inputType}-button` : "add-button"}
-      buttonType="text"
-      onClick={onClick}
-      size="large"
-      sx={{
-        justifyContent: "flex-start",
-        width: { base: "100%", md: "300px" },
-        paddingLeft: { base: "m", md: "xs" },
-        paddingTop: "xs",
-        paddingBottom: "xs",
-        paddingRight: "xs",
-      }}
-    >
-      {label}
-    </Button>
-  )
-}
+const AddButton = forwardRef<HTMLButtonElement, AddButtonProps>(
+  ({ inputType, label, onClick }, ref) => {
+    return (
+      <Button
+        ref={ref}
+        id={inputType ? `add-${inputType}-button` : "add-button"}
+        buttonType="text"
+        onClick={onClick}
+        size="large"
+        sx={{
+          justifyContent: "flex-start",
+          width: { base: "100%", md: "300px" },
+          paddingLeft: { base: "m", md: "xs" },
+          paddingTop: "xs",
+          paddingBottom: "xs",
+          paddingRight: "xs",
+        }}
+      >
+        {label}
+      </Button>
+    )
+  }
+)
+
+AddButton.displayName = "AddButton"
 
 export default AddButton

src/components/MyAccount/Settings/EditButton.tsx

@@ -1,29 +1,38 @@
 import { Button, Icon } from "@nypl/design-system-react-components"
+import { forwardRef } from "react"
 
 type EditButtonProps = {
   buttonId: string
   buttonLabel: string
   onClick: () => void
 }
 
-const EditButton = ({ buttonId, buttonLabel, onClick }: EditButtonProps) => {
-  return (
-    <Button
-      id={buttonId}
-      aria-label={buttonLabel}
-      buttonType="text"
-      onClick={onClick}
-      sx={{
-        paddingTop: "0",
-        paddingBottom: "0",
-        paddingLeft: "xs",
-        paddingRight: "xs",
-      }}
-    >
-      <Icon name="editorMode" align="left" size="medium" />
-      Edit
-    </Button>
-  )
-}
+const EditButton = forwardRef<HTMLButtonElement, EditButtonProps>(
+  ({ buttonLabel, buttonId, onClick }, ref) => {
+    return (
+      <Button
+        ref={ref}
+        id={buttonId}
+        aria-label={buttonLabel}
+        buttonType="text"
+        onClick={onClick}
+        sx={{
+          _focus: {
+            outline: "2px green solid",
+          },
+          paddingTop: "0",
+          paddingBottom: "0",
+          paddingLeft: "xs",
+          paddingRight: "xs",
+        }}
+      >
+        <Icon name="editorMode" align="left" size="medium" />
+        Edit
+      </Button>
+    )
+  }
+)
+
+EditButton.displayName = "EditButton"
 
 export default EditButton

src/components/MyAccount/Settings/PasswordForm.tsx

@@ -1,5 +1,6 @@
-import { useContext, useState } from "react"
+import { forwardRef, useContext, useRef, useState } from "react"
 import { PatronDataContext } from "../../../context/PatronDataContext"
+import type { TextInputRefType } from "@nypl/design-system-react-components"
 import {
   Banner,
   Flex,
@@ -30,37 +31,37 @@ export const passwordFormMessages = {
   INVALID: "Invalid new pin/password.",
 }
 
-const PasswordFormField = ({
-  label,
-  handler,
-  name,
-  isInvalid,
-}: PasswordFormFieldProps) => {
-  return (
-    <Flex
-      flexDir={{ base: "column", lg: "row" }}
-      alignItems="flex-start"
-      gap={{ base: "xs", lg: "unset" }}
-    >
-      <SettingsLabel icon="actionLockClosed" text={label} />
-      <TextInput
-        marginLeft={{ sm: "m", lg: 0 }}
-        width="320px"
-        id={name}
-        name={name}
-        type="password"
-        isRequired
-        showLabel={false}
-        isClearable
-        showRequiredLabel={false}
-        labelText={label}
-        onChange={handler}
-        invalidText="Pin/passwords do not match."
-        isInvalid={isInvalid}
-      />
-    </Flex>
-  )
-}
+const PasswordFormField = forwardRef<TextInputRefType, PasswordFormFieldProps>(
+  ({ label, handler, name, isInvalid }: PasswordFormFieldProps, ref) => {
+    return (
+      <Flex
+        flexDir={{ base: "column", lg: "row" }}
+        alignItems="flex-start"
+        gap={{ base: "xs", lg: "unset" }}
+      >
+        <SettingsLabel icon="actionLockClosed" text={label} />
+        <TextInput
+          ref={ref}
+          marginLeft={{ sm: "m", lg: 0 }}
+          width="320px"
+          id={name}
+          name={name}
+          type="password"
+          isRequired
+          showLabel={false}
+          isClearable
+          showRequiredLabel={false}
+          labelText={label}
+          onChange={handler}
+          invalidText="Pin/passwords do not match."
+          isInvalid={isInvalid}
+        />
+      </Flex>
+    )
+  }
+)
+
+PasswordFormField.displayName = "PasswordFormField"
 
 const PasswordForm = ({ patronData, settingsState }: PasswordFormProps) => {
   const { getMostUpdatedSierraAccountData } = useContext(PatronDataContext)
@@ -74,10 +75,15 @@ const PasswordForm = ({ patronData, settingsState }: PasswordFormProps) => {
   })
   const { setStatus, setStatusMessage, editingField, setEditingField } =
     settingsState
+  const editingRef = useRef<HTMLButtonElement | null>()
+  const inputRef = useRef<TextInputRefType | null>()
 
   const cancelEditing = () => {
     setIsEditing(false)
     setEditingField("")
+    setTimeout(() => {
+      editingRef.current?.focus()
+    }, 0)
   }
 
   const validateForm =
@@ -162,6 +168,7 @@ const PasswordForm = ({ patronData, settingsState }: PasswordFormProps) => {
               }}
             >
               <PasswordFormField
+                ref={inputRef}
                 label="Enter current pin/password"
                 name="currentPassword"
                 handler={handleInputChange}
@@ -235,11 +242,15 @@ const PasswordForm = ({ patronData, settingsState }: PasswordFormProps) => {
             </Text>
             {editingField === "" && (
               <EditButton
+                ref={editingRef}
                 buttonLabel="Edit password"
                 buttonId="edit-password-button"
                 onClick={() => {
                   setIsEditing(true)
                   setEditingField("password")
+                  setTimeout(() => {
+                    inputRef.current?.focus()
+                  }, 0)
                 }}
               />
             )}

src/components/MyAccount/Settings/SettingsInputForm.tsx

@@ -44,6 +44,7 @@ const SettingsInputForm = ({
   const [tempInputs, setTempInputs] = useState([...inputs])
 
   const inputRefs = useRef<Array<TextInputRefType | null>>([])
+  const editingRef = useRef<HTMLButtonElement | null>()
 
   const focusLastInput = () => {
     const lastIndex = tempInputs.length - 1
@@ -59,6 +60,9 @@ const SettingsInputForm = ({
   const formUtils = {
     regex: isEmail ? /^[^@]+@[^@]+\.[^@]+$/ : /^\+?[1-9]\d{1,14}$/,
     labelText: isEmail ? "Update email address" : "Update phone number",
+    primaryLabelText: isEmail
+      ? "Update primary email address"
+      : "Update primary phone number",
     addButtonLabel: isEmail ? "+ Add an email address" : "+ Add a phone number",
     errorMessage: `Please enter a valid and unique ${
       isEmail ? "email address" : "phone number"
@@ -126,6 +130,9 @@ const SettingsInputForm = ({
     setIsEditing(false)
     setEditingField("")
     setError(false)
+    setTimeout(() => {
+      editingRef.current?.focus()
+    }, 0)
   }
 
   const submitInputs = async () => {
@@ -207,7 +214,7 @@ const SettingsInputForm = ({
                     id={`${inputType}-text-input-${index}`}
                     labelText={
                       index == 0
-                        ? `Update primary ${inputType}`
+                        ? formUtils.primaryLabelText
                         : `${formUtils.labelText} ${index}`
                     }
                     showLabel={false}
@@ -277,6 +284,7 @@ const SettingsInputForm = ({
             </Flex>
             {editingField === "" && tempInputs.length > 0 && (
               <EditButton
+                ref={editingRef}
                 buttonLabel={`Edit ${inputType}`}
                 buttonId={`edit-${inputType}-button`}
                 onClick={() => {

src/components/MyAccount/Settings/SettingsSelectForm.tsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react"
+import { useContext, useRef, useState } from "react"
 import { PatronDataContext } from "../../../context/PatronDataContext"
 import {
   Flex,
@@ -30,6 +30,8 @@ const SettingsSelectForm = ({
   const [error, setError] = useState(false)
 
   const { setStatus, editingField, setEditingField } = settingsState
+  const editingRef = useRef<HTMLButtonElement | null>()
+  const inputRef = useRef<HTMLSelectElement | null>()
 
   const notificationPreferenceMap =
     patronData.notificationPreference === "-"
@@ -89,6 +91,9 @@ const SettingsSelectForm = ({
   const cancelEditing = () => {
     setIsEditing(false)
     setEditingField("")
+    setTimeout(() => {
+      editingRef.current?.focus()
+    }, 0)
   }
 
   const submitSelection = async () => {
@@ -159,6 +164,7 @@ const SettingsSelectForm = ({
             width="-webkit-fill-available"
           >
             <Select
+              ref={inputRef}
               width={{ base: "100%", md: "max-content" }}
               name={`select-${type}`}
               id={formUtils.selectorId}
@@ -187,11 +193,15 @@ const SettingsSelectForm = ({
             </Text>
             {editingField === "" && (
               <EditButton
+                ref={editingRef}
                 buttonLabel={`Edit ${type}`}
                 buttonId={`edit-${type}-button`}
                 onClick={() => {
                   setIsEditing(true)
                   setEditingField(type)
+                  setTimeout(() => {
+                    inputRef.current?.focus()
+                  }, 0)
                 }}
               />
             )}