fix(web): don't swallow Escape when person name editor is closed (#32161)

fix(web): don't swallow Escape when person name editor is closed (#32123)


(cherry picked from commit 3a5fc38f85df38d73d5c3a21ab4a06d6090eb248)

Co-authored-by: Adi Čaušević <31798801+ChocolateChipKookie@users.noreply.github.com>
Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

web/src/lib/actions/click-outside.ts

@@ -12,10 +12,9 @@ interface Options {
  * @param options Object containing onOutclick and onEscape functions
  * @returns
  */
-export function clickOutside(node: HTMLElement, options: Options = {}): ActionReturn {
-  const { onOutclick, onEscape } = options;
-
+export function clickOutside(node: HTMLElement, options: Options = {}): ActionReturn<Options> {
   const handleClick = (event: MouseEvent) => {
+    const { onOutclick } = options;
     const targetNode = event.target as Node | null;
     if (node.contains(targetNode)) {
       return;
@@ -25,6 +24,7 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
   };
 
   const handleKey = (event: KeyboardEvent) => {
+    const { onEscape } = options;
     if (!matchesShortcut(event, { key: 'Escape' })) {
       return;
     }
@@ -39,6 +39,9 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
   node.addEventListener('keydown', handleKey, { capture: false });
 
   return {
+    update(newOptions: Options) {
+      options = newOptions;
+    },
     destroy() {
       document.removeEventListener('mousedown', handleClick, false);
       node.removeEventListener('keydown', handleKey, false);

web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -362,7 +362,7 @@
           class="relative w-fit p-4 pt-12 sm:px-6"
           use:clickOutside={{
             onOutclick: handleCancelEditName,
-            onEscape: handleCancelEditName,
+            onEscape: isEditingName ? handleCancelEditName : undefined,
           }}
           use:listNavigation={suggestionContainer}
         >