feat(fe): Apply form field navigation to all input components
deploy / deploy (push) Failing after 48s
deploy / notify (push) Successful in 1s

- KsNumberField: Enter -> next field
- KsMoneyField: Enter -> next field
- KsMultiSelect: Enter (when closed) -> next field
- Complete Tab-like Enter key behavior across all form inputs
- Enables seamless form navigation with Enter key (matching grid behavior)
This commit is contained in:
2026-08-16 21:58:04 +09:00
parent b12fc7411d
commit 9e2d2010ba
3 changed files with 25 additions and 0 deletions
@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { useFormFieldNavigation } from '../composables/useFormFieldNavigation'
export interface KsMoneyFieldProps { export interface KsMoneyFieldProps {
modelValue: number | null modelValue: number | null
@@ -81,6 +82,12 @@ const handleBlur = (event: FocusEvent) => {
isFocused.value = false isFocused.value = false
emit('blur', event) emit('blur', event)
} }
const { inputRef, handleKeyDown } = useFormFieldNavigation()
const handleKeyPress = (event: KeyboardEvent) => {
handleKeyDown(event, false)
}
</script> </script>
<template> <template>
@@ -100,6 +107,7 @@ const handleBlur = (event: FocusEvent) => {
<!-- Input --> <!-- Input -->
<input <input
ref="inputRef"
:id="id" :id="id"
type="number" type="number"
:value="modelValue ?? ''" :value="modelValue ?? ''"
@@ -115,6 +123,7 @@ const handleBlur = (event: FocusEvent) => {
@input="handleInput" @input="handleInput"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@keydown="handleKeyPress"
/> />
<!-- Currency suffix --> <!-- Currency suffix -->
@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { useFormFieldNavigation } from '../composables/useFormFieldNavigation'
export interface SelectOption { export interface SelectOption {
label: string label: string
@@ -100,9 +101,14 @@ const handleClick = () => {
} }
} }
const { inputRef, moveToNextField } = useFormFieldNavigation()
const handleKeydown = (event: KeyboardEvent) => { const handleKeydown = (event: KeyboardEvent) => {
if (event.key === 'Escape') { if (event.key === 'Escape') {
isOpen.value = false isOpen.value = false
} else if (event.key === 'Enter' && !isOpen.value) {
event.preventDefault()
moveToNextField()
} }
} }
</script> </script>
@@ -118,6 +124,7 @@ const handleKeydown = (event: KeyboardEvent) => {
<!-- Button --> <!-- Button -->
<div class="ks-multi-select__container"> <div class="ks-multi-select__container">
<button <button
ref="inputRef"
:id="id" :id="id"
type="button" type="button"
class="ks-multi-select__button" class="ks-multi-select__button"
@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { useFormFieldNavigation } from '../composables/useFormFieldNavigation'
export interface KsNumberFieldProps { export interface KsNumberFieldProps {
modelValue: number | null modelValue: number | null
@@ -84,6 +85,12 @@ const handleBlur = (event: FocusEvent) => {
emit('blur', event) emit('blur', event)
} }
const { inputRef, handleKeyDown } = useFormFieldNavigation()
const handleKeyPress = (event: KeyboardEvent) => {
handleKeyDown(event, false)
}
const increment = () => { const increment = () => {
const newValue = (props.modelValue ?? 0) + (props.step ?? 1) const newValue = (props.modelValue ?? 0) + (props.step ?? 1)
if (!props.max || newValue <= props.max) { if (!props.max || newValue <= props.max) {
@@ -124,6 +131,7 @@ const decrement = () => {
<!-- Input --> <!-- Input -->
<input <input
ref="inputRef"
:id="id" :id="id"
type="number" type="number"
:value="modelValue ?? ''" :value="modelValue ?? ''"
@@ -140,6 +148,7 @@ const decrement = () => {
@input="handleInput" @input="handleInput"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@keydown="handleKeyPress"
/> />
<!-- Increment button --> <!-- Increment button -->