From d984662ba99d6693429fadd50e5e57fa930a6255 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Wed, 25 Oct 2023 12:51:29 +0000
Subject: [PATCH] fix: Removed white line coming up when column header is right
 clicked and skipped column column selection logic when left/right clicked
 when edit column modal is opened

---
 .../components/smartsheet/header/Cell.vue       | 17 +++++++++++++++--
 .../smartsheet/header/VirtualCell.vue           | 11 ++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index 4a3b9c3270..be95ede623 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -51,10 +51,23 @@ const openHeaderMenu = () => {
   }
 }
 
-const openDropDown = () => {
+const openDropDown = (e: Event) => {
   if (isForm.value || isExpandedForm.value || (!isUIAllowed('fieldEdit') && !isMobileMode.value)) return
+
+  e.preventDefault()
+  e.stopPropagation()
+
   isDropDownOpen.value = !isDropDownOpen.value
 }
+
+const onClick = (e: Event) => {
+  if (isDropDownOpen.value) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  isDropDownOpen.value = false
+}
 </script>
 
 <template>
@@ -63,7 +76,7 @@ const openDropDown = () => {
     :class="{ 'h-full': column, '!text-gray-400': isKanban }"
     @dblclick="openHeaderMenu"
     @click.right="openDropDown"
-    @click="isDropDownOpen = false"
+    @click="onClick"
   >
     <SmartsheetHeaderCellIcon
       v-if="column && !props.hideIcon"
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
index f312d8150d..62d595a52c 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCell.vue
@@ -128,13 +128,22 @@ const openHeaderMenu = () => {
     editColumnDropdown.value = true
   }
 }
+
+const openDropDown = (e: Event) => {
+  if (isForm.value || isExpandedForm.value || (!isUIAllowed('fieldEdit') && !isMobileMode.value)) return
+
+  e.preventDefault()
+  e.stopPropagation()
+
+  isDropDownOpen.value = !isDropDownOpen.value
+}
 </script>
 
 <template>
   <div
     class="flex items-center w-full h-full text-xs text-gray-500 font-weight-medium"
     @dblclick="openHeaderMenu"
-    @click.right="isDropDownOpen = !isDropDownOpen"
+    @click.right="openDropDown"
   >
     <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />