fix: prevent cell switch on keypress when picker, dropdown or LTAR list is in open state

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

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

@@ -172,6 +172,13 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
   makeEditable,
   scrollToCell,
   (e: KeyboardEvent) => {
+    // ignore navigating if picker(Date, Time, DateTime, Year)
+    // or single/multi select options is open
+    const activePickerOrDropdownEl = document.querySelector(
+      '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
+    )
+    if (activePickerOrDropdownEl) return true
+
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
     if (e.key === 'Space') {
       if (selected.row !== null && !editEnabled) {
@@ -373,10 +380,15 @@ onClickOutside(smartTable, (e) => {
 
   // ignore unselecting if clicked inside or on the picker(Date, Time, DateTime, Year)
   // or single/multi select options
-  const activePickerEl = document.querySelector(
+  const activePickerOrDropdownEl = document.querySelector(
     '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
   )
-  if (e.target && activePickerEl && (activePickerEl === e.target || activePickerEl?.contains(e.target as Element))) return
+  if (
+    e.target &&
+    activePickerOrDropdownEl &&
+    (activePickerOrDropdownEl === e.target || activePickerOrDropdownEl?.contains(e.target as Element))
+  )
+    return
 
   selected.row = null
   selected.col = null

packages/nc-gui/components/virtual-cell/components/ListItems.vue

@@ -106,6 +106,10 @@ watch(expandedFormDlg, (nexVal) => {
 
 useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
   switch (e.key) {
+    case 'ArrowLeft':
+    case 'ArrowRight':
+      e.stopPropagation()
+      break
     case 'ArrowUp':
       selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1)
       e.stopPropagation()
@@ -114,19 +118,18 @@ useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
       selectedRowIndex.value = Math.min(childrenExcludedList.value?.list?.length - 1, selectedRowIndex.value + 1)
       e.stopPropagation()
       break
-    case 'Enter':
-      {
-        const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
-        if (selectedRow) {
-          linkRow(selectedRow)
-          e.stopPropagation()
-        }
+    case 'Enter': {
+      const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
+      if (selectedRow) {
+        linkRow(selectedRow)
+        e.stopPropagation()
       }
+    }
       break
   }
 })
-const activeRow = (el?: InstanceType<typeof Card>) => {
-  el?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+const activeRow = (vNode?: InstanceType<typeof Card>) => {
+  vNode?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 </script>
 

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

@@ -6,15 +6,15 @@ export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e
     watch(selected, (nextVal, _, cleanup) => {
       // bind listener when `selected` is truthy
       if (nextVal) {
-        document.addEventListener('keyup', handler)
+        document.addEventListener('keydown', handler, true)
         // if `selected` is falsy then remove the event handler
       } else {
-        document.removeEventListener('keyup', handler)
+        document.removeEventListener('keydown', handler, true)
       }
 
       // cleanup is called whenever the watcher is re-evaluated or stopped
       cleanup(() => {
-        document.removeEventListener('keyup', handler)
+        document.removeEventListener('keydown', handler, true)
       })
     })
   }