Merge pull request #3951 from nocodb/enhancement/3768-scroll-to-cell

Enhancement: Scroll to the active cell on active cell change

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

@@ -327,6 +327,22 @@ 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>
@@ -413,7 +429,7 @@ watch(
           </tr>
           </thead>
           <!-- this prevent select text from field if not in edit mode -->
-          <tbody @selectstart.prevent>
+          <tbody ref="tbodyEl" @selectstart.prevent>
           <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
             <template #default="{ state }">
               <tr class="nc-grid-row">
@@ -434,7 +450,8 @@ watch(
                       <a-checkbox v-model:checked="row.rowMeta.selected" />
                     </div>
                     <span class="flex-1" />
-                      <div v-if="!readOnly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+                    <div v-if="!readOnly && !isLocked" class="nc-expand"
+                         :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <span
                           v-if="row.rowMeta?.commentCount"
                           class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"