From d800b71b73e934626c3ae06a93382169894ec8b8 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Tue, 25 Jul 2023 14:42:59 +0200
Subject: [PATCH] Enable closing modals by clicking backdrop

---
 frontend/src/lib/components/modals/Modal.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/modals/Modal.svelte b/frontend/src/lib/components/modals/Modal.svelte
index dbc92c013..861346800 100644
--- a/frontend/src/lib/components/modals/Modal.svelte
+++ b/frontend/src/lib/components/modals/Modal.svelte
@@ -88,7 +88,13 @@
 
 {#if $open}
   <!-- using DaisyUI modal https://daisyui.com/components/modal/ -->
-  <dialog bind:this={dialog} class="modal justify-items-center" class:modal-bottom={bottom} on:cancel={cancelModal}>
+  <dialog
+    bind:this={dialog}
+    class="modal justify-items-center"
+    class:modal-bottom={bottom}
+    on:cancel={cancelModal}
+    on:close={cancelModal}
+  >
     <div class="modal-box max-w-3xl">
       {#if showCloseButton}
         <button class="btn btn-sm btn-circle absolute right-2 top-2" aria-label={$t('close')} on:click={cancelModal}
@@ -107,5 +113,8 @@
         </div>
       {/if}
     </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>invisible</button>
+    </form>
   </dialog>
 {/if}