From 9628ea2d245f289f324fea1048daa9a603ad2b4c Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Sun, 26 May 2024 21:43:30 +0000
Subject: [PATCH] fix(web): keyboard event propagation in modals (#9713)

* fix: key events propagating from modal, visible close button focus

* feat: set initial focus on the text field for album creation

* chore: step back duplicated changes
---
 .../full-screen-modal.svelte                  | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index dfd42be568..afc465a32d 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -43,13 +43,16 @@
   }
 </script>
 
-<FocusTrap>
-  <section
-    role="presentation"
-    in:fade={{ duration: 100 }}
-    out:fade={{ duration: 100 }}
-    class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
-  >
+<section
+  role="presentation"
+  in:fade={{ duration: 100 }}
+  out:fade={{ duration: 100 }}
+  class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
+  on:keydown={(event) => {
+    event.stopPropagation();
+  }}
+>
+  <FocusTrap>
     <div
       class="z-[9999] max-w-[95vw] max-h-[95vh] {modalWidth} overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
       style="max-height: min(95vh, 900px);"
@@ -72,5 +75,5 @@
         </div>
       {/if}
     </div>
-  </section>
-</FocusTrap>
+  </FocusTrap>
+</section>