From 9e2d2010ba031e624bef2e18e8523ca823773f2c Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 16 Aug 2026 21:58:04 +0900
Subject: [PATCH] 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)
---
 frontend/src/shared/ui/components/KsMoneyField.vue  | 9 +++++++++
 frontend/src/shared/ui/components/KsMultiSelect.vue | 7 +++++++
 frontend/src/shared/ui/components/KsNumberField.vue | 9 +++++++++
 3 files changed, 25 insertions(+)

diff --git a/frontend/src/shared/ui/components/KsMoneyField.vue b/frontend/src/shared/ui/components/KsMoneyField.vue
index 66405229..be1c0e8f 100644
--- a/frontend/src/shared/ui/components/KsMoneyField.vue
+++ b/frontend/src/shared/ui/components/KsMoneyField.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useFormFieldNavigation } from '../composables/useFormFieldNavigation'
 
 export interface KsMoneyFieldProps {
   modelValue: number | null
@@ -81,6 +82,12 @@ const handleBlur = (event: FocusEvent) => {
   isFocused.value = false
   emit('blur', event)
 }
+
+const { inputRef, handleKeyDown } = useFormFieldNavigation()
+
+const handleKeyPress = (event: KeyboardEvent) => {
+  handleKeyDown(event, false)
+}
 </script>
 
 <template>
@@ -100,6 +107,7 @@ const handleBlur = (event: FocusEvent) => {
 
       <!-- Input -->
       <input
+        ref="inputRef"
         :id="id"
         type="number"
         :value="modelValue ?? ''"
@@ -115,6 +123,7 @@ const handleBlur = (event: FocusEvent) => {
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
+        @keydown="handleKeyPress"
       />
 
       <!-- Currency suffix -->
diff --git a/frontend/src/shared/ui/components/KsMultiSelect.vue b/frontend/src/shared/ui/components/KsMultiSelect.vue
index f76d850a..0148b6a8 100644
--- a/frontend/src/shared/ui/components/KsMultiSelect.vue
+++ b/frontend/src/shared/ui/components/KsMultiSelect.vue
@@ -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"
diff --git a/frontend/src/shared/ui/components/KsNumberField.vue b/frontend/src/shared/ui/components/KsNumberField.vue
index 5c2ac107..bc3474c4 100644
--- a/frontend/src/shared/ui/components/KsNumberField.vue
+++ b/frontend/src/shared/ui/components/KsNumberField.vue
@@ -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 -->