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 SelectOption {
|
||||
label: string
|
||||
@@ -100,9 +101,14 @@ const handleClick = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const { inputRef, moveToNextField } = useFormFieldNavigation()
|
||||
|
||||
const handleKeydown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
isOpen.value = false
|
||||
} else if (event.key === 'Enter' && !isOpen.value) {
|
||||
event.preventDefault()
|
||||
moveToNextField()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -118,6 +124,7 @@ const handleKeydown = (event: KeyboardEvent) => {
|
||||
<!-- Button -->
|
||||
<div class="ks-multi-select__container">
|
||||
<button
|
||||
ref="inputRef"
|
||||
:id="id"
|
||||
type="button"
|
||||
class="ks-multi-select__button"
|
||||
|
||||
Reference in New Issue
Block a user