fix(gui): bind keydown event to table body to avoid unexpected behaviour

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/dlg/TableRename.vue

@@ -80,9 +80,7 @@ const validators = computed(() => {
               return reject(new Error('Leading or trailing whitespace not allowed in table name'))
             }
             if (
-              !(tables?.value || []).every(
-                (t) => t.id === tableMeta.id || t.title.toLowerCase() !== (value || '').toLowerCase(),
-              )
+              !(tables?.value || []).every((t) => t.id === tableMeta.id || t.title.toLowerCase() !== (value || '').toLowerCase())
             ) {
               return reject(new Error('Duplicate table alias'))
             }

packages/nc-gui/components/smartsheet/Grid.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { ColumnReqType, ColumnType, GridType, TableType, ViewType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import { querySelector } from 'ultrahtml/selector'
 import {
   ActiveViewInj,
   CellUrlDisableOverlayInj,
@@ -45,7 +46,6 @@ import {
   useViewData,
   watch,
 } from '#imports'
-import { querySelector } from 'ultrahtml/selector'
 import type { Row } from '~/lib'
 
 const { t } = useI18n()
@@ -98,7 +98,6 @@ const contextMenuTarget = ref<{ row: number; col: number } | null>(null)
 const expandedFormDlg = ref(false)
 const expandedFormRow = ref<Row>()
 const expandedFormRowState = ref<Record<string, any>>()
-const tbodyEl = ref<HTMLElement>()
 const gridWrapper = ref<HTMLElement>()
 const tableHead = ref<HTMLElement>()
 
@@ -183,6 +182,7 @@ const {
   clearSelectedRange,
   copyValue,
   isCellActive,
+  tbodyEl,
 } = useMultiSelect(
   meta,
   fields,

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

@@ -1,4 +1,5 @@
 import type { MaybeRef } from '@vueuse/core'
+import type { HTMLElement } from 'happy-dom'
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Cell } from './cellRange'
@@ -42,6 +43,8 @@ export function useMultiSelect(
 ) {
   const meta = ref(_meta)
 
+  const tbodyEl = ref<HTMLElement>()
+
   const { t } = useI18n()
 
   const { copy } = useCopy()
@@ -374,8 +377,8 @@ export function useMultiSelect(
 
   const clearSelectedRange = selectedRange.clear.bind(selectedRange)
 
-  useEventListener(document, 'keydown', handleKeyDown)
-  useEventListener(document, 'mouseup', handleMouseUp)
+  useEventListener(tbodyEl, 'keydown', handleKeyDown)
+  useEventListener(tbodyEl, 'mouseup', handleMouseUp)
 
   return {
     isCellActive,
@@ -386,5 +389,6 @@ export function useMultiSelect(
     isCellSelected,
     activeCell,
     handleCellClick,
+    tbodyEl,
   }
 }