Browse Source

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>
pull/4448/head
Pranav C 2 years ago
parent
commit
3b3d842ba1
  1. 7
      packages/nc-gui/components/cell/Percent.vue
  2. 1
      packages/nc-gui/components/smartsheet/Cell.vue
  3. 3
      packages/nc-gui/components/smartsheet/Grid.vue

7
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

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

3
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
}

Loading…
Cancel
Save