From a6d25f68e0cb4dc7844966cb11c81fb3d72556a9 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Thu, 15 Feb 2024 10:25:32 +0000
Subject: [PATCH 1/3] fix(nc-gui): linked record keyboard navigation

---
 .../components/virtual-cell/components/ListChildItems.vue      | 3 ++-
 .../nc-gui/components/virtual-cell/components/ListItem.vue     | 3 ++-
 .../nc-gui/components/virtual-cell/components/ListItems.vue    | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index a7ba0c2443..34a11a21fe 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { type ColumnType, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
-import type { Row } from '#imports'
+import { type Row } from '#imports'
 import InboxIcon from '~icons/nc-icons/inbox'
 
 import {
@@ -271,6 +271,7 @@ watch([filterQueryRef, isDataExist], () => {
               :is-linked="childrenList?.list ? isChildrenListLinked[Number.parseInt(id)] : true"
               :is-loading="isChildrenListLoading[Number.parseInt(id)]"
               @expand="onClick(refRow)"
+              @keydown.space.prevent="linkOrUnLink(refRow, id)"
               @click="linkOrUnLink(refRow, id)"
             />
           </template>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItem.vue b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
index 6cb49e0848..79e16aed3f 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItem.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItem.vue
@@ -89,7 +89,8 @@ const displayValue = computed(() => {
 
 <template>
   <a-card
-    class="nc-list-item !border-1 group transition-all !rounded-xl relative !mb-2 !border-gray-200 hover:bg-gray-50"
+    tabindex="0"
+    class="nc-list-item !outline-brand-500 !border-1 group transition-all !rounded-xl relative !mb-2 !border-gray-200 hover:bg-gray-50"
     :class="{
       '!bg-white': isLoading,
       '!border-1': isLinked && !isLoading,
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 5baa459194..04aa597389 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -328,6 +328,7 @@ const onCreatedRecord = (record: any) => {
                 expandedFormDlg = true
               }
             "
+            @keydown.space.prevent="() => onClick(refRow, id)"
             @click="() => onClick(refRow, id)"
           />
         </template>

From 1b888045078065d4ff06edf013b0df66d98efc9c Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Thu, 15 Feb 2024 10:25:33 +0000
Subject: [PATCH 2/3] fix(nc-gui): list child items shortcut

---
 .../components/ListChildItems.vue             | 29 ++++++++++++++-----
 .../virtual-cell/components/ListItems.vue     | 26 +++++++++++++----
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 34a11a21fe..69bb72128e 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -1,22 +1,20 @@
 <script lang="ts" setup>
 import { type ColumnType, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
-import { type Row } from '#imports'
-import InboxIcon from '~icons/nc-icons/inbox'
-
 import {
   ColumnInj,
   IsFormInj,
   IsPublicInj,
   ReadonlyInj,
+  type Row,
   computed,
   inject,
   isPrimary,
-  onKeyStroke,
   ref,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
   useVModel,
 } from '#imports'
+import InboxIcon from '~icons/nc-icons/inbox'
 
 interface Prop {
   modelValue?: boolean
@@ -129,10 +127,6 @@ watch(expandedFormDlg, () => {
   }
 })
 
-onKeyStroke('Escape', () => {
-  vModel.value = false
-})
-
 /*
    to render same number of skeleton as the number of cards
    displayed
@@ -181,6 +175,24 @@ watch([filterQueryRef, isDataExist], () => {
     filterQueryRef.value?.focus()
   }
 })
+
+const linkedShortcuts = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    vModel.value = false
+  } else if (e.key !== 'Tab' && e.key !== 'Shift' && e.key !== 'Enter' && e.key !== ' ') {
+    try {
+      filterQueryRef.value?.focus()
+    } catch (e) {}
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', linkedShortcuts)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', linkedShortcuts)
+})
 </script>
 
 <template>
@@ -272,6 +284,7 @@ watch([filterQueryRef, isDataExist], () => {
               :is-loading="isChildrenListLoading[Number.parseInt(id)]"
               @expand="onClick(refRow)"
               @keydown.space.prevent="linkOrUnLink(refRow, id)"
+              @keydown.enter.prevent="() => onClick(refRow, id)"
               @click="linkOrUnLink(refRow, id)"
             />
           </template>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 04aa597389..bb42c803cb 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { RelationTypes, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import { RelationTypes, isLinksOrLTAR, isSystemColumn } from 'nocodb-sdk'
 import InboxIcon from '~icons/nc-icons/inbox'
 import {
   ColumnInj,
@@ -8,7 +8,6 @@ import {
   SaveRowInj,
   computed,
   inject,
-  onKeyStroke,
   ref,
   useLTARStoreOrThrow,
   useSmartsheetRowStoreOrThrow,
@@ -173,10 +172,6 @@ watch(filterQueryRef, () => {
   filterQueryRef.value?.focus()
 })
 
-onKeyStroke('Escape', () => {
-  vModel.value = false
-})
-
 const onClick = (refRow: any, id: string) => {
   if (isSharedBase.value) return
   if (isChildrenExcludedListLinked.value[Number.parseInt(id)]) {
@@ -221,6 +216,24 @@ const onCreatedRecord = (record: any) => {
 
   message.success(msgVNode)
 }
+
+const linkedShortcuts = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    vModel.value = false
+  } else if (e.key !== 'Tab' && e.key !== 'Shift' && e.key !== 'Enter' && e.key !== ' ') {
+    try {
+      filterQueryRef.value?.focus()
+    } catch (e) {}
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', linkedShortcuts)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', linkedShortcuts)
+})
 </script>
 
 <template>
@@ -329,6 +342,7 @@ const onCreatedRecord = (record: any) => {
               }
             "
             @keydown.space.prevent="() => onClick(refRow, id)"
+            @keydown.enter.prevent="() => onClick(refRow, id)"
             @click="() => onClick(refRow, id)"
           />
         </template>

From 3ff5497fc44d6b701dfd16164d77d67f002e8fa9 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Thu, 15 Feb 2024 10:25:33 +0000
Subject: [PATCH 3/3] fix(nc-gui): add arrow shortcuts

---
 .../virtual-cell/components/ListChildItems.vue         | 10 ++++++++++
 .../components/virtual-cell/components/ListItems.vue   | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 69bb72128e..f4351b3df6 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -179,6 +179,16 @@ watch([filterQueryRef, isDataExist], () => {
 const linkedShortcuts = (e: KeyboardEvent) => {
   if (e.key === 'Escape') {
     vModel.value = false
+  } else if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    try {
+      e.target?.nextElementSibling?.focus()
+    } catch (e) {}
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    try {
+      e.target?.previousElementSibling?.focus()
+    } catch (e) {}
   } else if (e.key !== 'Tab' && e.key !== 'Shift' && e.key !== 'Enter' && e.key !== ' ') {
     try {
       filterQueryRef.value?.focus()
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index bb42c803cb..2fcaa7ea7a 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -220,6 +220,16 @@ const onCreatedRecord = (record: any) => {
 const linkedShortcuts = (e: KeyboardEvent) => {
   if (e.key === 'Escape') {
     vModel.value = false
+  } else if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    try {
+      e.target?.nextElementSibling?.focus()
+    } catch (e) {}
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    try {
+      e.target?.previousElementSibling?.focus()
+    } catch (e) {}
   } else if (e.key !== 'Tab' && e.key !== 'Shift' && e.key !== 'Enter' && e.key !== ' ') {
     try {
       filterQueryRef.value?.focus()