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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user