fix(fe): KsTextField - simplify Enter navigation, remove composable dependency
deploy / deploy (push) Failing after 46s
deploy / notify (push) Successful in 0s

This commit is contained in:
2026-08-16 22:17:26 +09:00
parent 9e2d2010ba
commit aa7a92a66b
@@ -1,7 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { useFieldLayout } from '../contracts/layoutContext' import { useFieldLayout } from '../contracts/layoutContext'
import { useFormFieldNavigation } from '../composables/useFormFieldNavigation'
export interface KsTextFieldProps { export interface KsTextFieldProps {
modelValue: string modelValue: string
@@ -40,7 +39,7 @@ const emit = defineEmits<{
const isFocused = ref(false) const isFocused = ref(false)
const id = computed(() => props.inputId || `input-${Math.random().toString(36).substr(2, 9)}`) const id = computed(() => props.inputId || `input-${Math.random().toString(36).substr(2, 9)}`)
const { isInline } = useFieldLayout(props.inline) const { isInline } = useFieldLayout(props.inline)
const { inputRef, handleKeyDown } = useFormFieldNavigation() const inputRef = ref<HTMLInputElement | null>(null)
const containerClass = computed(() => [ const containerClass = computed(() => [
'ks-text-field', 'ks-text-field',
@@ -73,8 +72,35 @@ const handleInput = (event: Event) => {
emit('input', event) emit('input', event)
} }
const handleKeyPress = (event: KeyboardEvent) => { const moveToNextInput = () => {
handleKeyDown(event, false) if (!inputRef.value) return
// 현재 요소의 최상위 컨테이너 찾기
let container: HTMLElement | null = inputRef.value.parentElement
for (let i = 0; i < 15; i++) {
if (!container) break
if (container.tagName === 'FORM' || container.tagName === 'BODY') break
container = container.parentElement
}
if (!container) container = document.body
// 모든 입력 가능한 요소 찾기
const selector = 'input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea, select'
const inputs = Array.from(container.querySelectorAll(selector)) as HTMLElement[]
const focusable = inputs.filter((el: any) => !el.disabled && !el.readonly && el.offsetParent)
// 현재 요소의 인덱스 찾기
const idx = focusable.indexOf(inputRef.value)
if (idx < 0) return
// 다음 요소가 있으면 포커스
if (idx < focusable.length - 1) {
const next = focusable[idx + 1]
next.focus()
if (next instanceof HTMLInputElement || next instanceof HTMLTextAreaElement) {
next.select?.()
}
}
} }
</script> </script>
@@ -107,7 +133,7 @@ const handleKeyPress = (event: KeyboardEvent) => {
@input="handleInput" @input="handleInput"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@keydown="handleKeyPress" @keydown.enter.prevent="moveToNextInput"
/> />
</div> </div>