feat(fe): Apply form field navigation to all input components
- 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:
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useFormFieldNavigation } from '../composables/useFormFieldNavigation'
|
||||
|
||||
export interface KsNumberFieldProps {
|
||||
modelValue: number | null
|
||||
@@ -84,6 +85,12 @@ const handleBlur = (event: FocusEvent) => {
|
||||
emit('blur', event)
|
||||
}
|
||||
|
||||
const { inputRef, handleKeyDown } = useFormFieldNavigation()
|
||||
|
||||
const handleKeyPress = (event: KeyboardEvent) => {
|
||||
handleKeyDown(event, false)
|
||||
}
|
||||
|
||||
const increment = () => {
|
||||
const newValue = (props.modelValue ?? 0) + (props.step ?? 1)
|
||||
if (!props.max || newValue <= props.max) {
|
||||
@@ -124,6 +131,7 @@ const decrement = () => {
|
||||
|
||||
<!-- Input -->
|
||||
<input
|
||||
ref="inputRef"
|
||||
:id="id"
|
||||
type="number"
|
||||
:value="modelValue ?? ''"
|
||||
@@ -140,6 +148,7 @@ const decrement = () => {
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@keydown="handleKeyPress"
|
||||
/>
|
||||
|
||||
<!-- Increment button -->
|
||||
|
||||
Reference in New Issue
Block a user