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

@@ -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

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) {

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
   }