From 301e630405d4b3491ee5276f6b2f0475f851b884 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Mon, 1 Apr 2024 21:27:02 +0000
Subject: [PATCH] Update EditModal component to handle Escape key press

---
 src/lib/components/EditModal.svelte | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte
index d13f56f..2656d70 100644
--- a/src/lib/components/EditModal.svelte
+++ b/src/lib/components/EditModal.svelte
@@ -9,6 +9,8 @@
         import { onMount } from 'svelte';
         let modal: HTMLDialogElement;
 
+        let originalName = editName;
+
         onMount(() => {
                 modal = document.getElementById("my_modal_1") as HTMLDialogElement;
                 if (modal) {
@@ -27,11 +29,19 @@
     function close() {
         dispatch('close');
     }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === 'Escape') {
+            close();
+        }
+    }
 </script>
 
-<dialog id="my_modal_1" class="modal">
-    <div class="modal-box">
-        <h3 class="font-bold text-lg">Edit Adventure {editName}</h3>
+<dialog id="my_modal_1" class="modal" >
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+        <h3 class="font-bold text-lg">Edit Adventure {originalName}</h3>
         <p class="py-4">Press ESC key or click the button below to close</p>
         <div class="modal-action">
             <form method="dialog">