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