feat(fe): Add form field navigation - Enter key moves to next field

- Create useFormFieldNavigation composable for Tab-like Enter behavior
- KsTextField: Enter -> next field
- KsTextArea: Ctrl+Enter for newline, Enter -> next field
- KsSelect: Enter -> next field after selection
- Implements standard form navigation pattern across input components
This commit is contained in:
2026-08-16 21:50:50 +09:00
parent 5213ea142b
commit b12fc7411d
25 changed files with 1105 additions and 85 deletions
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useFormFieldNavigation } from '../composables/useFormFieldNavigation'
export interface KsTextAreaProps {
modelValue: string
@@ -36,6 +37,7 @@ const emit = defineEmits<{
const isFocused = ref(false)
const id = computed(() => props.inputId || `textarea-${Math.random().toString(36).substr(2, 9)}`)
const { inputRef, handleKeyDown } = useFormFieldNavigation()
const containerClass = computed(() => [
'ks-textarea',
@@ -65,6 +67,10 @@ const handleInput = (event: Event) => {
emit('update:modelValue', target.value)
emit('input', event)
}
const handleKeyPress = (event: KeyboardEvent) => {
handleKeyDown(event, true)
}
</script>
<template>
@@ -78,6 +84,7 @@ const handleInput = (event: Event) => {
<!-- Textarea container -->
<div class="ks-textarea__container">
<textarea
ref="inputRef"
:id="id"
:value="modelValue"
:placeholder="placeholder"
@@ -93,6 +100,7 @@ const handleInput = (event: Event) => {
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"
@keydown="handleKeyPress"
/>
</div>