From d11fa385c565d3030dc5fda969a23d5c9beeea69 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 12 Oct 2022 20:28:46 +0530
Subject: [PATCH 1/2] refactor(gui): trigger scroll to cell only on key
 navigation

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     | 39 ++++++++++++-------
 .../composables/useMultiSelect/index.ts       | 23 +++++++++--
 2 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 9ab3188926..10bbf9d478 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -107,6 +107,19 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
   isPkAvail,
   clearCell,
   makeEditable,
+  () => {
+    if (selected.row !== null && selected.col !== null) {
+      // get active cell
+      const td = tbodyEl.value?.querySelectorAll('tr')[selected.row]?.querySelectorAll('td')[selected.col + 1]
+      if (!td) return
+      // scroll into the active cell
+      td.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+        inline: 'end',
+      })
+    }
+  },
 )
 
 onMounted(loadGridViewColumns)
@@ -353,19 +366,19 @@ watch(
 
 const tbodyEl = ref<HTMLElement>()
 
-watch([() => selected.row, () => selected.col], ([row, col]) => {
-  if (row !== null && col !== null) {
-    // get active cell
-    const td = tbodyEl.value?.querySelectorAll('tr')[row]?.querySelectorAll('td')[col + 1]
-    if (!td) return
-    // scroll into the active cell
-    td.scrollIntoView({
-      behavior: 'smooth',
-      block: 'end',
-      inline: 'end',
-    })
-  }
-})
+// watch([() => selected.row, () => selected.col], ([row, col]) => {
+//   if (row !== null && col !== null) {
+//     // get active cell
+//     const td = tbodyEl.value?.querySelectorAll('tr')[row]?.querySelectorAll('td')[col + 1]
+//     if (!td) return
+//     // scroll into the active cell
+//     td.scrollIntoView({
+//       behavior: 'smooth',
+//       block: 'end',
+//       inline: 'end',
+//     })
+//   }
+// })
 </script>
 
 <template>
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 024e984294..38df51d212 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -17,6 +17,7 @@ export function useMultiSelect(
   isPkAvail: MaybeRef<boolean>,
   clearCell: Function,
   makeEditable: Function,
+  scrollToActiveCell?: () => void,
 ) {
   const { t } = useI18n()
 
@@ -39,6 +40,7 @@ export function useMultiSelect(
     clearRangeRows()
     selected.row = row
     selected.col = col
+    scrollToActiveCell?.()
   }
 
   function selectBlock(row: number, col: number) {
@@ -159,6 +161,7 @@ export function useMultiSelect(
             selected.col = 0
           }
         }
+        scrollToActiveCell?.()
         break
       /** on enter key press make cell editable */
       case 'Enter':
@@ -178,25 +181,37 @@ export function useMultiSelect(
       case 'ArrowRight':
         e.preventDefault()
         clearRangeRows()
-        if (selected.col < unref(columnLength) - 1) selected.col++
+        if (selected.col < unref(columnLength) - 1) {
+          selected.col++
+          scrollToActiveCell?.()
+        }
         break
       case 'ArrowLeft':
         clearRangeRows()
         e.preventDefault()
         clearRangeRows()
-        if (selected.col > 0) selected.col--
+        if (selected.col > 0) {
+          selected.col--
+          scrollToActiveCell?.()
+        }
         break
       case 'ArrowUp':
         clearRangeRows()
         e.preventDefault()
         clearRangeRows()
-        if (selected.row > 0) selected.row--
+        if (selected.row > 0) {
+          selected.row--
+          scrollToActiveCell?.()
+        }
         break
       case 'ArrowDown':
         clearRangeRows()
         e.preventDefault()
         clearRangeRows()
-        if (selected.row < unref(data).length - 1) selected.row++
+        if (selected.row < unref(data).length - 1) {
+          selected.row++
+          scrollToActiveCell?.()
+        }
         break
       default:
         {

From 45846554103475564525950925be24803d131100 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 12 Oct 2022 20:36:41 +0530
Subject: [PATCH 2/2] fix(gui): scroll to view only if required

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     | 21 +++----------------
 .../composables/useMultiSelect/index.ts       |  1 -
 2 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 10bbf9d478..b6270a331a 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -83,6 +83,7 @@ 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 {
   isLoading,
@@ -115,8 +116,8 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
       // scroll into the active cell
       td.scrollIntoView({
         behavior: 'smooth',
-        block: 'end',
-        inline: 'end',
+        block: 'nearest',
+        inline: 'nearest',
       })
     }
   },
@@ -363,22 +364,6 @@ watch(
   },
   { immediate: true },
 )
-
-const tbodyEl = ref<HTMLElement>()
-
-// watch([() => selected.row, () => selected.col], ([row, col]) => {
-//   if (row !== null && col !== null) {
-//     // get active cell
-//     const td = tbodyEl.value?.querySelectorAll('tr')[row]?.querySelectorAll('td')[col + 1]
-//     if (!td) return
-//     // scroll into the active cell
-//     td.scrollIntoView({
-//       behavior: 'smooth',
-//       block: 'end',
-//       inline: 'end',
-//     })
-//   }
-// })
 </script>
 
 <template>
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 38df51d212..82e41b9ea0 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -40,7 +40,6 @@ export function useMultiSelect(
     clearRangeRows()
     selected.row = row
     selected.col = col
-    scrollToActiveCell?.()
   }
 
   function selectBlock(row: number, col: number) {