From e92f8f1b254343926820481064b9d3704a3483c3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 28 Oct 2022 12:07:58 +0530
Subject: [PATCH 01/36] fix(gui): block cell level arrow navigation when single
 select is open

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/SingleSelect.vue   | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index cb9258505c..bdccb6a872 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -2,7 +2,17 @@
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import { ActiveCellInj, ColumnInj, IsKanbanInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  IsKanbanInj,
+  ReadonlyInj,
+  computed,
+  inject,
+  ref,
+  useEventListener,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue?: string | undefined
@@ -34,7 +44,7 @@ const options = computed<SelectOptionType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? // todo: fix colOptions type, options does not exist as a property
-        (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
+      (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
       : []
     for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
@@ -50,6 +60,11 @@ const handleKeys = (e: KeyboardEvent) => {
       e.preventDefault()
       isOpen.value = false
       break
+    case 'ArrowDown':
+    case 'ArrowUp':
+    case 'Enter':
+      e.stopPropagation()
+      break
   }
 }
 
@@ -110,9 +125,11 @@ watch(isOpen, (n, _o) => {
 .rounded-tag {
   @apply py-0 px-[12px] rounded-[12px];
 }
+
 :deep(.ant-tag) {
   @apply "rounded-tag";
 }
+
 :deep(.ant-select-clear) {
   opacity: 1;
 }

From 9f1802b2bdfb9248b980234c3c1eb4ff7317c94b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 28 Oct 2022 12:08:43 +0530
Subject: [PATCH 02/36] fix(gui): block cell level arrow navigation when multi
 select is open

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/MultiSelect.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 0da8f1f871..9fe19858b0 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -91,6 +91,8 @@ const handleKeys = (e: KeyboardEvent) => {
       e.preventDefault()
       isOpen.value = false
       break
+    case 'ArrowDown':
+    case 'ArrowUp':
     case 'Enter':
       e.stopPropagation()
       break

From 59964d5c383c4516ba06c9ab30c9690ba6c5a5be Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 28 Oct 2022 16:33:09 +0530
Subject: [PATCH 03/36] fix(gui): stop event bubbling at input level

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Currency.vue    | 4 ++++
 packages/nc-gui/components/cell/Decimal.vue     | 4 ++++
 packages/nc-gui/components/cell/Duration.vue    | 4 ++++
 packages/nc-gui/components/cell/Email.vue       | 6 +++++-
 packages/nc-gui/components/cell/Float.vue       | 4 ++++
 packages/nc-gui/components/cell/Integer.vue     | 4 ++++
 packages/nc-gui/components/cell/Percent.vue     | 4 ++++
 packages/nc-gui/components/cell/PhoneNumber.vue | 3 ++-
 packages/nc-gui/components/cell/Text.vue        | 4 ++++
 packages/nc-gui/components/cell/TextArea.vue    | 4 ++++
 packages/nc-gui/components/cell/Url.vue         | 4 ++++
 11 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index 5cccfb7cf1..bff861c977 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -61,6 +61,10 @@ onMounted(() => {
     v-model="vModel"
     class="w-full h-full border-none outline-none px-2"
     @blur="submitCurrency"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
 
   <span v-else-if="vModel">{{ currency }}</span>
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 9581665304..743186fd30 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -30,6 +30,10 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     type="number"
     step="0.1"
     @blur="editEnabled = false"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index 4a8a833369..219bc1280b 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -84,6 +84,10 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
       @blur="submitDuration"
       @keypress="checkDurationFormat($event)"
       @keydown.enter="submitDuration"
+      @keydown.down.stop
+      @keydown.left.stop
+      @keydown.right.stop
+      @keydown.up.stop
     />
 
     <span v-else> {{ localState }}</span>
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index 2ab60c42f6..d90bf0f8f5 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -24,7 +24,11 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm px-2" @blur="editEnabled = false" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm px-2" @blur="editEnabled = false"
+         @keydown.down.stop
+         @keydown.left.stop
+         @keydown.right.stop
+         @keydown.up.stop/>
 
   <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}
diff --git a/packages/nc-gui/components/cell/Float.vue b/packages/nc-gui/components/cell/Float.vue
index 111f7beb72..9e0a37921a 100644
--- a/packages/nc-gui/components/cell/Float.vue
+++ b/packages/nc-gui/components/cell/Float.vue
@@ -30,6 +30,10 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     type="number"
     step="0.1"
     @blur="editEnabled = false"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index 63c15a5546..7b441c336b 100644
--- a/packages/nc-gui/components/cell/Integer.vue
+++ b/packages/nc-gui/components/cell/Integer.vue
@@ -34,6 +34,10 @@ function onKeyDown(evt: KeyboardEvent) {
     type="number"
     @blur="editEnabled = false"
     @keydown="onKeyDown"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index 381b46df05..c518033aec 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -21,6 +21,10 @@ const vModel = useVModel(props, 'modelValue', emits)
     class="w-full !border-none text-base"
     :class="{ '!px-2': editEnabled }"
     type="number"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue
index 0397b5ff55..618fb25182 100644
--- a/packages/nc-gui/components/cell/PhoneNumber.vue
+++ b/packages/nc-gui/components/cell/PhoneNumber.vue
@@ -17,5 +17,6 @@ const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <LazyCellText v-model="vModel" />
+  <LazyCellText
+    v-model="vModel" />
 </template>
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 53e7aa02b1..9094a4adcb 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -27,6 +27,10 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     class="h-full w-full outline-none bg-transparent"
     :class="{ '!px-2': editEnabled }"
     @blur="editEnabled = false"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
 
   <span v-else>{{ vModel }}</span>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index db3b054bcf..421be3d606 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -26,6 +26,10 @@ const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
     @blur="editEnabled = false"
     @keydown.alt.enter.stop
     @keydown.shift.enter.stop
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
   />
 
   <span v-else>{{ vModel }}</span>
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 31d0b99be7..b785332aa5 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -79,6 +79,10 @@ watch(
       v-model="vModel"
       class="outline-none text-sm w-full px-2"
       @blur="editEnabled = false"
+      @keydown.down.stop
+      @keydown.left.stop
+      @keydown.right.stop
+      @keydown.up.stop
     />
 
     <nuxt-link

From f59ee815860a114503a165d3a34fd4a7862af3b7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 01:40:24 +0530
Subject: [PATCH 04/36] feat: open select options on enter key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 32 ++++++++++++++-----
 .../nc-gui/components/cell/SingleSelect.vue   |  3 ++
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 9fe19858b0..d57f4490da 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -16,6 +16,7 @@ import {
   useProject,
   watch,
 } from '#imports'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
@@ -73,13 +74,13 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-            const opa = options.value.find((el) => el.title === a)
-            const opb = options.value.find((el) => el.title === b)
-            if (opa && opb) {
-              return opa.order! - opb.order!
-            }
-            return 0
-          })
+          const opa = options.value.find((el) => el.title === a)
+          const opb = options.value.find((el) => el.title === b)
+          if (opa && opb) {
+            return opa.order! - opb.order!
+          }
+          return 0
+        })
         : modelValue.split(',')
       : modelValue
     : [],
@@ -93,9 +94,13 @@ const handleKeys = (e: KeyboardEvent) => {
       break
     case 'ArrowDown':
     case 'ArrowUp':
+      e.stopPropagation()
+      break
     case 'Enter':
+      isOpen.value = true
       e.stopPropagation()
       break
+
   }
 }
 
@@ -135,11 +140,17 @@ watch(
 watch(isOpen, (n, _o) => {
   if (!n) aselect.value?.$el.blur()
 })
+
+useEventListener(document, 'keydown', (e) => {
+  if (active.value && e.key === 'Enter') {
+    isOpen.value = true
+  }
+})
 </script>
 
 <template>
   <a-select
-    ref="aselect"
+    ref="select"
     v-model:value="vModel"
     mode="multiple"
     class="w-full"
@@ -223,18 +234,23 @@ watch(isOpen, (n, _o) => {
   margin-right: -6px;
   margin-left: 3px;
 }
+
 .ms-close-icon:before {
   display: block;
 }
+
 .ms-close-icon:hover {
   color: rgba(0, 0, 0, 0.45);
 }
+
 .rounded-tag {
   @apply py-0 px-[12px] rounded-[12px];
 }
+
 :deep(.ant-tag) {
   @apply "rounded-tag" my-[2px];
 }
+
 :deep(.ant-tag-close-icon) {
   @apply "text-slate-500";
 }
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index bdccb6a872..741e3ba7f4 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -62,7 +62,10 @@ const handleKeys = (e: KeyboardEvent) => {
       break
     case 'ArrowDown':
     case 'ArrowUp':
+      e.stopPropagation()
+      break
     case 'Enter':
+      isOpen.value = true
       e.stopPropagation()
       break
   }

From 747202024b73429b41e00c7ee4cbf15d7458c3f3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 01:40:42 +0530
Subject: [PATCH 05/36] feat: toggle checkbox on enter key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Checkbox.vue  | 13 ++++++++++++
 .../useSelectedCellKeyupListener/index.ts     | 20 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index 04c5d73521..7af47815ef 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject } from '#imports'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
+import { ActiveCellInj } from '~/context'
 
 interface Props {
   // If the previous cell value was a text, the initial checkbox value is a string type
@@ -42,6 +44,16 @@ function onClick() {
     vModel = !vModel
   }
 }
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+  console.log(e.key)
+  switch (e.key) {
+    case 'Enter':
+      onClick()
+      e.stopPropagation()
+      break
+  }
+})
 </script>
 
 <template>
@@ -72,6 +84,7 @@ function onClick() {
 .nc-cell-hover-show {
   opacity: 0;
   transition: 0.3s opacity;
+
   &:hover {
     opacity: 0.7;
   }
diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
new file mode 100644
index 0000000000..ef86be0e40
--- /dev/null
+++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
@@ -0,0 +1,20 @@
+import type { Ref } from 'vue'
+import { onUnmounted, useEventListener } from '#imports'
+
+export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e: KeyboardEvent) => void) {
+  const cleanup: Ref<ReturnType<typeof useEventListener> | null> = ref(null)
+
+  watch(selected, (value) => {
+    if (value) {
+      cleanup.value = useEventListener('keydown', handler)
+    } else {
+      cleanup.value?.()
+    }
+  })
+
+  onUnmounted(() => cleanup.value?.())
+
+  return {
+    cleanup,
+  }
+}

From b204ba24058745fb494cd88c0ce7fdd818d13fd6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 11:58:21 +0530
Subject: [PATCH 06/36] feat(gui): toggle rating based on number key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components.d.ts                  |  3 +++
 packages/nc-gui/components/cell/Checkbox.vue     |  5 +----
 packages/nc-gui/components/cell/Email.vue        | 16 +++++++++++-----
 packages/nc-gui/components/cell/MultiSelect.vue  | 16 +++++++---------
 packages/nc-gui/components/cell/PhoneNumber.vue  |  3 +--
 packages/nc-gui/components/cell/Rating.vue       |  8 +++++++-
 packages/nc-gui/components/cell/SingleSelect.vue | 14 ++------------
 7 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index a7fe22fc3e..72d94ba7b7 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -106,6 +106,8 @@ declare module '@vue/runtime-core' {
     MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
+    MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
+    MdiAdd: typeof import('~icons/mdi/add')['default']
     MdiAlpha: typeof import('~icons/mdi/alpha')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
@@ -200,6 +202,7 @@ declare module '@vue/runtime-core' {
     MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
     MdiScriptTextKeyOutline: typeof import('~icons/mdi/script-text-key-outline')['default']
     MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['default']
+    MdiShieldKeyOutline: typeof import('~icons/mdi/shield-key-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiSort: typeof import('~icons/mdi/sort')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index 7af47815ef..f5d76f8703 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject } from '#imports'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
-import { ActiveCellInj } from '~/context'
+import { ActiveCellInj, ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject, useSelectedCellKeyupListener } from '#imports'
 
 interface Props {
   // If the previous cell value was a text, the initial checkbox value is a string type
@@ -46,7 +44,6 @@ function onClick() {
 }
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
-  console.log(e.key)
   switch (e.key) {
     case 'Enter':
       onClick()
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index d90bf0f8f5..c5d74a3680 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -24,11 +24,17 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm px-2" @blur="editEnabled = false"
-         @keydown.down.stop
-         @keydown.left.stop
-         @keydown.right.stop
-         @keydown.up.stop/>
+  <input
+    v-if="editEnabled"
+    :ref="focus"
+    v-model="vModel"
+    class="outline-none text-sm px-2"
+    @blur="editEnabled = false"
+    @keydown.down.stop
+    @keydown.left.stop
+    @keydown.right.stop
+    @keydown.up.stop
+  />
 
   <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index d57f4490da..66b54e8cb0 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -16,7 +16,6 @@ import {
   useProject,
   watch,
 } from '#imports'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
@@ -74,13 +73,13 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-          const opa = options.value.find((el) => el.title === a)
-          const opb = options.value.find((el) => el.title === b)
-          if (opa && opb) {
-            return opa.order! - opb.order!
-          }
-          return 0
-        })
+            const opa = options.value.find((el) => el.title === a)
+            const opb = options.value.find((el) => el.title === b)
+            if (opa && opb) {
+              return opa.order! - opb.order!
+            }
+            return 0
+          })
         : modelValue.split(',')
       : modelValue
     : [],
@@ -100,7 +99,6 @@ const handleKeys = (e: KeyboardEvent) => {
       isOpen.value = true
       e.stopPropagation()
       break
-
   }
 }
 
diff --git a/packages/nc-gui/components/cell/PhoneNumber.vue b/packages/nc-gui/components/cell/PhoneNumber.vue
index 618fb25182..0397b5ff55 100644
--- a/packages/nc-gui/components/cell/PhoneNumber.vue
+++ b/packages/nc-gui/components/cell/PhoneNumber.vue
@@ -17,6 +17,5 @@ const vModel = useVModel(props, 'modelValue', emits)
 </script>
 
 <template>
-  <LazyCellText
-    v-model="vModel" />
+  <LazyCellText v-model="vModel" />
 </template>
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index bd9c923d38..7d44cdcd69 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ColumnInj, EditModeInj, computed, inject } from '#imports'
+import { ActiveCellInj, ColumnInj, EditModeInj, computed, inject, useSelectedCellKeyupListener } from '#imports'
 
 interface Props {
   modelValue?: number | null | undefined
@@ -29,6 +29,12 @@ const vModel = computed({
   get: () => modelValue ?? NaN,
   set: (val) => emits('update:modelValue', val),
 })
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+  if (/^\d$/.test(e.key)) {
+    vModel.value = +e.key === +vModel.value ? 0 : +e.key
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 741e3ba7f4..c46e34adc1 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -2,17 +2,7 @@
 import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
-import {
-  ActiveCellInj,
-  ColumnInj,
-  IsKanbanInj,
-  ReadonlyInj,
-  computed,
-  inject,
-  ref,
-  useEventListener,
-  watch,
-} from '#imports'
+import { ActiveCellInj, ColumnInj, IsKanbanInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | undefined
@@ -44,7 +34,7 @@ const options = computed<SelectOptionType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? // todo: fix colOptions type, options does not exist as a property
-      (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
+        (column.value.colOptions as any).options.filter((el: SelectOptionType) => el.title !== '') || []
       : []
     for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')

From 230cd2bff0cc1b210cf32ec3c578ce67d263f543 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 12:17:24 +0530
Subject: [PATCH 07/36] feat(gui): open attchment modal on enter key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/attachment/index.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index f4be61efd5..0bdcadd5e9 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { onKeyDown } from '@vueuse/core'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
+import { ActiveCellInj } from '~/context'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import {
@@ -136,6 +138,13 @@ watch(
     rowState.value[column.value!.title!] = storedFiles.value
   },
 )
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+  if (e.key === 'Enter' && !isReadonly.value) {
+    e.stopPropagation()
+    modalVisible.value = true
+  }
+})
 </script>
 
 <template>

From 5ec33a78834e7fc403fd669396d6cf0b6cb81de0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 12:48:47 +0530
Subject: [PATCH 08/36] feat(gui): open picker on pressing enter key nd close
 on escApe key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/DatePicker.vue    | 15 ++++++++++++++-
 .../nc-gui/components/cell/DateTimePicker.vue     | 15 ++++++++++++++-
 packages/nc-gui/components/cell/MultiSelect.vue   |  6 ++++--
 packages/nc-gui/components/cell/Rating.vue        |  3 ++-
 packages/nc-gui/components/cell/TimePicker.vue    | 15 ++++++++++++++-
 packages/nc-gui/components/cell/YearPicker.vue    | 15 ++++++++++++++-
 .../nc-gui/components/cell/attachment/index.vue   |  4 ++--
 7 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 08362605d7..f515e0873c 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ColumnInj, ReadonlyInj, computed, inject, ref, watch } from '#imports'
+import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject, ref, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -57,6 +57,19 @@ watch(
 )
 
 const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index b28e7bf8d4..5c16909add 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj, inject, ref, useProject, watch } from '#imports'
+import { ActiveCellInj, ReadonlyInj, inject, ref, useProject, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -56,6 +56,19 @@ watch(
   },
   { flush: 'post' },
 )
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 66b54e8cb0..ecca3abdd7 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -14,6 +14,7 @@ import {
   ref,
   useEventListener,
   useProject,
+  useSelectedCellKeyupListener,
   watch,
 } from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
@@ -139,8 +140,9 @@ watch(isOpen, (n, _o) => {
   if (!n) aselect.value?.$el.blur()
 })
 
-useEventListener(document, 'keydown', (e) => {
-  if (active.value && e.key === 'Enter') {
+useSelectedCellKeyupListener(active, (e) => {
+  if (e.key === 'Enter') {
+    e.stopPropagation()
     isOpen.value = true
   }
 })
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index 7d44cdcd69..10e58a5775 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -30,8 +30,9 @@ const vModel = computed({
   set: (val) => emits('update:modelValue', val),
 })
 
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   if (/^\d$/.test(e.key)) {
+    e.stopPropagation()
     vModel.value = +e.key === +vModel.value ? 0 : +e.key
   }
 })
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index ed19d62277..ccc96c541a 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj, inject, onClickOutside, useProject, watch } from '#imports'
+import { ActiveCellInj, ReadonlyInj, inject, onClickOutside, useProject, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | null | undefined
@@ -65,6 +65,19 @@ watch(
   },
   { flush: 'post' },
 )
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index 1dda01b09a..f4d3c68625 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ReadonlyInj, computed, inject, onClickOutside, ref, watch } from '#imports'
+import { ActiveCellInj, ReadonlyInj, computed, inject, onClickOutside, ref, useSelectedCellKeyupListener, watch } from '#imports'
 
 interface Props {
   modelValue?: number | string | null
@@ -55,6 +55,19 @@ watch(
 )
 
 const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      e.stopPropagation()
+      open.value = true
+      break
+    case 'Escape':
+      e.stopPropagation()
+      open.value = false
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 0bdcadd5e9..c8a51a9b1d 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { onKeyDown } from '@vueuse/core'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
-import { ActiveCellInj } from '~/context'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
+import { ActiveCellInj } from '~/context'
 import {
   DropZoneRef,
   IsGalleryInj,

From ac68c8c4f92003e399e1fb0b2424fbf29cdbe086 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 15:10:21 +0530
Subject: [PATCH 09/36] fix(gui): make rating field editable by default

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Rating.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index 10e58a5775..51aadec80d 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ActiveCellInj, ColumnInj, EditModeInj, computed, inject, useSelectedCellKeyupListener } from '#imports'
+import { ActiveCellInj, ColumnInj, computed, inject, useSelectedCellKeyupListener } from '#imports'
 
 interface Props {
   modelValue?: number | null | undefined
@@ -11,8 +11,6 @@ const emits = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)
-
 const ratingMeta = computed(() => {
   return {
     icon: {
@@ -43,8 +41,6 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     v-model:value="vModel"
     :count="ratingMeta.max"
     :style="`color: ${ratingMeta.color}; padding: 0px 5px`"
-    :class="{ '!ml-[-8px]': !editEnabled }"
-    :disabled="!editEnabled"
   >
     <template #character>
       <MdiStar v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />

From 4b0845bd302c51f538d1dd7c02fa005ace8a88e6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 15:13:13 +0530
Subject: [PATCH 10/36] feat(gui): on enter key press open ref table rows modal
 for LTAR cells

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/virtual-cell/BelongsTo.vue | 10 ++++++++++
 packages/nc-gui/components/virtual-cell/HasMany.vue   | 10 ++++++++++
 .../nc-gui/components/virtual-cell/ManyToMany.vue     | 11 +++++++++++
 .../components/virtual-cell/components/ListItems.vue  |  9 +++++++++
 .../composables/useSelectedCellKeyupListener/index.ts |  2 +-
 5 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index 8a2eaed14f..f2bc101d45 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -17,6 +17,7 @@ import {
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
+  useSelectedCellKeyupListener
 } from '#imports'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
@@ -70,6 +71,15 @@ const unlinkRef = async (rec: Record<string, any>) => {
     await unlink(rec)
   }
 }
+
+useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      listItemsDlg.value = true
+      e.preventDefault()
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/HasMany.vue b/packages/nc-gui/components/virtual-cell/HasMany.vue
index 82d7cbbb06..f992ac322c 100644
--- a/packages/nc-gui/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui/components/virtual-cell/HasMany.vue
@@ -15,6 +15,7 @@ import {
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
+  useSelectedCellKeyupListener
 } from '#imports'
 
 const column = inject(ColumnInj)!
@@ -81,6 +82,15 @@ const onAttachRecord = () => {
   childListDlg.value = false
   listItemsDlg.value = true
 }
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      listItemsDlg.value = true
+      e.preventDefault()
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/ManyToMany.vue b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
index 3464471789..fd07fe4687 100644
--- a/packages/nc-gui/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
@@ -16,6 +16,8 @@ import {
   useProvideLTARStore,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
+  useSelectedCellKeyupListener,
+  ActiveCellInj,
 } from '#imports'
 
 const column = inject(ColumnInj)!
@@ -82,6 +84,15 @@ const onAttachRecord = () => {
   childListDlg.value = false
   listItemsDlg.value = true
 }
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      listItemsDlg.value = true
+      e.preventDefault()
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index df6700cd02..83994b9eeb 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useEventListener } from '@vueuse/core'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {
@@ -98,6 +99,14 @@ const newRowState = computed(() => {
 watch(expandedFormDlg, (nexVal) => {
   if (!nexVal && !isNew.value) vModel.value = false
 })
+
+// useEventListener((e: KeyboardEvent) => {
+//   switch (e.key) {
+//     case 'Enter':
+//       e.preventDefault()
+//       break
+//   }
+// })
 </script>
 
 <template>
diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
index ef86be0e40..f26e584353 100644
--- a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
+++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
@@ -6,7 +6,7 @@ export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e
 
   watch(selected, (value) => {
     if (value) {
-      cleanup.value = useEventListener('keydown', handler)
+      cleanup.value = useEventListener('keydown', handler, true)
     } else {
       cleanup.value?.()
     }

From 75c1c202a9479347dd607c8b2c16a5ffa87ba8f1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 16:20:07 +0530
Subject: [PATCH 11/36] feat(gui): ignore unselecting if clicking inside any
 picker element

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/DatePicker.vue         |  2 +-
 packages/nc-gui/components/cell/DateTimePicker.vue     | 10 ++++++----
 packages/nc-gui/components/cell/Rating.vue             |  6 +-----
 packages/nc-gui/components/cell/TimePicker.vue         |  2 +-
 packages/nc-gui/components/cell/YearPicker.vue         |  2 +-
 packages/nc-gui/components/smartsheet/Grid.vue         |  8 +++++++-
 packages/nc-gui/components/virtual-cell/BelongsTo.vue  |  2 +-
 packages/nc-gui/components/virtual-cell/HasMany.vue    |  2 +-
 packages/nc-gui/components/virtual-cell/ManyToMany.vue |  4 ++--
 .../components/virtual-cell/components/ListItems.vue   |  1 -
 10 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index f515e0873c..bb082b6f73 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -81,7 +81,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :dropdown-class-name="`${randomClass} nc-picker-date`"
+    :dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
     :open="readOnly || (localState && isPk) ? false : open"
     @click="open = !open"
   >
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 5c16909add..3acae997e3 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -15,6 +15,8 @@ const { isMysql } = useProject()
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
+const active = inject(ActiveCellInj, ref(false))
+
 let isDateInvalid = $ref(false)
 
 const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
@@ -57,7 +59,7 @@ watch(
   { flush: 'post' },
 )
 
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
@@ -81,10 +83,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     :placeholder="isDateInvalid ? 'Invalid date' : ''"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :dropdown-class-name="`${randomClass} nc-picker-datetime`"
-    :open="readOnly || (localState && isPk) ? false : open"
+    :dropdown-class-name="`${randomClass} nc-picker-datetime ${open ? 'active' : ''}`"
+    :open="readOnly || (localState && isPk) ? false : open && active"
     :disabled="readOnly || (localState && isPk)"
-    @click="open = !open"
+    @click="open = active && !open"
     @ok="open = !open"
   >
     <template #suffixIcon></template>
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index 51aadec80d..44308292e6 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -37,11 +37,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
 </script>
 
 <template>
-  <a-rate
-    v-model:value="vModel"
-    :count="ratingMeta.max"
-    :style="`color: ${ratingMeta.color}; padding: 0px 5px`"
-  >
+  <a-rate v-model:value="vModel" :count="ratingMeta.max" :style="`color: ${ratingMeta.color}; padding: 0px 5px`">
     <template #character>
       <MdiStar v-if="ratingMeta.icon.full === 'mdi-star'" class="text-sm" />
       <MdiHeart v-if="ratingMeta.icon.full === 'mdi-heart'" class="text-sm" />
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index ccc96c541a..c4a05298ba 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -93,7 +93,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :open="readOnly || (localState && isPk) ? false : open"
-    :popup-class-name="`${randomClass} nc-picker-time`"
+    :popup-class-name="`${randomClass} nc-picker-time ${open ? 'active' : ''}`"
     @click="open = !open"
     @ok="open = !open"
   >
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index f4d3c68625..e9d25f8f03 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -80,7 +80,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :open="readOnly || (localState && isPk) ? false : open"
-    :dropdown-class-name="`${randomClass} nc-picker-year`"
+    :dropdown-class-name="`${randomClass} nc-picker-year ${open ? 'active' : ''}`"
     @click="open = !open"
     @change="open = !open"
   >
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 52c97c1d87..eea6425bd1 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -325,7 +325,7 @@ useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
 
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
-onClickOutside(smartTable, () => {
+onClickOutside(smartTable, (e: PointerEvent) => {
   clearRangeRows()
   if (selected.col === null) return
 
@@ -333,6 +333,12 @@ onClickOutside(smartTable, () => {
 
   if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return
 
+  // ignore unselecting if clicked inside or on the picker(Date, Time, DateTime, Year)
+  const activePickerEl = document.querySelector(
+    '.nc-picker-datetime.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
+  )
+  if (e.target && activePickerEl && (activePickerEl === e.target || activePickerEl?.contains(e.target as Element))) return
+
   selected.row = null
   selected.col = null
 })
diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index f2bc101d45..9801697c76 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -15,9 +15,9 @@ import {
   inject,
   ref,
   useProvideLTARStore,
+  useSelectedCellKeyupListener,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
-  useSelectedCellKeyupListener
 } from '#imports'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
diff --git a/packages/nc-gui/components/virtual-cell/HasMany.vue b/packages/nc-gui/components/virtual-cell/HasMany.vue
index f992ac322c..86798d381a 100644
--- a/packages/nc-gui/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui/components/virtual-cell/HasMany.vue
@@ -13,9 +13,9 @@ import {
   inject,
   ref,
   useProvideLTARStore,
+  useSelectedCellKeyupListener,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
-  useSelectedCellKeyupListener
 } from '#imports'
 
 const column = inject(ColumnInj)!
diff --git a/packages/nc-gui/components/virtual-cell/ManyToMany.vue b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
index fd07fe4687..bd094c6ff0 100644
--- a/packages/nc-gui/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
@@ -2,6 +2,7 @@
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import {
+  ActiveCellInj,
   CellValueInj,
   ColumnInj,
   IsFormInj,
@@ -14,10 +15,9 @@ import {
   inject,
   ref,
   useProvideLTARStore,
+  useSelectedCellKeyupListener,
   useSmartsheetRowStoreOrThrow,
   useUIPermission,
-  useSelectedCellKeyupListener,
-  ActiveCellInj,
 } from '#imports'
 
 const column = inject(ColumnInj)!
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 83994b9eeb..6cc9246b40 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { useEventListener } from '@vueuse/core'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {

From 8775c454de7b4f86f1757a201fba1d4128db051e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 29 Oct 2022 18:59:26 +0530
Subject: [PATCH 12/36] feat(gui): ignore unselecting if clicking inside any
 picker(date,time and year) element

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/DatePicker.vue |  6 ++++--
 packages/nc-gui/components/cell/TimePicker.vue |  8 +++++---
 packages/nc-gui/components/cell/YearPicker.vue | 10 ++++++----
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index bb082b6f73..3578024d8f 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -15,6 +15,8 @@ const columnMeta = inject(ColumnInj, null)!
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
+const active = inject(ActiveCellInj, ref(false))
+
 let isDateInvalid = $ref(false)
 
 const dateFormat = $computed(() => columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD')
@@ -58,7 +60,7 @@ watch(
 
 const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : ''))
 
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
@@ -82,7 +84,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
-    :open="readOnly || (localState && isPk) ? false : open"
+    :open="(readOnly || (localState && isPk)) && !active ? false : open"
     @click="open = !open"
   >
     <template #suffixIcon></template>
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index c4a05298ba..84aed4eece 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -15,6 +15,8 @@ const { isMysql } = useProject()
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
+const active = inject(ActiveCellInj, ref(false))
+
 let isTimeInvalid = $ref(false)
 
 const dateFormat = isMysql.value ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
@@ -66,7 +68,7 @@ watch(
   { flush: 'post' },
 )
 
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
@@ -92,9 +94,9 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     :placeholder="isTimeInvalid ? 'Invalid time' : ''"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :open="readOnly || (localState && isPk) ? false : open"
+    :open="(readOnly || (localState && isPk)) && !active ? false : open"
     :popup-class-name="`${randomClass} nc-picker-time ${open ? 'active' : ''}`"
-    @click="open = !open"
+    @click="open = active && !open"
     @ok="open = !open"
   >
     <template #suffixIcon></template>
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index e9d25f8f03..175d3dcced 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -13,6 +13,8 @@ const emit = defineEmits(['update:modelValue'])
 
 const readOnly = inject(ReadonlyInj, ref(false))
 
+const active = inject(ActiveCellInj, ref(false))
+
 let isYearInvalid = $ref(false)
 
 const localState = $computed({
@@ -56,7 +58,7 @@ watch(
 
 const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : ''))
 
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       e.stopPropagation()
@@ -79,10 +81,10 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :open="readOnly || (localState && isPk) ? false : open"
+    :open="(readOnly || (localState && isPk)) && !active ? false : open"
     :dropdown-class-name="`${randomClass} nc-picker-year ${open ? 'active' : ''}`"
-    @click="open = !open"
-    @change="open = !open"
+    @click="open = active && !open"
+    @change="open = active && !open"
   >
     <template #suffixIcon></template>
   </a-date-picker>

From 7cfa6491fcc03070a22323c766f14e29a388d381 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 31 Oct 2022 11:24:46 +0530
Subject: [PATCH 13/36] feat(gui): On first click outside checkbox, just select
 cell. Do not toggle value

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Checkbox.vue  | 21 ++++++++++++++-----
 .../nc-gui/components/cell/MultiSelect.vue    | 12 +++++------
 .../nc-gui/components/cell/SingleSelect.vue   |  6 +++---
 .../nc-gui/components/smartsheet/Grid.vue     | 15 +++++++++++--
 .../composables/useMultiSelect/index.ts       |  6 ++++++
 5 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index f5d76f8703..cfc3013cf5 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { ActiveCellInj, ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject, useSelectedCellKeyupListener } from '#imports'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  IsFormInj,
+  ReadonlyInj,
+  getMdiIcon,
+  inject,
+  useSelectedCellKeyupListener,
+} from '#imports'
 
 interface Props {
   // If the previous cell value was a text, the initial checkbox value is a string type
@@ -15,6 +23,8 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
+const active = inject(ActiveCellInj, ref(false))
+
 let vModel = $computed({
   get: () => !!props.modelValue && props.modelValue !== '0' && props.modelValue !== 0,
   set: (val) => emits('update:modelValue', val),
@@ -37,13 +47,13 @@ const checkboxMeta = $computed(() => {
   }
 })
 
-function onClick() {
-  if (!readOnly?.value) {
+function onClick(force?: boolean) {
+  if (!readOnly?.value && (force || active.value)) {
     vModel = !vModel
   }
 }
 
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+useSelectedCellKeyupListener(active, (e) => {
   switch (e.key) {
     case 'Enter':
       onClick()
@@ -62,7 +72,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
       'nc-cell-hover-show': !vModel && !readOnly,
       'opacity-0': readOnly && !vModel,
     }"
-    @click="onClick"
+    @click="onClick(false)"
   >
     <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel, '!ml-[-8px]': readOnly }">
       <Transition name="layout" mode="out-in" :duration="100">
@@ -71,6 +81,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
           :style="{
             color: checkboxMeta.color,
           }"
+          @click.stop="onClick(true)"
         />
       </Transition>
     </div>
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index ecca3abdd7..537ad815a7 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -94,7 +94,7 @@ const handleKeys = (e: KeyboardEvent) => {
       break
     case 'ArrowDown':
     case 'ArrowUp':
-      e.stopPropagation()
+      if (isOpen.value) e.stopPropagation()
       break
     case 'Enter':
       isOpen.value = true
@@ -141,9 +141,9 @@ watch(isOpen, (n, _o) => {
 })
 
 useSelectedCellKeyupListener(active, (e) => {
-  if (e.key === 'Enter') {
-    e.stopPropagation()
-    isOpen.value = true
+  if (e.key === 'Escape') {
+    // e.stopPropagation()
+    isOpen.value = false
   }
 })
 </script>
@@ -160,9 +160,9 @@ useSelectedCellKeyupListener(active, (e) => {
     :open="isOpen"
     :disabled="readOnly"
     :class="{ '!ml-[-8px]': readOnly }"
-    dropdown-class-name="nc-dropdown-multi-select-cell"
+    :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
     @keydown="handleKeys"
-    @click="isOpen = !isOpen"
+    @click="isOpen = active && !isOpen"
   >
     <a-select-option
       v-for="op of options"
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index c46e34adc1..f03bd095f9 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -52,7 +52,7 @@ const handleKeys = (e: KeyboardEvent) => {
       break
     case 'ArrowDown':
     case 'ArrowUp':
-      e.stopPropagation()
+      if (isOpen.value) e.stopPropagation()
       break
     case 'Enter':
       isOpen.value = true
@@ -85,10 +85,10 @@ watch(isOpen, (n, _o) => {
     :open="isOpen"
     :disabled="readOnly"
     :show-arrow="!readOnly && (active || vModel === null)"
-    dropdown-class-name="nc-dropdown-single-select-cell"
+    :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
     @select="isOpen = false"
     @keydown="handleKeys"
-    @click="isOpen = !isOpen"
+    @click="isOpen = active && !isOpen"
   >
     <a-select-option
       v-for="op of options"
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index eea6425bd1..912802d3cc 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -213,6 +213,16 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
       })
     }
   },
+  (e: KeyboardEvent) => {
+    console.log(e)
+    if (e.code === 'Space') {
+      if (selected.row !== null && !editEnabled) {
+        const row = data.value[selected.row]
+        expandForm(row)
+        return true
+      }
+    }
+  },
 )
 
 onMounted(loadGridViewColumns)
@@ -234,7 +244,7 @@ const showLoading = ref(true)
 
 const skipRowRemovalOnCancel = ref(false)
 
-const expandForm = (row: Row, state?: Record<string, any>, fromToolbar = false) => {
+function expandForm(row: Row, state?: Record<string, any>, fromToolbar = false) {
   const rowId = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
 
   if (rowId) {
@@ -334,8 +344,9 @@ onClickOutside(smartTable, (e: PointerEvent) => {
   if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return
 
   // ignore unselecting if clicked inside or on the picker(Date, Time, DateTime, Year)
+  // or single/multi select options
   const activePickerEl = document.querySelector(
-    '.nc-picker-datetime.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
+    '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
   )
   if (e.target && activePickerEl && (activePickerEl === e.target || activePickerEl?.contains(e.target as Element))) return
 
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 23f634af3a..f089a9aac9 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -18,6 +18,7 @@ export function useMultiSelect(
   clearCell: Function,
   makeEditable: Function,
   scrollToActiveCell?: (row?: number | null, col?: number | null) => void,
+  keyEventHandler?: Function,
 ) {
   const { t } = useI18n()
 
@@ -126,6 +127,11 @@ export function useMultiSelect(
   })
 
   const onKeyDown = async (e: KeyboardEvent) => {
+    // invoke the keyEventHandler if provided and return if it returns true
+    if (await keyEventHandler?.(e)) {
+      return
+    }
+
     if (
       !isNaN(selectedRows.startRow) &&
       !isNaN(selectedRows.startCol) &&

From 1aab8e5a6e6478a99bf89da88dd6afa76d9616f7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 1 Nov 2022 11:01:18 +0530
Subject: [PATCH 14/36] feat(api): cmd/ctrl + arrow navigation

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     | 54 ++++++++++++++-----
 packages/nc-gui/utils/browserUtils.ts         |  2 +
 packages/nc-gui/utils/index.ts                |  1 +
 3 files changed, 44 insertions(+), 13 deletions(-)
 create mode 100644 packages/nc-gui/utils/browserUtils.ts

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 912802d3cc..73aa6ac616 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -39,7 +39,9 @@ import {
   useUIPermission,
   useViewData,
   watch,
+  isMac,
 } from '#imports'
+import { switchAll } from 'rxjs'
 import type { Row } from '~/lib'
 import { NavigateDir } from '~/lib'
 
@@ -168,7 +170,44 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
   isPkAvail,
   clearCell,
   makeEditable,
-  (row?: number | null, col?: number | null) => {
+  scrollToCell,
+  (e: KeyboardEvent) => {
+    const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
+    if (e.key === 'Space') {
+      if (selected.row !== null && !editEnabled) {
+        const row = data.value[selected.row]
+        expandForm(row)
+        return true
+      }
+    }
+    if (cmdOrCtrl) {
+      switch (e.key) {
+        case 'ArrowUp':
+          selected.row = 0
+          selected.col = selected.col ?? 0
+          scrollToCell?.()
+          return true
+        case 'ArrowDown':
+          selected.row = data.value.length - 1
+          selected.col = selected.col ?? 0
+          scrollToCell?.()
+          return true
+        case 'ArrowRight':
+          selected.row = selected.row ?? 0
+          selected.col = fields.value?.length - 1
+          scrollToCell?.()
+          return true
+        case 'ArrowLeft':
+          selected.row = selected.row ?? 0
+          selected.col = 0
+          scrollToCell?.()
+          return true
+      }
+    }
+  },
+)
+
+function scrollToCell(row?: number | null, col?: number | null) {
     row = row ?? selected.row
     col = col ?? selected.col
     if (row !== undefined && col !== undefined && row !== null && col !== null) {
@@ -212,18 +251,7 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
         behavior: 'smooth',
       })
     }
-  },
-  (e: KeyboardEvent) => {
-    console.log(e)
-    if (e.code === 'Space') {
-      if (selected.row !== null && !editEnabled) {
-        const row = data.value[selected.row]
-        expandForm(row)
-        return true
-      }
-    }
-  },
-)
+  }
 
 onMounted(loadGridViewColumns)
 
diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts
new file mode 100644
index 0000000000..a4efcc1801
--- /dev/null
+++ b/packages/nc-gui/utils/browserUtils.ts
@@ -0,0 +1,2 @@
+// refer - https://stackoverflow.com/a/11752084
+export const isMac = () => /Mac/i.test(navigator.platform)
diff --git a/packages/nc-gui/utils/index.ts b/packages/nc-gui/utils/index.ts
index 7a2cf1d395..22bbddc16f 100644
--- a/packages/nc-gui/utils/index.ts
+++ b/packages/nc-gui/utils/index.ts
@@ -19,3 +19,4 @@ export * from './dataUtils'
 export * from './userUtils'
 export * from './stringUtils'
 export * from './memStorage'
+export * from './browserUtils'

From 64f55b841a47b26bc7d6d8cafb05e8bde13924b7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 1 Nov 2022 11:11:11 +0530
Subject: [PATCH 15/36] feat(api): show warning for virtual cells when enter or
 delete key press

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Checkbox.vue  | 10 +--
 .../nc-gui/components/smartsheet/Grid.vue     | 80 +++++++++----------
 .../components/virtual-cell/Formula.vue       | 12 +++
 .../nc-gui/components/virtual-cell/Lookup.vue | 12 +++
 .../nc-gui/components/virtual-cell/Rollup.vue | 12 +++
 5 files changed, 77 insertions(+), 49 deletions(-)

diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index cfc3013cf5..1e533f3c05 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -1,13 +1,5 @@
 <script setup lang="ts">
-import {
-  ActiveCellInj,
-  ColumnInj,
-  IsFormInj,
-  ReadonlyInj,
-  getMdiIcon,
-  inject,
-  useSelectedCellKeyupListener,
-} from '#imports'
+import { ActiveCellInj, ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject, useSelectedCellKeyupListener } from '#imports'
 
 interface Props {
   // If the previous cell value was a text, the initial checkbox value is a string type
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 73aa6ac616..3e3d163c9c 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -22,6 +22,7 @@ import {
   extractPkFromRow,
   inject,
   isColumnRequiredAndNull,
+  isMac,
   message,
   onBeforeUnmount,
   onClickOutside,
@@ -39,9 +40,7 @@ import {
   useUIPermission,
   useViewData,
   watch,
-  isMac,
 } from '#imports'
-import { switchAll } from 'rxjs'
 import type { Row } from '~/lib'
 import { NavigateDir } from '~/lib'
 
@@ -146,8 +145,8 @@ const getContainerScrollForElement = (
     relativePos.right + (offset?.right || 0) > 0
       ? container.scrollLeft + relativePos.right + (offset?.right || 0)
       : relativePos.left - (offset?.left || 0) < 0
-      ? container.scrollLeft + relativePos.left - (offset?.left || 0)
-      : container.scrollLeft
+        ? container.scrollLeft + relativePos.left - (offset?.left || 0)
+        : container.scrollLeft
 
   /*
    * If the element is below the container, scroll down (positive)
@@ -163,6 +162,7 @@ const getContainerScrollForElement = (
   return scroll
 }
 
+
 const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange, selected } = useMultiSelect(
   fields,
   data,
@@ -208,50 +208,50 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
 )
 
 function scrollToCell(row?: number | null, col?: number | null) {
-    row = row ?? selected.row
-    col = col ?? selected.col
-    if (row !== undefined && col !== undefined && row !== null && col !== null) {
-      // get active cell
-      const rows = tbodyEl.value?.querySelectorAll('tr')
-      const cols = rows?.[row].querySelectorAll('td')
-      const td = cols?.[col === 0 ? 0 : col + 1]
-
-      if (!td || !gridWrapper.value) return
-
-      const { height: headerHeight } = tableHead.value!.getBoundingClientRect()
-      const tdScroll = getContainerScrollForElement(td, gridWrapper.value, { top: headerHeight, bottom: 9, right: 9 })
-
-      if (rows && row === rows.length - 2) {
-        // if last row make 'Add New Row' visible
-        gridWrapper.value.scrollTo({
-          top: gridWrapper.value.scrollHeight,
-          left:
-            cols && col === cols.length - 2 // if corner cell
-              ? gridWrapper.value.scrollWidth
-              : tdScroll.left,
-          behavior: 'smooth',
-        })
-        return
-      }
+  row = row ?? selected.row
+  col = col ?? selected.col
+  if (row !== undefined && col !== undefined && row !== null && col !== null) {
+    // get active cell
+    const rows = tbodyEl.value?.querySelectorAll('tr')
+    const cols = rows?.[row].querySelectorAll('td')
+    const td = cols?.[col === 0 ? 0 : col + 1]
 
-      if (cols && col === cols.length - 2) {
-        // if last column make 'Add New Column' visible
-        gridWrapper.value.scrollTo({
-          top: tdScroll.top,
-          left: gridWrapper.value.scrollWidth,
-          behavior: 'smooth',
-        })
-        return
-      }
+    if (!td || !gridWrapper.value) return
+
+    const { height: headerHeight } = tableHead.value!.getBoundingClientRect()
+    const tdScroll = getContainerScrollForElement(td, gridWrapper.value, { top: headerHeight, bottom: 9, right: 9 })
+
+    if (rows && row === rows.length - 2) {
+      // if last row make 'Add New Row' visible
+      gridWrapper.value.scrollTo({
+        top: gridWrapper.value.scrollHeight,
+        left:
+          cols && col === cols.length - 2 // if corner cell
+            ? gridWrapper.value.scrollWidth
+            : tdScroll.left,
+        behavior: 'smooth',
+      })
+      return
+    }
 
-      // scroll into the active cell
+    if (cols && col === cols.length - 2) {
+      // if last column make 'Add New Column' visible
       gridWrapper.value.scrollTo({
         top: tdScroll.top,
-        left: tdScroll.left,
+        left: gridWrapper.value.scrollWidth,
         behavior: 'smooth',
       })
+      return
     }
+
+    // scroll into the active cell
+    gridWrapper.value.scrollTo({
+      top: tdScroll.top,
+      left: tdScroll.left,
+      behavior: 'smooth',
+    })
   }
+}
 
 onMounted(loadGridViewColumns)
 
diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index f91a8a8cab..b6a76015d6 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { message } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, replaceUrlsWithLink, useProject } from '#imports'
@@ -23,6 +24,17 @@ const showEditFormulaWarningMessage = () => {
 const result = computed(() => (isPg.value ? handleTZ(cellValue?.value) : cellValue?.value))
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      message.warning('Formula fields should be configured in the field menu dropdown')
+      break
+    case 'Delete':
+      message.warning('Computed field: unable to clear text')
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 789ff99187..0f5de97936 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { message } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
@@ -46,6 +47,17 @@ provide(MetaInj, lookupTableMeta)
 provide(CellUrlDisableOverlayInj, ref(true))
 
 const lookupColumnMetaProps = useColumn(lookupColumn)
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      message.warning('Computed field: unable to edit')
+      break
+    case 'Delete':
+      message.warning('Computed field: unable to clear text')
+      break
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/virtual-cell/Rollup.vue b/packages/nc-gui/components/virtual-cell/Rollup.vue
index 68a3e3259b..32854445b1 100644
--- a/packages/nc-gui/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui/components/virtual-cell/Rollup.vue
@@ -1,7 +1,19 @@
 <script setup lang="ts">
+import { message } from 'ant-design-vue'
 import { CellValueInj, inject } from '#imports'
 
 const value = inject(CellValueInj)
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Enter':
+      message.warning('Computed field: unable to edit')
+      break
+    case 'Delete':
+      message.warning('Computed field: unable to clear text')
+      break
+  }
+})
 </script>
 
 <template>

From 19b91417c1927394784b586907860faf21e80078 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 1 Nov 2022 12:03:53 +0530
Subject: [PATCH 16/36] feat(api): navigation in LTAR link row modal

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/BelongsTo.vue     |  2 +-
 .../components/virtual-cell/HasMany.vue       |  2 +-
 .../components/virtual-cell/ManyToMany.vue    |  2 +-
 .../virtual-cell/components/ListItems.vue     | 41 +++++++++++++++----
 4 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index 9801697c76..6e2e68fce1 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -76,7 +76,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
       listItemsDlg.value = true
-      e.preventDefault()
+      e.stopPropagation()
       break
   }
 })
diff --git a/packages/nc-gui/components/virtual-cell/HasMany.vue b/packages/nc-gui/components/virtual-cell/HasMany.vue
index 86798d381a..5c6f7777fd 100644
--- a/packages/nc-gui/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui/components/virtual-cell/HasMany.vue
@@ -87,7 +87,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
   switch (e.key) {
     case 'Enter':
       listItemsDlg.value = true
-      e.preventDefault()
+      e.stopPropagation()
       break
   }
 })
diff --git a/packages/nc-gui/components/virtual-cell/ManyToMany.vue b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
index bd094c6ff0..e028f4fd2a 100644
--- a/packages/nc-gui/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui/components/virtual-cell/ManyToMany.vue
@@ -89,7 +89,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
   switch (e.key) {
     case 'Enter':
       listItemsDlg.value = true
-      e.preventDefault()
+      e.stopPropagation()
       break
   }
 })
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 6cc9246b40..9a6bd94fec 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { onUnmounted } from '@vue/runtime-core'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {
@@ -12,6 +13,7 @@ import {
   useVModel,
   watch,
 } from '#imports'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 import { IsPublicInj } from '~/context'
 
 const props = defineProps<{ modelValue: boolean }>()
@@ -38,6 +40,8 @@ const { addLTARRef, isNew } = useSmartsheetRowStoreOrThrow()
 
 const isPublic = inject(IsPublicInj, ref(false))
 
+const selectedRowIndex = ref(0)
+
 const linkRow = async (row: Record<string, any>) => {
   if (isNew.value) {
     addLTARRef(row, column?.value as ColumnType)
@@ -54,6 +58,7 @@ watch(vModel, (nextVal, prevVal) => {
     childrenExcludedListPagination.query = ''
     childrenExcludedListPagination.page = 1
     loadChildrenExcludedList()
+    selectedRowIndex.value = 0
   }
 })
 
@@ -99,13 +104,29 @@ watch(expandedFormDlg, (nexVal) => {
   if (!nexVal && !isNew.value) vModel.value = false
 })
 
-// useEventListener((e: KeyboardEvent) => {
-//   switch (e.key) {
-//     case 'Enter':
-//       e.preventDefault()
-//       break
-//   }
-// })
+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)
+        e.stopPropagation()
+      }
+      break
+  }
+}, true)
+
+onUnmounted(() => {
+  removeListeners()
+})
 </script>
 
 <template>
@@ -123,6 +144,7 @@ watch(expandedFormDlg, (nexVal) => {
           :placeholder="$t('placeholder.filterQuery')"
           class="max-w-[200px]"
           size="small"
+          @keydown.capture.stop
         />
 
         <div class="flex-1" />
@@ -142,6 +164,7 @@ watch(expandedFormDlg, (nexVal) => {
             :key="i"
             class="!my-4 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
             @click="linkRow(refRow)"
+            :class="{'nc-selected-row':selectedRowIndex === i}"
           >
             {{ refRow[relatedTablePrimaryValueProp] }}
             <span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1">
@@ -183,4 +206,8 @@ watch(expandedFormDlg, (nexVal) => {
 :deep(.ant-pagination-item a) {
   line-height: 21px !important;
 }
+
+:deep(.nc-selected-row) {
+  @apply !ring;
+}
 </style>

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 17/36] 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">

From f8e52e39e02664b2651ea6b5df15b3f11df04323 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 1 Nov 2022 13:40:49 +0530
Subject: [PATCH 18/36] fix(api): block delete key press action for input
 fields at cell level

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Currency.vue              | 1 +
 packages/nc-gui/components/cell/Decimal.vue               | 1 +
 packages/nc-gui/components/cell/Duration.vue              | 1 +
 packages/nc-gui/components/cell/Email.vue                 | 1 +
 packages/nc-gui/components/cell/Float.vue                 | 1 +
 packages/nc-gui/components/cell/Integer.vue               | 1 +
 packages/nc-gui/components/cell/Percent.vue               | 1 +
 packages/nc-gui/components/cell/Text.vue                  | 1 +
 packages/nc-gui/components/cell/TextArea.vue              | 1 +
 packages/nc-gui/components/cell/Url.vue                   | 1 +
 .../components/virtual-cell/components/ListItems.vue      | 2 +-
 packages/nc-gui/composables/useMultiSelect/index.ts       | 8 +++-----
 12 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index bff861c977..da72a21fa9 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -65,6 +65,7 @@ onMounted(() => {
     @keydown.left.stop
     @keydown.right.stop
     @keydown.up.stop
+    @keydown.delete.stop
   />
 
   <span v-else-if="vModel">{{ currency }}</span>
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 743186fd30..5591880433 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -34,6 +34,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @keydown.left.stop
     @keydown.right.stop
     @keydown.up.stop
+    @keydown.delete.stop
   />
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index 219bc1280b..bcb32c34fc 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -88,6 +88,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
       @keydown.left.stop
       @keydown.right.stop
       @keydown.up.stop
+      @keydown.delete.stop
     />
 
     <span v-else> {{ localState }}</span>
diff --git a/packages/nc-gui/components/cell/Email.vue b/packages/nc-gui/components/cell/Email.vue
index c5d74a3680..f7738e109f 100644
--- a/packages/nc-gui/components/cell/Email.vue
+++ b/packages/nc-gui/components/cell/Email.vue
@@ -34,6 +34,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @keydown.left.stop
     @keydown.right.stop
     @keydown.up.stop
+    @keydown.delete.stop
   />
 
   <a v-else-if="validEmail" class="text-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
diff --git a/packages/nc-gui/components/cell/Float.vue b/packages/nc-gui/components/cell/Float.vue
index 9e0a37921a..a2a973d9b2 100644
--- a/packages/nc-gui/components/cell/Float.vue
+++ b/packages/nc-gui/components/cell/Float.vue
@@ -34,6 +34,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @keydown.left.stop
     @keydown.right.stop
     @keydown.up.stop
+    @keydown.delete.stop
   />
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index 7b441c336b..d62b871d8f 100644
--- a/packages/nc-gui/components/cell/Integer.vue
+++ b/packages/nc-gui/components/cell/Integer.vue
@@ -38,6 +38,7 @@ function onKeyDown(evt: KeyboardEvent) {
     @keydown.left.stop
     @keydown.right.stop
     @keydown.up.stop
+    @keydown.delete.stop
   />
   <span v-else class="text-sm">{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index c518033aec..04bbfe2dcf 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -25,6 +25,7 @@ const vModel = useVModel(props, 'modelValue', emits)
     @keydown.left.stop
     @keydown.right.stop
     @keydown.up.stop
+    @keydown.delete.stop
   />
   <span v-else>{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 9094a4adcb..465cfd73f9 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/packages/nc-gui/components/cell/Text.vue
@@ -31,6 +31,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
     @keydown.left.stop
     @keydown.right.stop
     @keydown.up.stop
+    @keydown.delete.stop
   />
 
   <span v-else>{{ vModel }}</span>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 421be3d606..4ed873947f 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -30,6 +30,7 @@ const focus: VNodeRef = (el) => (el as HTMLTextAreaElement)?.focus()
     @keydown.left.stop
     @keydown.right.stop
     @keydown.up.stop
+    @keydown.delete.stop
   />
 
   <span v-else>{{ vModel }}</span>
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index b785332aa5..9c8962465d 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -83,6 +83,7 @@ watch(
       @keydown.left.stop
       @keydown.right.stop
       @keydown.up.stop
+      @keydown.delete.stop
     />
 
     <nuxt-link
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 420a74cec6..8f8c5ee521 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 { onUnmounted } from '@vue/runtime-core'
-import { Card } from 'ant-design-vue'
+import type { Card } from 'ant-design-vue'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index f089a9aac9..69f3d33533 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -176,11 +176,9 @@ export function useMultiSelect(
         break
       /** on delete key press clear cell */
       case 'Delete':
-        if (!unref(editEnabled)) {
-          e.preventDefault()
-          clearRangeRows()
-          await clearCell(selected as { row: number; col: number })
-        }
+        e.preventDefault()
+        clearRangeRows()
+        await clearCell(selected as { row: number; col: number })
         break
       /** on arrow key press navigate through cells */
       case 'ArrowRight':

From c3b14ede49a1b881f8256155123ccfe737fe7899 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 1 Nov 2022 13:56:42 +0530
Subject: [PATCH 19/36] fix(api): show warning as cell content like formula

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/Formula.vue       |  20 +++-
 .../nc-gui/components/virtual-cell/Lookup.vue | 102 +++++++++++-------
 .../nc-gui/components/virtual-cell/Rollup.vue |  44 ++++++--
 .../virtual-cell/components/ListItems.vue     |  44 +++-----
 4 files changed, 137 insertions(+), 73 deletions(-)

diff --git a/packages/nc-gui/components/virtual-cell/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index b6a76015d6..35a9b43c9b 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { message } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, replaceUrlsWithLink, useProject } from '#imports'
@@ -13,6 +12,8 @@ const { isPg } = useProject()
 
 const showEditFormulaWarning = ref(false)
 
+const showClearFormulaWarning = ref(false)
+
 const showEditFormulaWarningMessage = () => {
   showEditFormulaWarning.value = true
 
@@ -20,6 +21,13 @@ const showEditFormulaWarningMessage = () => {
     showEditFormulaWarning.value = false
   }, 3000)
 }
+const showClearFormulaWarningMessage = () => {
+  showClearFormulaWarning.value = true
+
+  setTimeout(() => {
+    showClearFormulaWarning.value = false
+  }, 3000)
+}
 
 const result = computed(() => (isPg.value ? handleTZ(cellValue?.value) : cellValue?.value))
 
@@ -28,10 +36,10 @@ const urls = computed(() => replaceUrlsWithLink(result.value))
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      message.warning('Formula fields should be configured in the field menu dropdown')
+      showEditFormulaWarningMessage()
       break
     case 'Delete':
-      message.warning('Computed field: unable to clear text')
+      showClearFormulaWarningMessage()
       break
   }
 })
@@ -52,10 +60,14 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
 
       <div v-else>{{ result }}</div>
 
-      <div v-if="showEditFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100]">
+      <div v-if="showEditFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
         <!-- TODO: i18n -->
         Warning: Formula fields should be configured in the field menu dropdown.
       </div>
+      <div v-if="showClearFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+        <!-- TODO: i18n -->
+        Warning: Computed field - unable to clear text.
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 0f5de97936..8558db1005 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { message } from 'ant-design-vue'
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
@@ -48,55 +47,86 @@ provide(CellUrlDisableOverlayInj, ref(true))
 
 const lookupColumnMetaProps = useColumn(lookupColumn)
 
+const showEditWarning = ref(false)
+
+const showClearWarning = ref(false)
+
+const showEditWarningMessage = () => {
+  showEditWarning.value = true
+
+  setTimeout(() => {
+    showEditWarning.value = false
+  }, 3000)
+}
+const showClearWarningMessage = () => {
+  showClearWarning.value = true
+
+  setTimeout(() => {
+    showClearWarning.value = false
+  }, 3000)
+}
+
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      message.warning('Computed field: unable to edit')
+      showEditWarningMessage()
       break
     case 'Delete':
-      message.warning('Computed field: unable to clear text')
+      showClearWarningMessage()
       break
   }
 })
 </script>
 
 <template>
-  <div class="h-full flex gap-1 overflow-x-auto p-1">
-    <template v-if="lookupColumn">
-      <!-- Render virtual cell -->
-      <div v-if="isVirtualCol(lookupColumn)">
-        <template
-          v-if="lookupColumn.uidt === UITypes.LinkToAnotherRecord && lookupColumn.colOptions.type === RelationTypes.BELONGS_TO"
-        >
-          <LazySmartsheetVirtualCell
+  <div class="h-full">
+    <div class="h-full flex gap-1 overflow-x-auto p-1">
+      <template v-if="lookupColumn">
+        <!-- Render virtual cell -->
+        <div v-if="isVirtualCol(lookupColumn)">
+          <template
+            v-if="lookupColumn.uidt === UITypes.LinkToAnotherRecord && lookupColumn.colOptions.type === RelationTypes.BELONGS_TO"
+          >
+            <LazySmartsheetVirtualCell
+              v-for="(v, i) of arrValue"
+              :key="i"
+              :edit-enabled="false"
+              :model-value="v"
+              :column="lookupColumn"
+            />
+          </template>
+
+          <LazySmartsheetVirtualCell v-else :edit-enabled="false" :model-value="arrValue" :column="lookupColumn" />
+        </div>
+
+        <!-- Render normal cell -->
+        <template v-else>
+          <!-- For attachment cell avoid adding chip style -->
+          <div
             v-for="(v, i) of arrValue"
             :key="i"
-            :edit-enabled="false"
-            :model-value="v"
-            :column="lookupColumn"
-          />
+            class="min-w-max"
+            :class="{
+              'bg-gray-100 px-1 rounded-full flex-1': !lookupColumnMetaProps.isAttachment,
+              ' border-gray-200 rounded border-1': ![UITypes.Attachment, UITypes.MultiSelect, UITypes.SingleSelect].includes(
+                lookupColumn.uidt,
+              ),
+            }"
+          >
+            <LazySmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" :virtual="true" />
+          </div>
         </template>
-
-        <LazySmartsheetVirtualCell v-else :edit-enabled="false" :model-value="arrValue" :column="lookupColumn" />
-      </div>
-
-      <!-- Render normal cell -->
-      <template v-else>
-        <!-- For attachment cell avoid adding chip style -->
-        <div
-          v-for="(v, i) of arrValue"
-          :key="i"
-          class="min-w-max"
-          :class="{
-            'bg-gray-100 px-1 rounded-full flex-1': !lookupColumnMetaProps.isAttachment,
-            ' border-gray-200 rounded border-1': ![UITypes.Attachment, UITypes.MultiSelect, UITypes.SingleSelect].includes(
-              lookupColumn.uidt,
-            ),
-          }"
-        >
-          <LazySmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" :virtual="true" />
-        </div>
       </template>
-    </template>
+    </div>
+    <div>
+      <div v-if="showEditWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+        <!-- TODO: i18n -->
+        Warning: Computed field - unable to edit content.
+      </div>
+      <div v-if="showClearWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+        <!-- TODO: i18n -->
+        Warning: Computed field - unable to clear content.
+      </div>
+    </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/virtual-cell/Rollup.vue b/packages/nc-gui/components/virtual-cell/Rollup.vue
index 32854445b1..bb563e43ff 100644
--- a/packages/nc-gui/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui/components/virtual-cell/Rollup.vue
@@ -1,23 +1,55 @@
 <script setup lang="ts">
-import { message } from 'ant-design-vue'
 import { CellValueInj, inject } from '#imports'
 
 const value = inject(CellValueInj)
 
+const showEditWarning = ref(false)
+
+const showClearWarning = ref(false)
+
+const showEditWarningMessage = () => {
+  showEditWarning.value = true
+
+  setTimeout(() => {
+    showEditWarning.value = false
+  }, 3000)
+}
+
+const showClearWarningMessage = () => {
+  showClearWarning.value = true
+
+  setTimeout(() => {
+    showClearWarning.value = false
+  }, 3000)
+}
+
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      message.warning('Computed field: unable to edit')
+      showEditWarningMessage()
       break
     case 'Delete':
-      message.warning('Computed field: unable to clear text')
+      showClearWarningMessage()
       break
   }
 })
 </script>
 
 <template>
-  <span class="text-center pl-3">
-    {{ value }}
-  </span>
+  <div>
+    <span class="text-center pl-3">
+      {{ value }}
+    </span>
+
+    <div>
+      <div v-if="showEditWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+        <!-- TODO: i18n -->
+        Warning: Computed field - unable to edit content.
+      </div>
+      <div v-if="showClearWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+        <!-- TODO: i18n -->
+        Warning: Computed field - unable to clear content.
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 8f8c5ee521..5e5874524a 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { onUnmounted } from '@vue/runtime-core'
 import type { Card } from 'ant-design-vue'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
@@ -105,34 +104,25 @@ watch(expandedFormDlg, (nexVal) => {
   if (!nexVal && !isNew.value) vModel.value = false
 })
 
-const { cleanup } = useSelectedCellKeyupListener(
-  vModel,
-  (e: KeyboardEvent) => {
-    switch (e.key) {
-      case 'ArrowUp':
-        selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1)
+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)
         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)
-          e.stopPropagation()
-        }
-        break
-    }
-  },
-  true,
-)
-
-onUnmounted(() => {
-  cleanup.value?.()
+      }
+      break
+  }
 })
-
 const activeRow = (el: InstanceType<typeof Card>) => {
   el?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }

From dc45ca3133526e8849165613601bc3a064c889d9 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 1 Nov 2022 14:39:28 +0530
Subject: [PATCH 20/36] refactor: remove Count and Autonumber field

- Add upgrader to convert all existing  Count and Autonumber to Number

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/utils/columnUtils.ts               |  8 --------
 packages/nocodb/src/lib/Noco.ts                    |  2 +-
 .../nocodb/src/lib/version-upgrader/NcUpgrader.ts  |  2 ++
 .../lib/version-upgrader/ncDataTypesUpgrader.ts    | 14 ++++++++++++++
 packages/nocodb/src/run/docker.ts                  |  1 -
 packages/nocodb/src/run/dockerRunMysql.ts          |  1 -
 packages/nocodb/src/run/dockerRunPG.ts             |  1 -
 packages/nocodb/src/run/dockerRunPG_CyQuick.ts     |  1 -
 8 files changed, 17 insertions(+), 13 deletions(-)
 create mode 100644 packages/nocodb/src/lib/version-upgrader/ncDataTypesUpgrader.ts

diff --git a/packages/nc-gui/utils/columnUtils.ts b/packages/nc-gui/utils/columnUtils.ts
index 7569e53ee3..f75d778afa 100644
--- a/packages/nc-gui/utils/columnUtils.ts
+++ b/packages/nc-gui/utils/columnUtils.ts
@@ -122,18 +122,10 @@ const uiTypes = [
     icon: MovieRoll,
     virtual: 1,
   },
-  {
-    name: UITypes.Count,
-    icon: Counter,
-  },
   {
     name: UITypes.DateTime,
     icon: CalendarClock,
   },
-  {
-    name: UITypes.AutoNumber,
-    icon: Numeric,
-  },
   {
     name: UITypes.Geometry,
     icon: RulerSquareCompass,
diff --git a/packages/nocodb/src/lib/Noco.ts b/packages/nocodb/src/lib/Noco.ts
index e9a7f0e57b..3ca0a2b256 100644
--- a/packages/nocodb/src/lib/Noco.ts
+++ b/packages/nocodb/src/lib/Noco.ts
@@ -101,7 +101,7 @@ export default class Noco {
   constructor() {
     process.env.PORT = process.env.PORT || '8080';
     // todo: move
-    process.env.NC_VERSION = '0090000';
+    process.env.NC_VERSION = '0098004';
 
     // if env variable NC_MINIMAL_DBS is set, then disable project creation with external sources
     if (process.env.NC_MINIMAL_DBS) {
diff --git a/packages/nocodb/src/lib/version-upgrader/NcUpgrader.ts b/packages/nocodb/src/lib/version-upgrader/NcUpgrader.ts
index 4419f20be6..3fab1baf5e 100644
--- a/packages/nocodb/src/lib/version-upgrader/NcUpgrader.ts
+++ b/packages/nocodb/src/lib/version-upgrader/NcUpgrader.ts
@@ -5,6 +5,7 @@ import NcMetaIO from '../meta/NcMetaIO';
 import ncProjectEnvUpgrader from './ncProjectEnvUpgrader';
 import ncProjectEnvUpgrader0011045 from './ncProjectEnvUpgrader0011045';
 import ncProjectUpgraderV2_0090000 from './ncProjectUpgraderV2_0090000';
+import ncDataTypesUpgrader from './ncDataTypesUpgrader';
 
 const log = debug('nc:version-upgrader');
 import { Tele } from 'nc-help';
@@ -31,6 +32,7 @@ export default class NcUpgrader {
         { name: '0011043', handler: ncProjectEnvUpgrader },
         { name: '0011045', handler: ncProjectEnvUpgrader0011045 },
         { name: '0090000', handler: ncProjectUpgraderV2_0090000 },
+        { name: '0098004', handler: ncDataTypesUpgrader },
       ];
       if (!(await ctx.ncMeta.knexConnection?.schema?.hasTable?.('nc_store'))) {
         return;
diff --git a/packages/nocodb/src/lib/version-upgrader/ncDataTypesUpgrader.ts b/packages/nocodb/src/lib/version-upgrader/ncDataTypesUpgrader.ts
new file mode 100644
index 0000000000..4c4f240cee
--- /dev/null
+++ b/packages/nocodb/src/lib/version-upgrader/ncDataTypesUpgrader.ts
@@ -0,0 +1,14 @@
+import { UITypes } from 'nocodb-sdk';
+import { MetaTable } from '../utils/globals';
+import { NcUpgraderCtx } from './NcUpgrader';
+
+// The Count and AutoNumber types are removed
+// so convert all existing Count and AutoNumber fields to Number type
+export default async function (ctx: NcUpgraderCtx) {
+  // directly update uidt of all existing Count and AutoNumber fields to Number
+  await ctx.ncMeta.knex
+    .update({ uidt: UITypes.Number })
+    .where({ uidt: UITypes.Count })
+    .orWhere({ uidt: UITypes.AutoNumber })
+    .table(MetaTable.COLUMNS);
+}
diff --git a/packages/nocodb/src/run/docker.ts b/packages/nocodb/src/run/docker.ts
index b5ddc85520..4702e104d4 100644
--- a/packages/nocodb/src/run/docker.ts
+++ b/packages/nocodb/src/run/docker.ts
@@ -2,7 +2,6 @@ import cors from 'cors';
 import express from 'express';
 
 import Noco from '../lib/Noco';
-process.env.NC_VERSION = '0009044';
 
 const server = express();
 server.enable('trust proxy');
diff --git a/packages/nocodb/src/run/dockerRunMysql.ts b/packages/nocodb/src/run/dockerRunMysql.ts
index 1478a6d3be..d126a9224d 100644
--- a/packages/nocodb/src/run/dockerRunMysql.ts
+++ b/packages/nocodb/src/run/dockerRunMysql.ts
@@ -2,7 +2,6 @@ import cors from 'cors';
 import express from 'express';
 
 import Noco from '../lib/Noco';
-process.env.NC_VERSION = '0009044';
 
 const server = express();
 server.enable('trust proxy');
diff --git a/packages/nocodb/src/run/dockerRunPG.ts b/packages/nocodb/src/run/dockerRunPG.ts
index a2c6fdd015..2b0c568bf9 100644
--- a/packages/nocodb/src/run/dockerRunPG.ts
+++ b/packages/nocodb/src/run/dockerRunPG.ts
@@ -2,7 +2,6 @@ import cors from 'cors';
 import express from 'express';
 
 import Noco from '../lib/Noco';
-process.env.NC_VERSION = '0009044';
 
 const server = express();
 server.enable('trust proxy');
diff --git a/packages/nocodb/src/run/dockerRunPG_CyQuick.ts b/packages/nocodb/src/run/dockerRunPG_CyQuick.ts
index 796522f1af..be74448739 100644
--- a/packages/nocodb/src/run/dockerRunPG_CyQuick.ts
+++ b/packages/nocodb/src/run/dockerRunPG_CyQuick.ts
@@ -2,7 +2,6 @@ import cors from 'cors';
 import express from 'express';
 
 import Noco from '../lib/Noco';
-process.env.NC_VERSION = '0009044';
 
 const server = express();
 server.enable('trust proxy');

From d682e56a3f24fad8569fcc7cd049795f00c57ac6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 3 Nov 2022 11:37:45 +0530
Subject: [PATCH 21/36] refactor: cleanup and lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/cell/attachment/index.vue      |  4 +--
 .../nc-gui/components/smartsheet/Grid.vue     |  2 +-
 .../smartsheet/expanded-form/Comments.vue     |  2 +-
 .../components/virtual-cell/Formula.vue       | 32 ++++++-------------
 .../nc-gui/components/virtual-cell/Lookup.vue | 25 ++++-----------
 .../nc-gui/components/virtual-cell/Rollup.vue | 27 ++++------------
 .../virtual-cell/components/ListItems.vue     | 16 ++++++----
 .../useSelectedCellKeyupListener/index.ts     | 29 +++++++++--------
 packages/nc-gui/utils/columnUtils.ts          |  1 -
 9 files changed, 49 insertions(+), 89 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index c8a51a9b1d..7c785e32d6 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -2,9 +2,8 @@
 import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
-import { ActiveCellInj } from '~/context'
 import {
+  ActiveCellInj,
   DropZoneRef,
   IsGalleryInj,
   IsKanbanInj,
@@ -14,6 +13,7 @@ import {
   openLink,
   ref,
   useDropZone,
+  useSelectedCellKeyupListener,
   useSmartsheetRowStoreOrThrow,
   useSmartsheetStoreOrThrow,
   watch,
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 3e3d163c9c..7b2c7808d3 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -363,7 +363,7 @@ useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
 
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
-onClickOutside(smartTable, (e: PointerEvent) => {
+onClickOutside(smartTable, (e) => {
   clearRangeRows()
   if (selected.col === null) return
 
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 80fd0dc135..c6e921385e 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/Formula.vue b/packages/nc-gui/components/virtual-cell/Formula.vue
index 35a9b43c9b..7d25764c04 100644
--- a/packages/nc-gui/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui/components/virtual-cell/Formula.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, replaceUrlsWithLink, useProject } from '#imports'
+import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, refAutoReset, replaceUrlsWithLink, useProject } from '#imports'
 
 // todo: column type doesn't have required property `error` - throws in typecheck
 const column = inject(ColumnInj) as Ref<ColumnType & { colOptions: { error: any } }>
@@ -10,36 +10,22 @@ const cellValue = inject(CellValueInj)
 
 const { isPg } = useProject()
 
-const showEditFormulaWarning = ref(false)
-
-const showClearFormulaWarning = ref(false)
-
-const showEditFormulaWarningMessage = () => {
-  showEditFormulaWarning.value = true
-
-  setTimeout(() => {
-    showEditFormulaWarning.value = false
-  }, 3000)
-}
-const showClearFormulaWarningMessage = () => {
-  showClearFormulaWarning.value = true
-
-  setTimeout(() => {
-    showClearFormulaWarning.value = false
-  }, 3000)
-}
-
 const result = computed(() => (isPg.value ? handleTZ(cellValue?.value) : cellValue?.value))
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 
+const timeout = 3000 // in ms
+
+const showEditFormulaWarning = refAutoReset(false, timeout)
+const showClearFormulaWarning = refAutoReset(false, timeout)
+
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      showEditFormulaWarningMessage()
+      showEditFormulaWarning.value = true
       break
     case 'Delete':
-      showClearFormulaWarningMessage()
+      showClearFormulaWarning.value = true
       break
   }
 })
@@ -55,7 +41,7 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
       <span>ERR!</span>
     </a-tooltip>
 
-    <div class="p-2" @dblclick="showEditFormulaWarningMessage">
+    <div class="p-2" @dblclick="showEditFormulaWarning = true">
       <div v-if="urls" v-html="urls" />
 
       <div v-else>{{ result }}</div>
diff --git a/packages/nc-gui/components/virtual-cell/Lookup.vue b/packages/nc-gui/components/virtual-cell/Lookup.vue
index 8558db1005..942a0879db 100644
--- a/packages/nc-gui/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui/components/virtual-cell/Lookup.vue
@@ -11,6 +11,7 @@ import {
   computed,
   inject,
   provide,
+  refAutoReset,
   useColumn,
   useMetas,
 } from '#imports'
@@ -47,32 +48,18 @@ provide(CellUrlDisableOverlayInj, ref(true))
 
 const lookupColumnMetaProps = useColumn(lookupColumn)
 
-const showEditWarning = ref(false)
+const timeout = 3000 // in ms
 
-const showClearWarning = ref(false)
-
-const showEditWarningMessage = () => {
-  showEditWarning.value = true
-
-  setTimeout(() => {
-    showEditWarning.value = false
-  }, 3000)
-}
-const showClearWarningMessage = () => {
-  showClearWarning.value = true
-
-  setTimeout(() => {
-    showClearWarning.value = false
-  }, 3000)
-}
+const showEditWarning = refAutoReset(false, timeout)
+const showClearWarning = refAutoReset(false, timeout)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      showEditWarningMessage()
+      showEditWarning.value = true
       break
     case 'Delete':
-      showClearWarningMessage()
+      showClearWarning.value = true
       break
   }
 })
diff --git a/packages/nc-gui/components/virtual-cell/Rollup.vue b/packages/nc-gui/components/virtual-cell/Rollup.vue
index bb563e43ff..dea3a85e7c 100644
--- a/packages/nc-gui/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui/components/virtual-cell/Rollup.vue
@@ -1,35 +1,20 @@
 <script setup lang="ts">
-import { CellValueInj, inject } from '#imports'
+import { CellValueInj, inject, refAutoReset } from '#imports'
 
 const value = inject(CellValueInj)
 
-const showEditWarning = ref(false)
+const timeout = 3000 // in ms
 
-const showClearWarning = ref(false)
-
-const showEditWarningMessage = () => {
-  showEditWarning.value = true
-
-  setTimeout(() => {
-    showEditWarning.value = false
-  }, 3000)
-}
-
-const showClearWarningMessage = () => {
-  showClearWarning.value = true
-
-  setTimeout(() => {
-    showClearWarning.value = false
-  }, 3000)
-}
+const showEditWarning = refAutoReset(false, timeout)
+const showClearWarning = refAutoReset(false, timeout)
 
 useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Enter':
-      showEditWarningMessage()
+      showEditWarning.value = true
       break
     case 'Delete':
-      showClearWarningMessage()
+      showClearWarning.value = true
       break
   }
 })
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 5e5874524a..5b028864c4 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -5,16 +5,16 @@ import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import {
   ColumnInj,
   Empty,
+  IsPublicInj,
   computed,
   inject,
   ref,
   useLTARStoreOrThrow,
+  useSelectedCellKeyupListener,
   useSmartsheetRowStoreOrThrow,
   useVModel,
   watch,
 } from '#imports'
-import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
-import { IsPublicInj } from '~/context'
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -115,15 +115,17 @@ useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
       e.stopPropagation()
       break
     case 'Enter':
-      const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
-      if (selectedRow) {
-        linkRow(selectedRow)
-        e.stopPropagation()
+      {
+        const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
+        if (selectedRow) {
+          linkRow(selectedRow)
+          e.stopPropagation()
+        }
       }
       break
   }
 })
-const activeRow = (el: InstanceType<typeof Card>) => {
+const activeRow = (el?: InstanceType<typeof Card>) => {
   el?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 </script>
diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
index f26e584353..b9565b68e5 100644
--- a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
+++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
@@ -1,20 +1,21 @@
+import { isClient } from '@vueuse/core'
 import type { Ref } from 'vue'
-import { onUnmounted, useEventListener } from '#imports'
 
 export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e: KeyboardEvent) => void) {
-  const cleanup: Ref<ReturnType<typeof useEventListener> | null> = ref(null)
+  if (isClient) {
+    watch(selected, (nextVal, _, cleanup) => {
+      // bind listener when `selected` is truthy
+      if (nextVal) {
+        document.addEventListener('keyup', handler)
+        // if `selected` is falsy then remove the event handler
+      } else {
+        document.removeEventListener('keyup', handler)
+      }
 
-  watch(selected, (value) => {
-    if (value) {
-      cleanup.value = useEventListener('keydown', handler, true)
-    } else {
-      cleanup.value?.()
-    }
-  })
-
-  onUnmounted(() => cleanup.value?.())
-
-  return {
-    cleanup,
+      // cleanup is called whenever the watcher is re-evaluated or stopped
+      cleanup(() => {
+        document.removeEventListener('keyup', handler)
+      })
+    })
   }
 }
diff --git a/packages/nc-gui/utils/columnUtils.ts b/packages/nc-gui/utils/columnUtils.ts
index f75d778afa..318f0ffe08 100644
--- a/packages/nc-gui/utils/columnUtils.ts
+++ b/packages/nc-gui/utils/columnUtils.ts
@@ -24,7 +24,6 @@ import TimerOutline from '~icons/mdi/timer-outline'
 import Star from '~icons/mdi/star'
 import MathIntegral from '~icons/mdi/math-integral'
 import MovieRoll from '~icons/mdi/movie-roll'
-import Counter from '~icons/mdi/counter'
 import CalendarClock from '~icons/mdi/calendar-clock'
 import ID from '~icons/mdi/identifier'
 import RulerSquareCompass from '~icons/mdi/ruler-square-compass'

From 326e6ab7ce62d7bd909471f20c7c21a463981362 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 3 Nov 2022 12:40:17 +0530
Subject: [PATCH 22/36] fix: prevent cell switch on keypress when picker,
 dropdown or LTAR list is in open state

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     | 16 ++++++++++++--
 .../virtual-cell/components/ListItems.vue     | 21 +++++++++++--------
 .../useSelectedCellKeyupListener/index.ts     |  6 +++---
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 7b2c7808d3..0ba1cd4b6d 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -172,6 +172,13 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
   makeEditable,
   scrollToCell,
   (e: KeyboardEvent) => {
+    // ignore navigating if picker(Date, Time, DateTime, Year)
+    // or single/multi select options is open
+    const activePickerOrDropdownEl = document.querySelector(
+      '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
+    )
+    if (activePickerOrDropdownEl) return true
+
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
     if (e.key === 'Space') {
       if (selected.row !== null && !editEnabled) {
@@ -373,10 +380,15 @@ onClickOutside(smartTable, (e) => {
 
   // ignore unselecting if clicked inside or on the picker(Date, Time, DateTime, Year)
   // or single/multi select options
-  const activePickerEl = document.querySelector(
+  const activePickerOrDropdownEl = document.querySelector(
     '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
   )
-  if (e.target && activePickerEl && (activePickerEl === e.target || activePickerEl?.contains(e.target as Element))) return
+  if (
+    e.target &&
+    activePickerOrDropdownEl &&
+    (activePickerOrDropdownEl === e.target || activePickerOrDropdownEl?.contains(e.target as Element))
+  )
+    return
 
   selected.row = null
   selected.col = null
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 5b028864c4..7ab1835468 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -106,6 +106,10 @@ watch(expandedFormDlg, (nexVal) => {
 
 useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
   switch (e.key) {
+    case 'ArrowLeft':
+    case 'ArrowRight':
+      e.stopPropagation()
+      break
     case 'ArrowUp':
       selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1)
       e.stopPropagation()
@@ -114,19 +118,18 @@ useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
       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()
-        }
+    case 'Enter': {
+      const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
+      if (selectedRow) {
+        linkRow(selectedRow)
+        e.stopPropagation()
       }
+    }
       break
   }
 })
-const activeRow = (el?: InstanceType<typeof Card>) => {
-  el?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+const activeRow = (vNode?: InstanceType<typeof Card>) => {
+  vNode?.$el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
 }
 </script>
 
diff --git a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
index b9565b68e5..e8e696b96a 100644
--- a/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
+++ b/packages/nc-gui/composables/useSelectedCellKeyupListener/index.ts
@@ -6,15 +6,15 @@ export function useSelectedCellKeyupListener(selected: Ref<boolean>, handler: (e
     watch(selected, (nextVal, _, cleanup) => {
       // bind listener when `selected` is truthy
       if (nextVal) {
-        document.addEventListener('keyup', handler)
+        document.addEventListener('keydown', handler, true)
         // if `selected` is falsy then remove the event handler
       } else {
-        document.removeEventListener('keyup', handler)
+        document.removeEventListener('keydown', handler, true)
       }
 
       // cleanup is called whenever the watcher is re-evaluated or stopped
       cleanup(() => {
-        document.removeEventListener('keyup', handler)
+        document.removeEventListener('keydown', handler, true)
       })
     })
   }

From 2d16ed7a3a8568840dbfac5a28b6862816e7ded8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 3 Nov 2022 14:03:54 +0530
Subject: [PATCH 23/36] fix: allow toggling picker if cell is in editable state

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/DatePicker.vue | 18 +++++++++++++++---
 .../nc-gui/components/cell/DateTimePicker.vue  |  6 ++++--
 packages/nc-gui/components/cell/TimePicker.vue |  6 ++++--
 packages/nc-gui/components/cell/YearPicker.vue |  8 +++++---
 .../virtual-cell/components/ListItems.vue      | 13 +++++++------
 5 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 3578024d8f..5e795d1b80 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject, ref, useSelectedCellKeyupListener, watch } from '#imports'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  EditModeInj,
+  ReadonlyInj,
+  computed,
+  inject,
+  ref,
+  useSelectedCellKeyupListener,
+  watch,
+} from '#imports'
 
 interface Props {
   modelValue?: string | null
@@ -17,6 +27,8 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
 
+const editable = inject(EditModeInj, ref(false))
+
 let isDateInvalid = $ref(false)
 
 const dateFormat = $computed(() => columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD')
@@ -84,8 +96,8 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :dropdown-class-name="`${randomClass} nc-picker-date ${open ? 'active' : ''}`"
-    :open="(readOnly || (localState && isPk)) && !active ? false : open"
-    @click="open = !open"
+    :open="(readOnly || (localState && isPk)) && !active && !editable ? false : open"
+    @click="open = (active || editable) && !open"
   >
     <template #suffixIcon></template>
   </a-date-picker>
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 3acae997e3..9c4bb759bd 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -17,6 +17,8 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
 
+const editable = inject(EditModeInj, ref(false))
+
 let isDateInvalid = $ref(false)
 
 const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
@@ -84,9 +86,9 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
     :dropdown-class-name="`${randomClass} nc-picker-datetime ${open ? 'active' : ''}`"
-    :open="readOnly || (localState && isPk) ? false : open && active"
+    :open="readOnly || (localState && isPk) ? false : open && (active || editable)"
     :disabled="readOnly || (localState && isPk)"
-    @click="open = active && !open"
+    @click="open = (active || editable) && !open"
     @ok="open = !open"
   >
     <template #suffixIcon></template>
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 84aed4eece..f9f319aa1e 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -17,6 +17,8 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
 
+const editable = inject(EditModeInj, ref(false))
+
 let isTimeInvalid = $ref(false)
 
 const dateFormat = isMysql.value ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
@@ -94,9 +96,9 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :placeholder="isTimeInvalid ? 'Invalid time' : ''"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :open="(readOnly || (localState && isPk)) && !active ? false : open"
+    :open="(readOnly || (localState && isPk)) && !active && !editable ? false : open"
     :popup-class-name="`${randomClass} nc-picker-time ${open ? 'active' : ''}`"
-    @click="open = active && !open"
+    @click="open = (active || editable) && !open"
     @ok="open = !open"
   >
     <template #suffixIcon></template>
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index 175d3dcced..197ee38e07 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -15,6 +15,8 @@ const readOnly = inject(ReadonlyInj, ref(false))
 
 const active = inject(ActiveCellInj, ref(false))
 
+const editable = inject(EditModeInj, ref(false))
+
 let isYearInvalid = $ref(false)
 
 const localState = $computed({
@@ -81,10 +83,10 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :placeholder="placeholder"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"
-    :open="(readOnly || (localState && isPk)) && !active ? false : open"
+    :open="(readOnly || (localState && isPk)) && !active && !editable ? false : open"
     :dropdown-class-name="`${randomClass} nc-picker-year ${open ? 'active' : ''}`"
-    @click="open = active && !open"
-    @change="open = active && !open"
+    @click="open = (active || editable) && !open"
+    @change="open = (active || editable) && !open"
   >
     <template #suffixIcon></template>
   </a-date-picker>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index 7ab1835468..d603088520 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -118,13 +118,14 @@ useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
       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()
+    case 'Enter':
+      {
+        const selectedRow = childrenExcludedList.value?.list?.[selectedRowIndex.value]
+        if (selectedRow) {
+          linkRow(selectedRow)
+          e.stopPropagation()
+        }
       }
-    }
       break
   }
 })

From 46e6978a2be02edd59a12fff0dc6e41bbf7b5a88 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 3 Nov 2022 15:25:51 +0530
Subject: [PATCH 24/36] feat: LTAR list - on let/right arrow key navigate
 through pages

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/components/ListItems.vue     | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index d603088520..d20e171177 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -107,8 +107,17 @@ watch(expandedFormDlg, (nexVal) => {
 useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'ArrowLeft':
+      e.stopPropagation()
+      if (childrenExcludedListPagination.page > 1) childrenExcludedListPagination.page--
+      break
     case 'ArrowRight':
       e.stopPropagation()
+      if (
+        childrenExcludedList.value?.pageInfo &&
+        childrenExcludedListPagination.page <
+          (childrenExcludedList.value.pageInfo.totalRows || 1) / childrenExcludedListPagination.size
+      )
+        childrenExcludedListPagination.page++
       break
     case 'ArrowUp':
       selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1)

From 72d10d415e36a05a01a4972abf1d0ea9a61fd4ed Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 3 Nov 2022 16:17:24 +0530
Subject: [PATCH 25/36] fix: block default action on shortcut key press and
 typo correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue            | 8 ++++++--
 .../components/virtual-cell/components/ListItems.vue      | 5 +++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 0ba1cd4b6d..99b86bcdf2 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -177,11 +177,15 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
     const activePickerOrDropdownEl = document.querySelector(
       '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
     )
-    if (activePickerOrDropdownEl) return true
+    if (activePickerOrDropdownEl) {
+      e.preventDefault()
+      return true
+    }
 
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
-    if (e.key === 'Space') {
+    if (e.code === 'Space') {
       if (selected.row !== null && !editEnabled) {
+        e.preventDefault()
         const row = data.value[selected.row]
         expandForm(row)
         return true
diff --git a/packages/nc-gui/components/virtual-cell/components/ListItems.vue b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
index d20e171177..147627bc1b 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListItems.vue
@@ -108,10 +108,12 @@ useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
   switch (e.key) {
     case 'ArrowLeft':
       e.stopPropagation()
+      e.preventDefault()
       if (childrenExcludedListPagination.page > 1) childrenExcludedListPagination.page--
       break
     case 'ArrowRight':
       e.stopPropagation()
+      e.preventDefault()
       if (
         childrenExcludedList.value?.pageInfo &&
         childrenExcludedListPagination.page <
@@ -122,10 +124,12 @@ useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
     case 'ArrowUp':
       selectedRowIndex.value = Math.max(0, selectedRowIndex.value - 1)
       e.stopPropagation()
+      e.preventDefault()
       break
     case 'ArrowDown':
       selectedRowIndex.value = Math.min(childrenExcludedList.value?.list?.length - 1, selectedRowIndex.value + 1)
       e.stopPropagation()
+      e.preventDefault()
       break
     case 'Enter':
       {
@@ -133,6 +137,7 @@ useSelectedCellKeyupListener(vModel, (e: KeyboardEvent) => {
         if (selectedRow) {
           linkRow(selectedRow)
           e.stopPropagation()
+          e.preventDefault()
         }
       }
       break

From 1fa5e3c251b9f7a55d3d27bb3d3e5d0d90a59ef4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 3 Nov 2022 16:49:56 +0530
Subject: [PATCH 26/36] fix: on escape key press toggle to readonly

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 99b86bcdf2..e02d7c49e1 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -156,13 +156,12 @@ const getContainerScrollForElement = (
     relativePos.bottom + (offset?.bottom || 0) > 0
       ? container.scrollTop + relativePos.bottom + (offset?.bottom || 0)
       : relativePos.top - (offset?.top || 0) < 0
-      ? container.scrollTop + relativePos.top - (offset?.top || 0)
-      : container.scrollTop
+        ? container.scrollTop + relativePos.top - (offset?.top || 0)
+        : container.scrollTop
 
   return scroll
 }
 
-
 const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange, selected } = useMultiSelect(
   fields,
   data,
@@ -183,13 +182,18 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
     }
 
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
-    if (e.code === 'Space') {
+    if (e.key === ' ') {
       if (selected.row !== null && !editEnabled) {
         e.preventDefault()
         const row = data.value[selected.row]
         expandForm(row)
         return true
       }
+    } else if (e.key === 'Escape') {
+      if (editEnabled) {
+        editEnabled = false
+        return true
+      }
     }
     if (cmdOrCtrl) {
       switch (e.key) {

From ad1a64a985eefa67658fff80c8477cd81e2bd42e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 4 Nov 2022 11:20:10 +0530
Subject: [PATCH 27/36] fix(gui): single/multi select issue with arrow and
 enter keys

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 54 ++++++++++++-------
 .../nc-gui/components/cell/SingleSelect.vue   | 11 +++-
 .../nc-gui/components/smartsheet/Cell.vue     |  5 +-
 .../nc-gui/components/smartsheet/Grid.vue     |  6 +++
 4 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 537ad815a7..4e0664b2e1 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -74,30 +74,32 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-            const opa = options.value.find((el) => el.title === a)
-            const opb = options.value.find((el) => el.title === b)
-            if (opa && opb) {
-              return opa.order! - opb.order!
-            }
-            return 0
-          })
+          const opa = options.value.find((el) => el.title === a)
+          const opb = options.value.find((el) => el.title === b)
+          if (opa && opb) {
+            return opa.order! - opb.order!
+          }
+          return 0
+        })
         : modelValue.split(',')
       : modelValue
     : [],
 )
 
+
+const v = Math.floor(Math.random() *1000)
+
 const handleKeys = (e: KeyboardEvent) => {
+  console.log(`handleKeys ${v}`, e.key)
+  if (!active.value) return true
   switch (e.key) {
-    case 'Escape':
-      e.preventDefault()
-      isOpen.value = false
-      break
     case 'ArrowDown':
     case 'ArrowUp':
-      if (isOpen.value) e.stopPropagation()
+      if (isOpen.value) {
+        e.stopPropagation()
+      }
       break
     case 'Enter':
-      isOpen.value = true
       e.stopPropagation()
       break
   }
@@ -137,31 +139,43 @@ watch(
 )
 
 watch(isOpen, (n, _o) => {
-  if (!n) aselect.value?.$el.blur()
+  if (!n) {
+    aselect.value?.$el?.querySelector('input')?.blur()
+  } else {
+    aselect.value?.$el?.querySelector('input')?.focus()
+  }
 })
 
+
 useSelectedCellKeyupListener(active, (e) => {
-  if (e.key === 'Escape') {
-    // e.stopPropagation()
-    isOpen.value = false
+  switch (e.key) {
+    case 'Escape':
+      isOpen.value = false
+      select?.value?.blur()
+      break
+    case 'Enter':
+      if (active.value && !isOpen.value) {
+        isOpen.value = true
+        e.stopPropagation()
+      }
+      break
   }
 })
 </script>
 
 <template>
   <a-select
-    ref="select"
+    ref="aselect"
     v-model:value="vModel"
     mode="multiple"
     class="w-full"
     :bordered="false"
     :show-arrow="!readOnly"
     :show-search="false"
-    :open="isOpen"
+    v-model:open="isOpen"
     :disabled="readOnly"
     :class="{ '!ml-[-8px]': readOnly }"
     :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
-    @keydown="handleKeys"
     @click="isOpen = active && !isOpen"
   >
     <a-select-option
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index f03bd095f9..30a97f7b57 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -3,6 +3,7 @@ import tinycolor from 'tinycolor2'
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionType } from 'nocodb-sdk'
 import { ActiveCellInj, ColumnInj, IsKanbanInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
+import { useSelectedCellKeyupListener } from '~/composables/useSelectedCellKeyupListener'
 
 interface Props {
   modelValue?: string | undefined
@@ -61,6 +62,7 @@ const handleKeys = (e: KeyboardEvent) => {
   }
 }
 
+
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
     isOpen.value = false
@@ -70,8 +72,13 @@ const handleClose = (e: MouseEvent) => {
 
 useEventListener(document, 'click', handleClose)
 
+
 watch(isOpen, (n, _o) => {
-  if (!n) aselect.value?.$el.blur()
+  if (!n) {
+    aselect.value?.$el?.querySelector('input')?.blur()
+  } else {
+    aselect.value?.$el?.querySelector('input')?.focus()
+  }
 })
 </script>
 
@@ -87,7 +94,7 @@ watch(isOpen, (n, _o) => {
     :show-arrow="!readOnly && (active || vModel === null)"
     :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
     @select="isOpen = false"
-    @keydown="handleKeys"
+    @keydown="isOpen ? handleKeys : null"
     @click="isOpen = active && !isOpen"
   >
     <a-select-option
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 1a2ce59f65..32cbf90aec 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -111,6 +111,7 @@ const vModel = computed({
 })
 
 const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
+  console.log('syncAndNavigate', e.target)
   if (isJSON.value) return
 
   if (currentRow.value.rowMeta.changed || currentRow.value.rowMeta.new) {
@@ -127,9 +128,9 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
   <div
     class="nc-cell w-full"
     :class="[`nc-cell-${(column?.uidt || 'default').toLowerCase()}`, { 'text-blue-600': isPrimary && !virtual && !isForm }]"
-    @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
+><!--    @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"
-  >
+  >-->
     <LazyCellTextArea v-if="isTextArea" v-model="vModel" />
     <LazyCellCheckbox v-else-if="isBoolean" v-model="vModel" />
     <LazyCellAttachment v-else-if="isAttachment" v-model="vModel" :row-index="props.rowIndex" />
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index e02d7c49e1..f50291a631 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -180,6 +180,7 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
       e.preventDefault()
       return true
     }
+    console.log('=========', e.key, e.code)
 
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
     if (e.key === ' ') {
@@ -194,6 +195,11 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
         editEnabled = false
         return true
       }
+    } else if (e.key === 'Enter') {
+      if (editEnabled) {
+        editEnabled = false
+        return true
+      }
     }
     if (cmdOrCtrl) {
       switch (e.key) {

From 07728342d8532de3dd64852c0f9ec10937882c2b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 5 Nov 2022 13:21:35 +0530
Subject: [PATCH 28/36] fix: proper multi/single select behaviour with keyboard

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/cell/MultiSelect.vue    | 39 +++++--------------
 .../nc-gui/components/cell/SingleSelect.vue   | 34 +++++++---------
 .../nc-gui/components/smartsheet/Cell.vue     |  4 +-
 .../nc-gui/components/smartsheet/Grid.vue     |  8 ++--
 4 files changed, 30 insertions(+), 55 deletions(-)

diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 4e0664b2e1..6d5d704321 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -74,36 +74,19 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-          const opa = options.value.find((el) => el.title === a)
-          const opb = options.value.find((el) => el.title === b)
-          if (opa && opb) {
-            return opa.order! - opb.order!
-          }
-          return 0
-        })
+            const opa = options.value.find((el) => el.title === a)
+            const opb = options.value.find((el) => el.title === b)
+            if (opa && opb) {
+              return opa.order! - opb.order!
+            }
+            return 0
+          })
         : modelValue.split(',')
       : modelValue
     : [],
 )
 
-
-const v = Math.floor(Math.random() *1000)
-
-const handleKeys = (e: KeyboardEvent) => {
-  console.log(`handleKeys ${v}`, e.key)
-  if (!active.value) return true
-  switch (e.key) {
-    case 'ArrowDown':
-    case 'ArrowUp':
-      if (isOpen.value) {
-        e.stopPropagation()
-      }
-      break
-    case 'Enter':
-      e.stopPropagation()
-      break
-  }
-}
+const v = Math.floor(Math.random() * 1000)
 
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
@@ -146,17 +129,14 @@ watch(isOpen, (n, _o) => {
   }
 })
 
-
 useSelectedCellKeyupListener(active, (e) => {
   switch (e.key) {
     case 'Escape':
       isOpen.value = false
-      select?.value?.blur()
       break
     case 'Enter':
       if (active.value && !isOpen.value) {
         isOpen.value = true
-        e.stopPropagation()
       }
       break
   }
@@ -167,15 +147,16 @@ useSelectedCellKeyupListener(active, (e) => {
   <a-select
     ref="aselect"
     v-model:value="vModel"
+    v-model:open="isOpen"
     mode="multiple"
     class="w-full"
     :bordered="false"
     :show-arrow="!readOnly"
     :show-search="false"
-    v-model:open="isOpen"
     :disabled="readOnly"
     :class="{ '!ml-[-8px]': readOnly }"
     :dropdown-class-name="`nc-dropdown-multi-select-cell ${isOpen ? 'active' : ''}`"
+    @keydown.enter.stop
     @click="isOpen = active && !isOpen"
   >
     <a-select-option
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index 30a97f7b57..cf7615bf05 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -45,24 +45,6 @@ const options = computed<SelectOptionType[]>(() => {
   return []
 })
 
-const handleKeys = (e: KeyboardEvent) => {
-  switch (e.key) {
-    case 'Escape':
-      e.preventDefault()
-      isOpen.value = false
-      break
-    case 'ArrowDown':
-    case 'ArrowUp':
-      if (isOpen.value) e.stopPropagation()
-      break
-    case 'Enter':
-      isOpen.value = true
-      e.stopPropagation()
-      break
-  }
-}
-
-
 const handleClose = (e: MouseEvent) => {
   if (aselect.value && !aselect.value.$el.contains(e.target)) {
     isOpen.value = false
@@ -72,7 +54,6 @@ const handleClose = (e: MouseEvent) => {
 
 useEventListener(document, 'click', handleClose)
 
-
 watch(isOpen, (n, _o) => {
   if (!n) {
     aselect.value?.$el?.querySelector('input')?.blur()
@@ -80,6 +61,19 @@ watch(isOpen, (n, _o) => {
     aselect.value?.$el?.querySelector('input')?.focus()
   }
 })
+
+useSelectedCellKeyupListener(active, (e) => {
+  switch (e.key) {
+    case 'Escape':
+      isOpen.value = false
+      break
+    case 'Enter':
+      if (active.value && !isOpen.value) {
+        isOpen.value = true
+      }
+      break
+  }
+})
 </script>
 
 <template>
@@ -94,7 +88,7 @@ watch(isOpen, (n, _o) => {
     :show-arrow="!readOnly && (active || vModel === null)"
     :dropdown-class-name="`nc-dropdown-single-select-cell ${isOpen ? 'active' : ''}`"
     @select="isOpen = false"
-    @keydown="isOpen ? handleKeys : null"
+    @keydown.enter.stop
     @click="isOpen = active && !isOpen"
   >
     <a-select-option
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 32cbf90aec..12636665a8 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -128,9 +128,9 @@ const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
   <div
     class="nc-cell w-full"
     :class="[`nc-cell-${(column?.uidt || 'default').toLowerCase()}`, { 'text-blue-600': isPrimary && !virtual && !isForm }]"
-><!--    @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
+    @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
     @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"
-  >-->
+  >
     <LazyCellTextArea v-if="isTextArea" v-model="vModel" />
     <LazyCellCheckbox v-else-if="isBoolean" v-model="vModel" />
     <LazyCellAttachment v-else-if="isAttachment" v-model="vModel" :row-index="props.rowIndex" />
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index f50291a631..6080ad5578 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -145,8 +145,8 @@ const getContainerScrollForElement = (
     relativePos.right + (offset?.right || 0) > 0
       ? container.scrollLeft + relativePos.right + (offset?.right || 0)
       : relativePos.left - (offset?.left || 0) < 0
-        ? container.scrollLeft + relativePos.left - (offset?.left || 0)
-        : container.scrollLeft
+      ? container.scrollLeft + relativePos.left - (offset?.left || 0)
+      : container.scrollLeft
 
   /*
    * If the element is below the container, scroll down (positive)
@@ -156,8 +156,8 @@ const getContainerScrollForElement = (
     relativePos.bottom + (offset?.bottom || 0) > 0
       ? container.scrollTop + relativePos.bottom + (offset?.bottom || 0)
       : relativePos.top - (offset?.top || 0) < 0
-        ? container.scrollTop + relativePos.top - (offset?.top || 0)
-        : container.scrollTop
+      ? container.scrollTop + relativePos.top - (offset?.top || 0)
+      : container.scrollTop
 
   return scroll
 }

From 62f04a05eecbc594faffe1e698454a1c6fa3a4f0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 6 Nov 2022 12:22:38 +0530
Subject: [PATCH 29/36] fix(gui): prevent escape key press event bubbling only
 if picker is active

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/DatePicker.vue     | 6 ++++--
 packages/nc-gui/components/cell/DateTimePicker.vue | 6 ++++--
 packages/nc-gui/components/cell/TimePicker.vue     | 6 ++++--
 packages/nc-gui/components/cell/YearPicker.vue     | 6 ++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 5e795d1b80..f4e6508bce 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -79,8 +79,10 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       open.value = true
       break
     case 'Escape':
-      e.stopPropagation()
-      open.value = false
+      if (open.value) {
+        e.stopPropagation()
+        open.value = false
+      }
       break
   }
 })
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 9c4bb759bd..d9cb6e2dea 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -68,8 +68,10 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       open.value = true
       break
     case 'Escape':
-      e.stopPropagation()
-      open.value = false
+      if (open.value) {
+        e.stopPropagation()
+        open.value = false
+      }
       break
   }
 })
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index f9f319aa1e..6402de2bed 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -77,8 +77,10 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       open.value = true
       break
     case 'Escape':
-      e.stopPropagation()
-      open.value = false
+      if (open.value) {
+        e.stopPropagation()
+        open.value = false
+      }
       break
   }
 })
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index 197ee38e07..f1c3ef1bce 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -67,8 +67,10 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       open.value = true
       break
     case 'Escape':
-      e.stopPropagation()
-      open.value = false
+      if (open.value) {
+        e.stopPropagation()
+        open.value = false
+      }
       break
   }
 })

From c84998d7aa3fd98e31c41a3e021e2aca00f3a3bf Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 6 Nov 2022 12:44:38 +0530
Subject: [PATCH 30/36] fix(gui): reset to non-editable mode if switching cell

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

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 6080ad5578..2b3d053318 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -180,7 +180,6 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
       e.preventDefault()
       return true
     }
-    console.log('=========', e.key, e.code)
 
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
     if (e.key === ' ') {
@@ -207,21 +206,25 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
           selected.row = 0
           selected.col = selected.col ?? 0
           scrollToCell?.()
+          editEnabled = false;
           return true
         case 'ArrowDown':
           selected.row = data.value.length - 1
           selected.col = selected.col ?? 0
           scrollToCell?.()
+          editEnabled = false;
           return true
         case 'ArrowRight':
           selected.row = selected.row ?? 0
           selected.col = fields.value?.length - 1
           scrollToCell?.()
+          editEnabled = false;
           return true
         case 'ArrowLeft':
           selected.row = selected.row ?? 0
           selected.col = 0
           scrollToCell?.()
+          editEnabled = false;
           return true
       }
     }
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 69f3d33533..6006ca09a4 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -1,6 +1,6 @@
 import type { MaybeRef } from '@vueuse/core'
 import { UITypes } from 'nocodb-sdk'
-import { message, reactive, unref, useCopy, useEventListener, useI18n } from '#imports'
+import { message, reactive, unref, useCopy, useEventListener, useI18n, ref } from '#imports'
 
 interface SelectedBlock {
   row: number | null
@@ -13,7 +13,7 @@ interface SelectedBlock {
 export function useMultiSelect(
   fields: MaybeRef<any[]>,
   data: MaybeRef<any[]>,
-  editEnabled: MaybeRef<boolean>,
+  _editEnabled: MaybeRef<boolean>,
   isPkAvail: MaybeRef<boolean | undefined>,
   clearCell: Function,
   makeEditable: Function,
@@ -24,6 +24,8 @@ export function useMultiSelect(
 
   const { copy } = useCopy()
 
+  const editEnabled = ref(_editEnabled)
+
   const selected = reactive<SelectedBlock>({ row: null, col: null })
 
   // save the first and the last column where the mouse is down while the value isSelectedRow is true
@@ -39,6 +41,7 @@ export function useMultiSelect(
 
   function selectCell(row: number, col: number) {
     clearRangeRows()
+    editEnabled.value = false
     selected.row = row
     selected.col = col
   }
@@ -154,16 +157,20 @@ export function useMultiSelect(
         if (e.shiftKey) {
           if (selected.col > 0) {
             selected.col--
+            editEnabled.value = false
           } else if (selected.row > 0) {
             selected.row--
             selected.col = unref(columnLength) - 1
+            editEnabled.value = false
           }
         } else {
           if (selected.col < unref(columnLength) - 1) {
             selected.col++
+            editEnabled.value = false
           } else if (selected.row < unref(data).length - 1) {
             selected.row++
             selected.col = 0
+            editEnabled.value = false
           }
         }
         scrollToActiveCell?.()
@@ -187,6 +194,7 @@ export function useMultiSelect(
         if (selected.col < unref(columnLength) - 1) {
           selected.col++
           scrollToActiveCell?.()
+          editEnabled.value = false
         }
         break
       case 'ArrowLeft':
@@ -196,6 +204,7 @@ export function useMultiSelect(
         if (selected.col > 0) {
           selected.col--
           scrollToActiveCell?.()
+          editEnabled.value = false
         }
         break
       case 'ArrowUp':
@@ -205,6 +214,7 @@ export function useMultiSelect(
         if (selected.row > 0) {
           selected.row--
           scrollToActiveCell?.()
+          editEnabled.value = false
         }
         break
       case 'ArrowDown':
@@ -214,63 +224,63 @@ export function useMultiSelect(
         if (selected.row < unref(data).length - 1) {
           selected.row++
           scrollToActiveCell?.()
+          editEnabled.value = false
         }
         break
-      default:
-        {
-          const rowObj = unref(data)[selected.row]
-
-          const columnObj = unref(fields)[selected.col]
+      default: {
+        const rowObj = unref(data)[selected.row]
 
-          let cptext = '' // variable for save the text to be copy
+        const columnObj = unref(fields)[selected.col]
 
-          if (!isNaN(rangeRows.minRow) && !isNaN(rangeRows.maxRow) && !isNaN(rangeRows.minCol) && !isNaN(rangeRows.maxCol)) {
-            const cprows = unref(data).slice(rangeRows.minRow, rangeRows.maxRow + 1) // slice the selected rows for copy
+        let cptext = '' // variable for save the text to be copy
 
-            const cpcols = unref(fields).slice(rangeRows.minCol, rangeRows.maxCol + 1) // slice the selected cols for copy
+        if (!isNaN(rangeRows.minRow) && !isNaN(rangeRows.maxRow) && !isNaN(rangeRows.minCol) && !isNaN(rangeRows.maxCol)) {
+          const cprows = unref(data).slice(rangeRows.minRow, rangeRows.maxRow + 1) // slice the selected rows for copy
 
-            cprows.forEach((row) => {
-              cpcols.forEach((col) => {
-                // todo: JSON stringify the attachment cell and LTAR contents for copy
-                // filter attachment cells and LATR cells from copy
-                if (col.uidt !== UITypes.Attachment && col.uidt !== UITypes.LinkToAnotherRecord) {
-                  cptext = `${cptext} ${row.row[col.title]} \t`
-                }
-              })
+          const cpcols = unref(fields).slice(rangeRows.minCol, rangeRows.maxCol + 1) // slice the selected cols for copy
 
-              cptext = `${cptext.trim()}\n`
+          cprows.forEach((row) => {
+            cpcols.forEach((col) => {
+              // todo: JSON stringify the attachment cell and LTAR contents for copy
+              // filter attachment cells and LATR cells from copy
+              if (col.uidt !== UITypes.Attachment && col.uidt !== UITypes.LinkToAnotherRecord) {
+                cptext = `${cptext} ${row.row[col.title]} \t`
+              }
             })
 
-            cptext.trim()
-          } else {
-            cptext = rowObj.row[columnObj.title] || ''
-          }
+            cptext = `${cptext.trim()}\n`
+          })
 
-          if ((!unref(editEnabled) && e.metaKey) || e.ctrlKey) {
-            switch (e.keyCode) {
-              // copy - ctrl/cmd +c
-              case 67:
-                await copy(cptext)
-                break
-            }
-          }
+          cptext.trim()
+        } else {
+          cptext = rowObj.row[columnObj.title] || ''
+        }
 
-          if (unref(editEnabled) || e.ctrlKey || e.altKey || e.metaKey) {
-            return
+        if ((!unref(editEnabled) && e.metaKey) || e.ctrlKey) {
+          switch (e.keyCode) {
+            // copy - ctrl/cmd +c
+            case 67:
+              await copy(cptext)
+              break
           }
+        }
+
+        if (unref(editEnabled) || e.ctrlKey || e.altKey || e.metaKey) {
+          return
+        }
 
-          /** on letter key press make cell editable and empty */
-          if (e.key.length === 1) {
-            if (!unref(isPkAvail) && !rowObj.rowMeta.new) {
-              // Update not allowed for table which doesn't have primary Key
-              return message.info(t('msg.info.updateNotAllowedWithoutPK'))
-            }
-            if (makeEditable(rowObj, columnObj)) {
-              rowObj.row[columnObj.title] = ''
-            }
-            // editEnabled = true
+        /** on letter key press make cell editable and empty */
+        if (e.key.length === 1) {
+          if (!unref(isPkAvail) && !rowObj.rowMeta.new) {
+            // Update not allowed for table which doesn't have primary Key
+            return message.info(t('msg.info.updateNotAllowedWithoutPK'))
           }
+          if (makeEditable(rowObj, columnObj)) {
+            rowObj.row[columnObj.title] = ''
+          }
+          // editEnabled = true
         }
+      }
         break
     }
   }

From a888539bd4eff582b4a8128a0470b86cddc7b32b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 6 Nov 2022 12:55:16 +0530
Subject: [PATCH 31/36] fix(gui): reset attachment cell value on update

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/cell/attachment/index.vue      | 61 +++++++++++--------
 1 file changed, 35 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 7c785e32d6..b8d7a271d9 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -115,36 +115,45 @@ watch(
           attachments.value = []
         }
       }
+    } else {
+      if (isPublic.value && isForm.value) {
+        storedFiles.value = []
+      } else {
+        attachments.value = []
+      }
     }
   },
-  { immediate: true },
-)
-
-/** updates attachments array for autosave */
-function updateModelValue(data: string | Record<string, any>[]) {
-  emits('update:modelValue', data)
-}
-
-/** Close modal on escape press, disable dropzone as well */
-onKeyDown('Escape', () => {
-  modalVisible.value = false
-  isOverDropZone.value = false
-})
+    {
+      immediate: true
+    }
+  ,
+  )
 
-/** sync storedFiles state with row state */
-watch(
-  () => storedFiles.value.length || 0,
-  () => {
-    rowState.value[column.value!.title!] = storedFiles.value
-  },
-)
+    /** updates attachments array for autosave */
+    function updateModelValue(data: string | Record<string, any>[]) {
+      emits('update:modelValue', data)
+    }
 
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
-  if (e.key === 'Enter' && !isReadonly.value) {
-    e.stopPropagation()
-    modalVisible.value = true
-  }
-})
+    /** Close modal on escape press, disable dropzone as well */
+    onKeyDown('Escape', () => {
+      modalVisible.value = false
+      isOverDropZone.value = false
+    })
+
+    /** sync storedFiles state with row state */
+    watch(
+      () => storedFiles.value.length || 0,
+      () => {
+        rowState.value[column.value!.title!] = storedFiles.value
+      },
+    )
+
+    useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+      if (e.key === 'Enter' && !isReadonly.value) {
+        e.stopPropagation()
+        modalVisible.value = true
+      }
+    })
 </script>
 
 <template>

From 6dba597fef3447fb1658392c1465a29f901eea6d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 6 Nov 2022 12:56:15 +0530
Subject: [PATCH 32/36] chore(gui): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/cell/attachment/index.vue      | 57 ++++++-------
 .../nc-gui/components/smartsheet/Grid.vue     |  8 +-
 .../composables/useMultiSelect/index.ts       | 85 ++++++++++---------
 3 files changed, 75 insertions(+), 75 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index b8d7a271d9..1ce6ec6a51 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -123,37 +123,36 @@ watch(
       }
     }
   },
-    {
-      immediate: true
-    }
-  ,
-  )
+  {
+    immediate: true,
+  },
+)
 
-    /** updates attachments array for autosave */
-    function updateModelValue(data: string | Record<string, any>[]) {
-      emits('update:modelValue', data)
-    }
+/** updates attachments array for autosave */
+function updateModelValue(data: string | Record<string, any>[]) {
+  emits('update:modelValue', data)
+}
 
-    /** Close modal on escape press, disable dropzone as well */
-    onKeyDown('Escape', () => {
-      modalVisible.value = false
-      isOverDropZone.value = false
-    })
-
-    /** sync storedFiles state with row state */
-    watch(
-      () => storedFiles.value.length || 0,
-      () => {
-        rowState.value[column.value!.title!] = storedFiles.value
-      },
-    )
-
-    useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
-      if (e.key === 'Enter' && !isReadonly.value) {
-        e.stopPropagation()
-        modalVisible.value = true
-      }
-    })
+/** Close modal on escape press, disable dropzone as well */
+onKeyDown('Escape', () => {
+  modalVisible.value = false
+  isOverDropZone.value = false
+})
+
+/** sync storedFiles state with row state */
+watch(
+  () => storedFiles.value.length || 0,
+  () => {
+    rowState.value[column.value!.title!] = storedFiles.value
+  },
+)
+
+useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e) => {
+  if (e.key === 'Enter' && !isReadonly.value) {
+    e.stopPropagation()
+    modalVisible.value = true
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 2b3d053318..1a8666e3d5 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -206,25 +206,25 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
           selected.row = 0
           selected.col = selected.col ?? 0
           scrollToCell?.()
-          editEnabled = false;
+          editEnabled = false
           return true
         case 'ArrowDown':
           selected.row = data.value.length - 1
           selected.col = selected.col ?? 0
           scrollToCell?.()
-          editEnabled = false;
+          editEnabled = false
           return true
         case 'ArrowRight':
           selected.row = selected.row ?? 0
           selected.col = fields.value?.length - 1
           scrollToCell?.()
-          editEnabled = false;
+          editEnabled = false
           return true
         case 'ArrowLeft':
           selected.row = selected.row ?? 0
           selected.col = 0
           scrollToCell?.()
-          editEnabled = false;
+          editEnabled = false
           return true
       }
     }
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 6006ca09a4..96bfdd80a0 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -1,6 +1,6 @@
 import type { MaybeRef } from '@vueuse/core'
 import { UITypes } from 'nocodb-sdk'
-import { message, reactive, unref, useCopy, useEventListener, useI18n, ref } from '#imports'
+import { message, reactive, ref, unref, useCopy, useEventListener, useI18n } from '#imports'
 
 interface SelectedBlock {
   row: number | null
@@ -227,60 +227,61 @@ export function useMultiSelect(
           editEnabled.value = false
         }
         break
-      default: {
-        const rowObj = unref(data)[selected.row]
+      default:
+        {
+          const rowObj = unref(data)[selected.row]
 
-        const columnObj = unref(fields)[selected.col]
+          const columnObj = unref(fields)[selected.col]
 
-        let cptext = '' // variable for save the text to be copy
+          let cptext = '' // variable for save the text to be copy
 
-        if (!isNaN(rangeRows.minRow) && !isNaN(rangeRows.maxRow) && !isNaN(rangeRows.minCol) && !isNaN(rangeRows.maxCol)) {
-          const cprows = unref(data).slice(rangeRows.minRow, rangeRows.maxRow + 1) // slice the selected rows for copy
+          if (!isNaN(rangeRows.minRow) && !isNaN(rangeRows.maxRow) && !isNaN(rangeRows.minCol) && !isNaN(rangeRows.maxCol)) {
+            const cprows = unref(data).slice(rangeRows.minRow, rangeRows.maxRow + 1) // slice the selected rows for copy
 
-          const cpcols = unref(fields).slice(rangeRows.minCol, rangeRows.maxCol + 1) // slice the selected cols for copy
+            const cpcols = unref(fields).slice(rangeRows.minCol, rangeRows.maxCol + 1) // slice the selected cols for copy
 
-          cprows.forEach((row) => {
-            cpcols.forEach((col) => {
-              // todo: JSON stringify the attachment cell and LTAR contents for copy
-              // filter attachment cells and LATR cells from copy
-              if (col.uidt !== UITypes.Attachment && col.uidt !== UITypes.LinkToAnotherRecord) {
-                cptext = `${cptext} ${row.row[col.title]} \t`
-              }
-            })
-
-            cptext = `${cptext.trim()}\n`
-          })
+            cprows.forEach((row) => {
+              cpcols.forEach((col) => {
+                // todo: JSON stringify the attachment cell and LTAR contents for copy
+                // filter attachment cells and LATR cells from copy
+                if (col.uidt !== UITypes.Attachment && col.uidt !== UITypes.LinkToAnotherRecord) {
+                  cptext = `${cptext} ${row.row[col.title]} \t`
+                }
+              })
 
-          cptext.trim()
-        } else {
-          cptext = rowObj.row[columnObj.title] || ''
-        }
+              cptext = `${cptext.trim()}\n`
+            })
 
-        if ((!unref(editEnabled) && e.metaKey) || e.ctrlKey) {
-          switch (e.keyCode) {
-            // copy - ctrl/cmd +c
-            case 67:
-              await copy(cptext)
-              break
+            cptext.trim()
+          } else {
+            cptext = rowObj.row[columnObj.title] || ''
           }
-        }
 
-        if (unref(editEnabled) || e.ctrlKey || e.altKey || e.metaKey) {
-          return
-        }
+          if ((!unref(editEnabled) && e.metaKey) || e.ctrlKey) {
+            switch (e.keyCode) {
+              // copy - ctrl/cmd +c
+              case 67:
+                await copy(cptext)
+                break
+            }
+          }
 
-        /** on letter key press make cell editable and empty */
-        if (e.key.length === 1) {
-          if (!unref(isPkAvail) && !rowObj.rowMeta.new) {
-            // Update not allowed for table which doesn't have primary Key
-            return message.info(t('msg.info.updateNotAllowedWithoutPK'))
+          if (unref(editEnabled) || e.ctrlKey || e.altKey || e.metaKey) {
+            return
           }
-          if (makeEditable(rowObj, columnObj)) {
-            rowObj.row[columnObj.title] = ''
+
+          /** on letter key press make cell editable and empty */
+          if (e.key.length === 1) {
+            if (!unref(isPkAvail) && !rowObj.rowMeta.new) {
+              // Update not allowed for table which doesn't have primary Key
+              return message.info(t('msg.info.updateNotAllowedWithoutPK'))
+            }
+            if (makeEditable(rowObj, columnObj)) {
+              rowObj.row[columnObj.title] = ''
+            }
+            // editEnabled = true
           }
-          // editEnabled = true
         }
-      }
         break
     }
   }

From 742a68deb06d0a624a6b259d4e18c13f38ea7832 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 12 Nov 2022 10:18:26 +0530
Subject: [PATCH 33/36] fix(gui): if expanded form is active skip grid view
 keyboard event actions

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue     | 14 ++++++++++++--
 .../components/smartsheet/expanded-form/index.vue  |  1 +
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 1a8666e3d5..7ce1602d06 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -181,6 +181,11 @@ const { selectCell, selectBlock, selectedRange, clearRangeRows, startSelectRange
       return true
     }
 
+    // if expanded form is active skip keyboard event handling
+    if (document.querySelector('.nc-drawer-expanded-form.active')) {
+      return true
+    }
+
     const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
     if (e.key === ' ') {
       if (selected.row !== null && !editEnabled) {
@@ -407,6 +412,11 @@ onClickOutside(smartTable, (e) => {
   )
     return
 
+  // if expanded form is active skip resetting the active cell
+  if (document.querySelector('.nc-drawer-expanded-form.active')) {
+    return
+  }
+
   selected.row = null
   selected.col = null
 })
@@ -457,8 +467,8 @@ const saveOrUpdateRecords = async (args: { metaValue?: TableType; viewMetaValue?
       currentRow.rowMeta.changed = false
       for (const field of (args.metaValue || meta.value)?.columns ?? []) {
         if (isVirtualCol(field)) continue
-        if (field.title! in currentRow.row && currentRow.row[field.title!] !== currentRow.oldRow[field.title!]) {
-          await updateOrSaveRow(currentRow, field.title!, {}, args)
+        if (currentRow.row[field.title!] !== currentRow.oldRow[field.title!]) {
+          await updateOrSaveRow(currentRow, field.title!, args)
         }
       }
     }
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 10e48615cf..8b862c0e50 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -137,6 +137,7 @@ export default {
     :body-style="{ 'padding': 0, 'display': 'flex', 'flex-direction': 'column' }"
     :closable="false"
     class="nc-drawer-expanded-form"
+    :class="{ 'active': isExpanded }"
   >
     <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />
 

From 2a7c90f064cc682332ae3c9400cf5060c00b4253 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 11 Nov 2022 12:04:50 +0530
Subject: [PATCH 34/36] refactor: delete confirmation modal width

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/composables/useTable.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/composables/useTable.ts b/packages/nc-gui/composables/useTable.ts
index a1799bc4dd..dbe2a05bad 100644
--- a/packages/nc-gui/composables/useTable.ts
+++ b/packages/nc-gui/composables/useTable.ts
@@ -79,6 +79,7 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void) {
       okText: t('general.yes'),
       okType: 'danger',
       cancelText: t('general.no'),
+      width: 450,
       async onOk() {
         try {
           const meta = (await getMeta(table.id as string, true)) as TableType

From 6f60d1236448057504e8ea8db843bd15b6dcf5f8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 14 Nov 2022 18:28:52 +0530
Subject: [PATCH 35/36] test(cypress): select cell if not active

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/Dashboard/common/Cell/SelectOptionCell.ts      | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
index 8c1566717e..7837a313c1 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
@@ -25,7 +25,14 @@ export class SelectOptionCellPageObject extends BasePage {
     option: string;
     multiSelect?: boolean;
   }) {
-    await this.get({ index, columnHeader }).click();
+    const selectCell = this.get({ index, columnHeader });
+
+    // check if cell active
+    if (!(await selectCell.getAttribute('class')).includes('active')) {
+      await selectCell.click();
+    }
+
+    await selectCell.click();
 
     await this.rootPage.getByTestId(`select-option-${columnHeader}-${index}`).getByText(option).click();
 

From 3daf8c3eb48ba88118caa2b7ec3a103c9769efb8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 16 Nov 2022 18:57:00 +0530
Subject: [PATCH 36/36] test(playwright): make cell active if not in active
 state

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/Dashboard/common/Cell/SelectOptionCell.ts        | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
index 7837a313c1..bdd4adc18d 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
@@ -95,6 +95,13 @@ export class SelectOptionCellPageObject extends BasePage {
   }
 
   async verifyOptions({ index, columnHeader, options }: { index: number; columnHeader: string; options: string[] }) {
+    const selectCell = this.get({ index, columnHeader });
+
+    // check if cell active
+    if (!(await selectCell.getAttribute('class')).includes('active')) {
+      await selectCell.click();
+    }
+
     await this.get({ index, columnHeader }).click();
 
     let counter = 0;