From e49aa4c3755fefae4e7f2003b1c7f5981158c19e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 3 Aug 2022 00:44:12 +0530
Subject: [PATCH] fix(gui-v2): show context menu only within table

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-column/EditOrAdd.vue           | 10 ++++++-
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 28 ++++++++++---------
 2 files changed, 24 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 b18bd37c90..d66716f003 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -117,7 +117,15 @@ watchEffect(() => {
             <!-- Cancel -->
             {{ $t('general.cancel') }}
           </a-button>
-          <a-button html-type="submit" type="primary" size="small" @click="addOrUpdate(reloadMeta); advancedOptions = false">
+          <a-button
+            html-type="submit"
+            type="primary"
+            size="small"
+            @click="
+              addOrUpdate(reloadMeta)
+              advancedOptions = false
+            "
+          >
             <!-- Save -->
             {{ $t('general.save') }}
           </a-button>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index e1197958ab..a45bcdcecc 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -55,7 +55,6 @@ const {
   updateOrSaveRow,
   changePage,
   addEmptyRow,
-  selectedRows,
   deleteRow,
   deleteSelectedRows,
   selectedAllRecords,
@@ -189,8 +188,8 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
 
 <template>
   <div class="flex flex-col h-100 min-h-0 w-100">
-    <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
-      <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
+    <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
+      <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
         <table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
             <tr class="group">
@@ -292,16 +291,19 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
             </tr>
           </tbody>
         </table>
-      </div>
-      <template #overlay>
-        <div class="bg-white shadow" @click="contextMenu = false">
-          <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div>
-          <div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div>
-          <div v-if="contextMenuTarget" class="nc-menu-item" @click="clearCell(contextMenuTarget)">Clear cell</div>
-          <div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">Insert new row</div>
-        </div>
-      </template>
-    </a-dropdown>
+        <template #overlay>
+          <div class="bg-white shadow" @click="contextMenu = false">
+            <div v-if="contextMenuTarget" class="nc-menu-item" @click="deleteRow(contextMenuTarget.row)">Delete row</div>
+            <div class="nc-menu-item" @click="deleteSelectedRows">Delete all selected rows</div>
+            <div v-if="contextMenuTarget" class="nc-menu-item" @click="clearCell(contextMenuTarget)">Clear cell</div>
+            <div v-if="contextMenuTarget" class="nc-menu-item" @click="addEmptyRow(contextMenuTarget.row + 1)">
+              Insert new row
+            </div>
+          </div>
+        </template>
+      </a-dropdown>
+    </div>
+
     <SmartsheetPagination />
   </div>
 </template>