From 8180fbae3befa53439309cf4b42207fc53e776bc Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 20 Jan 2024 11:42:31 +0100
Subject: [PATCH] improve modal behavior

---
 .../apps/components/layout/AppModal.svelte        | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppModal.svelte b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
index c7ec4b880b..0a32c957ba 100644
--- a/frontend/src/lib/components/apps/components/layout/AppModal.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppModal.svelte
@@ -50,6 +50,7 @@
 	}
 
 	function closeDrawer(): void {
+		console.log('Close drawer')
 		open = false
 	}
 
@@ -58,14 +59,23 @@
 		configuration
 	)
 
+	let unclickableOutside = false
+	function unclosableModal() {
+		unclickableOutside = true
+		setTimeout(() => {
+			unclickableOutside = false
+		}, 1000)
+	}
 	$componentControl[id] = {
 		openModal: () => {
+			unclosableModal()
 			open = true
 		},
 		closeModal: () => {
 			open = false
 		},
 		open: () => {
+			unclosableModal()
 			open = true
 		},
 		close: () => {
@@ -78,6 +88,7 @@
 
 <InitializeComponent {id} />
 
+{open}
 {#each Object.keys(components['modalcomponent'].initialData.configuration) as key (key)}
 	<ResolveConfig
 		{id}
@@ -147,8 +158,8 @@
 			style={css?.popup?.style}
 			class={twMerge('mx-24 mt-8 bg-surface rounded-lg relative', css?.popup?.class)}
 			use:clickOutside={false}
-			on:click_outside={() => {
-				if ($mode !== 'dnd') {
+			on:click_outside={(e) => {
+				if ($mode !== 'dnd' && !unclickableOutside) {
 					closeDrawer()
 				}
 			}}