Merge pull request #6803 from nocodb/nc-fix/column-click-selection

Added column click selection

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -704,6 +704,15 @@ const deleteSelectedRangeOfRows = () => {
   })
 }
 
+const selectColumn = (columnId: string) => {
+  const colIndex = fields.value.findIndex((col) => col.id === columnId)
+  if (colIndex !== -1) {
+    makeActive(0, colIndex)
+    selectedRange.startRange({ row: 0, col: colIndex })
+    selectedRange.endRange({ row: dataRef.value.length - 1, col: colIndex })
+  }
+}
+
 /** On clicking outside of table reset active cell  */
 onClickOutside(tableBodyEl, (e) => {
   // do nothing if mousedown on the scrollbar (scrolling)
@@ -1266,6 +1275,7 @@ const loaderText = computed(() => {
                   @xcstartresizing="onXcStartResizing(col.id, $event)"
                   @xcresize="onresize(col.id, $event)"
                   @xcresizing="onXcResizing(col.id, $event)"
+                  @click="selectColumn(col.id!)"
                 >
                   <div class="w-full h-full flex items-center">
                     <LazySmartsheetHeaderVirtualCell

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"

packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@@ -30,6 +30,8 @@ const column = toRef(props, 'column')
 
 const hideMenu = toRef(props, 'hideMenu')
 
+const { isMobileMode } = useGlobal()
+
 const editColumnDropdown = ref(false)
 
 const isDropDownOpen = ref(false)
@@ -120,10 +122,29 @@ const closeAddColumnDropdown = () => {
   columnOrder.value = null
   editColumnDropdown.value = false
 }
+
+const openHeaderMenu = () => {
+  if (!isForm.value && !isExpandedForm.value && isUIAllowed('fieldEdit') && !isMobileMode.value) {
+    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 text-xs text-gray-500 font-weight-medium" @click.right="isDropDownOpen = !isDropDownOpen">
+  <div
+    class="flex items-center w-full h-full text-xs text-gray-500 font-weight-medium"
+    @dblclick="openHeaderMenu"
+    @click.right="openDropDown"
+  >
     <LazySmartsheetHeaderVirtualCellIcon v-if="column && !props.hideIcon" />
 
     <a-tooltip placement="bottom">

packages/nc-gui/composables/useMultiSelect/index.ts

@@ -680,6 +680,14 @@ export function useMultiSelect(
             }
           }
 
+          // Handle escape
+          if (e.key === 'Escape') {
+            selectedRange.clear()
+
+            activeCell.col = null
+            activeCell.row = null
+          }
+
           if (unref(editEnabled) || e.ctrlKey || e.altKey || e.metaKey) {
             return true
           }

tests/playwright/pages/Dashboard/Grid/index.ts

@@ -144,6 +144,9 @@ export class GridPage extends BasePage {
       await this.rootPage.waitForTimeout(300);
     }
 
+    await this.rootPage.keyboard.press('Escape');
+    await this.rootPage.waitForTimeout(300);
+
     await this.dashboard.waitForLoaderToDisappear();
   }
 
@@ -180,6 +183,9 @@ export class GridPage extends BasePage {
       await this.rootPage.waitForTimeout(300);
     }
 
+    await this.rootPage.keyboard.press('Escape');
+    await this.rootPage.waitForTimeout(300);
+
     await this.dashboard.waitForLoaderToDisappear();
   }