From 3b3d842ba1bc953e9e77504ebd6ab066bfdcc276 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 21 Nov 2022 22:15:29 +0530
Subject: [PATCH] fix: focus percentage input on enter key press and on enter
 key press save and navigate to next row

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui/components/cell/Percent.vue    | 7 +++++++
 packages/nc-gui/components/smartsheet/Cell.vue | 1 -
 packages/nc-gui/components/smartsheet/Grid.vue | 3 +--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/Percent.vue b/packages/nc-gui/components/cell/Percent.vue
index 04bbfe2dcf..9ce099db23 100644
--- a/packages/nc-gui/components/cell/Percent.vue
+++ b/packages/nc-gui/components/cell/Percent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { EditModeInj, inject, useVModel } from '#imports'
+import { VNodeRef } from '@vue/runtime-core'
 
 interface Props {
   modelValue?: number | string | null
@@ -12,15 +13,21 @@ const emits = defineEmits(['update:modelValue'])
 const editEnabled = inject(EditModeInj)
 
 const vModel = useVModel(props, 'modelValue', emits)
+
+const focus: VNodeRef = (el) => {
+  ;(el as HTMLInputElement)?.focus()
+}
 </script>
 
 <template>
   <input
+    :ref="focus"
     v-if="editEnabled"
     v-model="vModel"
     class="w-full !border-none text-base"
     :class="{ '!px-2': editEnabled }"
     type="number"
+    @blur="editEnabled = false"
     @keydown.down.stop
     @keydown.left.stop
     @keydown.right.stop
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 92eb352933..95f3c682e4 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -111,7 +111,6 @@ const vModel = computed({
 })
 
 const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
-  console.log('syncAndNavigate', e.target)
   if (isJSON(column.value)) return
 
   if (currentRow.value.rowMeta.changed || currentRow.value.rowMeta.new) {
diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 5dd1569e1c..cab806d55d 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -423,6 +423,7 @@ onClickOutside(smartTable, (e) => {
 
 const onNavigate = (dir: NavigateDir) => {
   if (selected.row === null || selected.col === null) return
+  editEnabled = false
   switch (dir) {
     case NavigateDir.NEXT:
       if (selected.row < data.value.length - 1) {
@@ -435,8 +436,6 @@ const onNavigate = (dir: NavigateDir) => {
     case NavigateDir.PREV:
       if (selected.row > 0) {
         selected.row--
-      } else {
-        editEnabled = false
       }
       break
   }