diff --git a/src/components/styled/SWModal.svelte b/src/components/styled/SWModal.svelte
index f145ff7..502ee88 100644
--- a/src/components/styled/SWModal.svelte
+++ b/src/components/styled/SWModal.svelte
@@ -19,6 +19,7 @@
 
 <script lang="ts">
     import {onMount} from "svelte";
+    import {stopPropagation} from "@components/util.ts";
 
   interface Props {
     title: string;
@@ -67,8 +68,8 @@
     })
 </script>
 
-<dialog bind:this={dialog} onclose={close} oncancel={close} onclick={() => dialog.close()} aria-hidden="true" class="max-h-full max-w-md w-full rounded-lg shadow-lg dark:bg-neutral-800 dark:text-neutral-100">
-    <div onclick={onclick} aria-hidden="true">
+<dialog bind:this={dialog} onclose={close} onclick={(e) => dialog.close()} aria-hidden="true" class="max-h-full max-w-md w-full rounded-lg shadow-lg dark:bg-neutral-800 dark:text-neutral-100">
+    <div onclick={stopPropagation(onclick)} aria-hidden="true">
         <div class="p-6 border-b border-neutral-200 dark:border-neutral-700">
             <h1 class="text-4xl font-bold">{title}</h1>
         </div>
diff --git a/src/components/util.ts b/src/components/util.ts
index 9259500..2a18b93 100644
--- a/src/components/util.ts
+++ b/src/components/util.ts
@@ -23,4 +23,11 @@ export function window<T>(arr: T[], len: number): T[][] {
         result.push(arr.slice(i, i + len));
     }
     return result;
+}
+
+export function stopPropagation(a: any) {
+    return (e: Event) => {
+        e.stopPropagation();
+        a(e);
+    };
 }
\ No newline at end of file