From c9c2322b9db46e4ee42e07cf7eac9bba3ca52f51 Mon Sep 17 00:00:00 2001
From: Andreas Heinz <github@a80.net>
Date: Thu, 26 Mar 2026 18:18:23 +0100
Subject: [PATCH] feat(web): focus on face-editor search input (#27136)

---
 .../asset-viewer/face-editor/face-editor.svelte    | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte b/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
index f2b9c2e157..8dd7adaa5f 100644
--- a/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
+++ b/web/src/lib/components/asset-viewer/face-editor/face-editor.svelte
@@ -10,7 +10,7 @@
   import { Button, Input, modalManager, toastManager } from '@immich/ui';
   import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
   import { clamp } from 'lodash-es';
-  import { onMount } from 'svelte';
+  import { onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -27,6 +27,7 @@
   let faceRect: Rect | undefined = $state();
   let faceSelectorEl: HTMLDivElement | undefined = $state();
   let scrollableListEl: HTMLDivElement | undefined = $state();
+  let searchInputEl: HTMLInputElement | null = $state(null);
   let page = $state(1);
   let candidates = $state<PersonResponseDto[]>([]);
 
@@ -81,6 +82,8 @@
   onMount(async () => {
     setupCanvas();
     await getPeople();
+    await tick();
+    searchInputEl?.focus();
   });
 
   const imageContentMetrics = $derived.by(() => {
@@ -221,12 +224,15 @@
 
   $effect(() => {
     const rect = faceRect;
-    if (rect) {
+    const cvs = canvas;
+    if (rect && cvs) {
       rect.on('moving', positionFaceSelector);
       rect.on('scaling', positionFaceSelector);
+      cvs.on('object:modified', () => searchInputEl?.focus());
       return () => {
         rect.off('moving', positionFaceSelector);
         rect.off('scaling', positionFaceSelector);
+        cvs.off('object:modified', () => searchInputEl?.focus());
       };
     }
   });
@@ -290,7 +296,7 @@
   };
 </script>
 
-<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: cancel }} />
+<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: cancel, ignoreInputFields: false }} />
 
 <div
   id="face-editor-data"
@@ -310,7 +316,7 @@
     <p class="text-center text-sm">{$t('select_person_to_tag')}</p>
 
     <div class="my-3 relative">
-      <Input placeholder={$t('search_people')} bind:value={searchTerm} size="tiny" />
+      <Input placeholder={$t('search_people')} bind:value={searchTerm} bind:ref={searchInputEl} size="tiny" />
     </div>
 
     <div bind:this={scrollableListEl} class="h-62.5 overflow-y-auto mt-2">