diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index ad298abff6..9f7bc8073f 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/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!)"
>
{
}
}
-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
+}
@@ -63,7 +76,7 @@ const openDropDown = () => {
:class="{ 'h-full': column, '!text-gray-400': isKanban }"
@dblclick="openHeaderMenu"
@click.right="openDropDown"
- @click="isDropDownOpen = false"
+ @click="onClick"
>
{
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
+}
-
+
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 5339f9cf47..ad31e3e9e1 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/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
}
diff --git a/tests/playwright/pages/Dashboard/Grid/index.ts b/tests/playwright/pages/Dashboard/Grid/index.ts
index 901c852c92..3c4d6e62dc 100644
--- a/tests/playwright/pages/Dashboard/Grid/index.ts
+++ b/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();
}