From 694ea151f5a1fcffe79ea576745b7b58f3d6681b Mon Sep 17 00:00:00 2001
From: Andreas Heinz <github@a80.net>
Date: Wed, 18 Mar 2026 12:39:25 +0100
Subject: [PATCH] fix(web): escape handling for tagging and adding a face in
 asset viewer (#26870)

---
 .../lib/components/asset-viewer/asset-viewer-nav-bar.svelte | 3 ++-
 .../components/asset-viewer/face-editor/face-editor.svelte  | 3 +++
 web/src/lib/components/shared-components/combobox.svelte    | 6 ++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index 3ccadf944f..eee2dc325c 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -22,6 +22,7 @@
   import { Route } from '$lib/route';
   import { getGlobalActions } from '$lib/services/app.service';
   import { getAssetActions } from '$lib/services/asset.service';
+  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { user } from '$lib/stores/user.store';
   import { getSharedLink, withoutIcons } from '$lib/utils';
   import type { OnUndoDelete } from '$lib/utils/actions';
@@ -88,7 +89,7 @@
     title: $t('go_back'),
     type: $t('assets'),
     icon: languageManager.rtl ? mdiArrowRight : mdiArrowLeft,
-    $if: () => !!onClose,
+    $if: () => !!onClose && !isFaceEditMode.value,
     onAction: () => onClose?.(),
     shortcuts: [{ key: 'Escape' }],
   });
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 8b3d672bfe..f2b9c2e157 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
@@ -6,6 +6,7 @@
   import { getNaturalSize, scaleToFit } from '$lib/utils/container-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
+  import { shortcut } from '$lib/actions/shortcut';
   import { Button, Input, modalManager, toastManager } from '@immich/ui';
   import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
   import { clamp } from 'lodash-es';
@@ -289,6 +290,8 @@
   };
 </script>
 
+<svelte:document use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: cancel }} />
+
 <div
   id="face-editor-data"
   class="absolute start-0 top-0 z-5 h-full w-full overflow-hidden"
diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index 7230146886..4721357012 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/web/src/lib/components/shared-components/combobox.svelte
@@ -345,8 +345,10 @@
         {
           shortcut: { key: 'Escape' },
           onShortcut: (event) => {
-            event.stopPropagation();
-            closeDropdown();
+            if (isOpen) {
+              event.stopPropagation();
+              closeDropdown();
+            }
           },
         },
       ]}