From 7aa6f6b3221d5e9442a304daef39b3c413cec13c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 30 Oct 2023 14:46:00 +0000
Subject: [PATCH] fix: Now warning modal shown when expanded form clicked
 outside incase of unsaved changes

---
 .../smartsheet/expanded-form/index.vue        | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index ae8c2dd4c5..8721c1f3f8 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -416,7 +416,22 @@ const showRightSections = computed(() => {
   return !isNew.value && commentsDrawer.value && isUIAllowed('commentList')
 })
 
-const preventModalStatus = computed(() => isCloseModalOpen.value || isPreventChangeModalOpen.value)
+const preventModalStatus = computed({
+  get: () => isCloseModalOpen.value || isPreventChangeModalOpen.value,
+  set: (v) => {
+    isCloseModalOpen.value = v
+  },
+})
+
+const onIsExpandedUpdate = (v: boolean) => {
+  if (changedColumns.value.size === 0 && !isUnsavedFormExist.value) {
+    isExpanded.value = v
+  } else if (!v) {
+    preventModalStatus.value = true
+  } else {
+    isExpanded.value = v
+  }
+}
 </script>
 
 <script lang="ts">
@@ -427,7 +442,7 @@ export default {
 
 <template>
   <NcModal
-    v-model:visible="isExpanded"
+    :visible="isExpanded"
     :footer="null"
     :width="commentsDrawer && isUIAllowed('commentList') ? 'min(80vw,1280px)' : 'min(80vw,1280px)'"
     :body-style="{ padding: 0 }"
@@ -435,6 +450,7 @@ export default {
     size="small"
     class="nc-drawer-expanded-form"
     :class="{ active: isExpanded }"
+    @update:visible="onIsExpandedUpdate"
   >
     <div class="h-[85vh] xs:(max-h-full) max-h-215 flex flex-col p-6">
       <div class="flex h-9.5 flex-shrink-0 w-full items-center nc-expanded-form-header relative mb-4 justify-between">