From 32fcee81bb7a2272888c64eb77649e53558230a9 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 9 Aug 2022 14:05:34 +0800
Subject: [PATCH] fix(gui-v2): SmartsheetColumnEditOrAdd overlay issue

---
 .../smartsheet-column/EditOrAdd.vue           |  2 +-
 .../nc-gui-v2/components/smartsheet/Form.vue  | 25 +++++++++----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 8c61269468..edd3350798 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -212,4 +212,4 @@ watch(
 :deep(.ant-form-item-explain) {
   @apply !min-h-[15px];
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 7137131b5f..25a4dcea94 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -401,19 +401,18 @@ onMounted(async () => {
             <!-- Drag and drop fields here to hide -->
             {{ $t('msg.info.dragDropHide') }}
           </div>
-          <a-button type="link" class="w-full caption mt-2" size="large" @click="showColumnDropdown = true">
-            <div class="flex items-center prose-sm justify-center text-gray-400">
-              <MdiPlusIcon />
-              <!-- Add new field to this table -->
-              {{ $t('activity.addField') }}
-            </div>
-          </a-button>
-          <SmartsheetColumnEditOrAdd
-            v-show="showColumnDropdown"
-            ref="editOrAddRef"
-            @submit="submitCallback"
-            @cancel="showColumnDropdown = false"
-          />
+          <a-dropdown v-model:visible="showColumnDropdown" :trigger="['click']">
+            <a-button type="link" class="w-full caption mt-2" size="large" @click="showColumnDropdown = true">
+              <div class="flex items-center prose-sm justify-center text-gray-400">
+                <MdiPlusIcon />
+                <!-- Add new field to this table -->
+                {{ $t('activity.addField') }}
+              </div>
+            </a-button>
+            <template #overlay>
+              <SmartsheetColumnEditOrAdd ref="editOrAddRef" @submit="submitCallback" @cancel="showColumnDropdown = false" />
+            </template>
+          </a-dropdown>
         </template>
       </draggable>
     </a-col>