From c610caa66742b7577ba4215b06c3422d9df775a1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 1 Nov 2022 12:18:05 +0530
Subject: [PATCH] feat(api): scroll to list item when necessary

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Comments.vue     |  2 +-
 .../virtual-cell/components/ListItems.vue     | 50 +++++++++++--------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index c6e921385e..80fd0dc135 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/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 },
 )
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 9a6bd94fec..420a74cec6 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/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,29 +105,37 @@ watch(expandedFormDlg, (nexVal) => {
   if (!nexVal && !isNew.value) vModel.value = false
 })
 
-const removeListeners = useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
-  switch (e.key) {
-    case 'ArrowUp':
-      selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1)
-      e.stopPropagation()
-      break
-    case 'ArrowDown':
-      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)
+const { cleanup } = useSelectedCellKeyupListener(
+  vModel,
+  (e: KeyboardEvent) => {
+    switch (e.key) {
+      case 'ArrowUp':
+        selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1)
         e.stopPropagation()
-      }
-      break
-  }
-}, true)
+        break
+      case 'ArrowDown':
+        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()
+        }
+        break
+    }
+  },
+  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">