Merge pull request #9724 from overleaf/ab-tag-modals-autofocus

[web] Add autofocus to React dashboard tag modals

GitOrigin-RevId: 804fee108ab8e1c5bf97ade8032c4ea363baf7bb

services/web/frontend/js/features/project-list/components/modals/create-tag-modal.tsx

@@ -5,6 +5,7 @@ import { Tag } from '../../../../../../app/src/Features/Tags/types'
 import AccessibleModal from '../../../../shared/components/accessible-modal'
 import useAsync from '../../../../shared/hooks/use-async'
 import { useProjectListContext } from '../../context/project-list-context'
+import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 import { createTag } from '../../util/api'
 import { MAX_TAG_LENGTH } from '../../util/tag'
 
@@ -24,6 +25,7 @@ export default function CreateTagModal({
   const { tags } = useProjectListContext()
   const { t } = useTranslation()
   const { isError, runAsync, status } = useAsync<Tag>()
+  const { autoFocusedRef } = useRefWithAutoFocus<HTMLInputElement>()
 
   const [tagName, setTagName] = useState<string>()
   const [validationError, setValidationError] = useState<string>()
@@ -69,6 +71,7 @@ export default function CreateTagModal({
       <Modal.Body>
         <Form name="createTagForm" onSubmit={handleSubmit}>
           <input
+            ref={autoFocusedRef}
             className="form-control"
             type="text"
             placeholder="New Tag Name"
@@ -102,7 +105,7 @@ export default function CreateTagModal({
             status === 'pending' || !tagName?.length || !!validationError
           }
         >
-          {status === 'pending' ? t('creating') + '…' : t('create')}
+          {status === 'pending' ? <>{t('creating')} &hellip;</> : t('create')}
         </Button>
       </Modal.Footer>
     </AccessibleModal>

services/web/frontend/js/features/project-list/components/modals/edit-tag-modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { Button, Form, Modal } from 'react-bootstrap'
 import AccessibleModal from '../../../../shared/components/accessible-modal'
 import useAsync from '../../../../shared/hooks/use-async'
+import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 import { deleteTag, renameTag } from '../../util/api'
 import { Tag } from '../../../../../../app/src/Features/Tags/types'
 
@@ -22,6 +23,7 @@ export default function EditTagModal({
   onClose,
 }: EditTagModalProps) {
   const { t } = useTranslation()
+  const { autoFocusedRef } = useRefWithAutoFocus<HTMLInputElement>()
   const {
     isLoading: isDeleteLoading,
     isError: isDeleteError,
@@ -79,6 +81,7 @@ export default function EditTagModal({
       <Modal.Body>
         <Form name="editTagRenameForm" onSubmit={handleSubmit}>
           <input
+            ref={autoFocusedRef}
             className="form-control"
             type="text"
             placeholder="Tag Name"

services/web/frontend/js/features/project-list/components/modals/rename-tag-modal.tsx

@@ -5,6 +5,7 @@ import { Tag } from '../../../../../../app/src/Features/Tags/types'
 import AccessibleModal from '../../../../shared/components/accessible-modal'
 import useAsync from '../../../../shared/hooks/use-async'
 import { useProjectListContext } from '../../context/project-list-context'
+import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 import { renameTag } from '../../util/api'
 import { MAX_TAG_LENGTH } from '../../util/tag'
 
@@ -24,6 +25,7 @@ export default function RenameTagModal({
   const { tags } = useProjectListContext()
   const { t } = useTranslation()
   const { isLoading, isError, runAsync, status } = useAsync()
+  const { autoFocusedRef } = useRefWithAutoFocus<HTMLInputElement>()
 
   const [newTagName, setNewTagName] = useState<string>()
   const [validationError, setValidationError] = useState<string>()
@@ -78,6 +80,7 @@ export default function RenameTagModal({
       <Modal.Body>
         <Form name="renameTagForm" onSubmit={handleSubmit}>
           <input
+            ref={autoFocusedRef}
             className="form-control"
             type="text"
             placeholder="Tag Name"

services/web/frontend/js/shared/hooks/use-ref-with-auto-focus.ts

@@ -1,6 +1,6 @@
 import { useRef, useEffect } from 'react'
 
-export function useRefWithAutoFocus<T extends HTMLElement = any>() {
+export function useRefWithAutoFocus<T extends HTMLElement = HTMLElement>() {
   const autoFocusedRef = useRef<T>(null)
 
   useEffect(() => {
@@ -11,7 +11,7 @@ export function useRefWithAutoFocus<T extends HTMLElement = any>() {
         }
       })
     }
-  }, [autoFocusedRef])
+  }, [])
 
   return { autoFocusedRef }
 }