From fa4cd74dfd051b7060ae66869eeb9b04df38109f Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Fri, 10 May 2024 12:18:10 -0500
Subject: [PATCH] fix(web): autofocus change name field (#9376)

---
 web/src/routes/(user)/people/+page.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index 7976bb4f3a..54f703c8f3 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -62,7 +62,7 @@
   let handleSearchPeople: (force?: boolean, name?: string) => Promise<void>;
   let showPeople: PersonResponseDto[] = [];
   let countVisiblePeople: number;
-
+  let changeNameInputEl: HTMLInputElement | null;
   let innerHeight: number;
 
   for (const person of people) {
@@ -237,6 +237,8 @@
     personName = detail.name;
     personMerge1 = detail;
     edittingPerson = detail;
+
+    setTimeout(() => changeNameInputEl?.focus(), 100);
   };
 
   const handleSetBirthDate = (detail: PersonResponseDto) => {
@@ -448,7 +450,14 @@
       <form on:submit|preventDefault={submitNameChange} autocomplete="off" id="change-name-form">
         <div class="flex flex-col gap-2">
           <label class="immich-form-label" for="name">Name</label>
-          <input class="immich-form-input" id="name" name="name" type="text" bind:value={personName} />
+          <input
+            class="immich-form-input"
+            id="name"
+            name="name"
+            type="text"
+            bind:value={personName}
+            bind:this={changeNameInputEl}
+          />
         </div>
       </form>
       <svelte:fragment slot="sticky-bottom">