From e65ede1d6a9e07a67bcfbeccfa459e96c9d9c573 Mon Sep 17 00:00:00 2001
From: Davinder Singh <davibaweja@gmail.com>
Date: Thu, 15 Sep 2022 10:58:35 +0100
Subject: [PATCH] Merge pull request #9572 from
 overleaf/ab-new-project-autofocus

[web] Autofocus on new project name input field

GitOrigin-RevId: 4e26b2b5b6d39df942dc8ed293d3e4212028e4b0
---
 .../new-project-button/modal-content-new-project-form.tsx   | 6 +++++-
 ...se-ref-with-auto-focus.js => use-ref-with-auto-focus.ts} | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)
 rename services/web/frontend/js/shared/hooks/{use-ref-with-auto-focus.js => use-ref-with-auto-focus.ts} (73%)

diff --git a/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx b/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx
index 415fed359f..bc7dbca75d 100644
--- a/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx
+++ b/services/web/frontend/js/features/project-list/components/new-project-button/modal-content-new-project-form.tsx
@@ -6,6 +6,7 @@ import {
   getUserFacingMessage,
   postJSON,
 } from '../../../../infrastructure/fetch-json'
+import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 
 type NewProjectData = {
   project_id: string
@@ -25,6 +26,7 @@ type Props = {
 
 function ModalContentNewProjectForm({ onCancel, template = 'none' }: Props) {
   const { t } = useTranslation()
+  const { autoFocusedRef } = useRefWithAutoFocus<HTMLInputElement>()
   const [projectName, setProjectName] = useState('')
   const { isLoading, isError, error, runAsync } = useAsync<NewProjectData>()
 
@@ -62,8 +64,10 @@ function ModalContentNewProjectForm({ onCancel, template = 'none' }: Props) {
         {isError && (
           <Alert bsStyle="danger">{getUserFacingMessage(error)}</Alert>
         )}
-        <FormControl
+        <input
           type="text"
+          className="form-control"
+          ref={autoFocusedRef}
           placeholder={t('project_name')}
           onChange={handleChangeName}
           value={projectName}
diff --git a/services/web/frontend/js/shared/hooks/use-ref-with-auto-focus.js b/services/web/frontend/js/shared/hooks/use-ref-with-auto-focus.ts
similarity index 73%
rename from services/web/frontend/js/shared/hooks/use-ref-with-auto-focus.js
rename to services/web/frontend/js/shared/hooks/use-ref-with-auto-focus.ts
index c537b78be5..53d5fd2dd3 100644
--- a/services/web/frontend/js/shared/hooks/use-ref-with-auto-focus.js
+++ b/services/web/frontend/js/shared/hooks/use-ref-with-auto-focus.ts
@@ -1,7 +1,7 @@
 import { useRef, useEffect } from 'react'
 
-export function useRefWithAutoFocus() {
-  const autoFocusedRef = useRef()
+export function useRefWithAutoFocus<T extends HTMLElement = any>() {
+  const autoFocusedRef = useRef<T>(null)
 
   useEffect(() => {
     if (autoFocusedRef.current) {