feat(api): scroll to list item when necessary

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

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -16,7 +16,7 @@ watch(
     // todo: replace setTimeout
     setTimeout(() => {
       if (commentsWrapperEl.value) commentsWrapperEl.value.scrollTop = commentsWrapperEl.value?.scrollHeight
-    }, 200)
+    }, 200
   },
   { immediate: true },
 )

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onUnmounted } from '@vue/runtime-core'
+import { Card } from 'ant-design-vue'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {
@@ -104,7 +105,9 @@ watch(expandedFormDlg, (nexVal) => {
   if (!nexVal && !isNew.value) vModel.value = false
 })
 
-const removeListeners = useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
+const { cleanup } = useSelectedCellKeyupListener(
+  vModel,
+  (e: KeyboardEvent) => {
     switch (e.key) {
       case 'ArrowUp':
         selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1)
@@ -122,11 +125,17 @@ const removeListeners = useSelectedCellKeyupListener(vModel, (e: KeyboardEvent)
         }
         break
     }
-}, true)
+  },
+  true,
+)
 
 onUnmounted(() => {
-  removeListeners()
+  cleanup.value?.()
 })
+
+const activeRow = (el: InstanceType<typeof Card>) => {
+  el?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+}
 </script>
 
 <template>
@@ -162,9 +171,10 @@ onUnmounted(() => {
           <a-card
             v-for="(refRow, i) in childrenExcludedList?.list ?? []"
             :key="i"
+            :ref="selectedRowIndex === i ? activeRow : null"
             class="!my-4 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
+            :class="{ 'nc-selected-row': selectedRowIndex === i }"
             @click="linkRow(refRow)"
-            :class="{'nc-selected-row':selectedRowIndex === i}"
           >
             {{ refRow[relatedTablePrimaryValueProp] }}
             <span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1">