From 3474d65d4bf20dbaefe0b26175e703895a5c965c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 8 Aug 2022 18:04:48 +0800
Subject: [PATCH] feat(gui-v2): add onClickOutside for editOrAddRef

---
 packages/nc-gui-v2/components/smartsheet/Form.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 631f6f793b..aa33148871 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -70,6 +70,8 @@ const availableColumns = inject(FieldsInj, ref([]))
 
 const rowRef = ref()
 
+const editOrAddRef = ref()
+
 const systemFieldsIds = ref<Record<string, any>>([])
 
 const showColumnDropdown = ref(false)
@@ -255,6 +257,10 @@ onClickOutside(rowRef, () => {
   activeRow.value = ''
 })
 
+onClickOutside(editOrAddRef, () => {
+  showColumnDropdown.value = false
+})
+
 onMounted(async () => {
   await loadFormView()
   setFormData()
@@ -337,10 +343,14 @@ watch(
               {{ $t('activity.addField') }}
             </div>
           </a-button>
-          <!-- TODO #1: set showColumnDropdown to false after saving  -->
           <!-- TODO #2: make the component out of sidebar  -->
           <!-- TODO #3: reload view  -->
-          <SmartsheetColumnEditOrAdd v-if="showColumnDropdown" @click.stop @cancel="showColumnDropdown = false" />
+          <SmartsheetColumnEditOrAdd
+            ref="editOrAddRef"
+            v-if="showColumnDropdown"
+            @click.stop
+            @cancel="showColumnDropdown = false"
+          />
         </template>
       </draggable>
     </a-col>