fix(fe): KsTextField - simplify Enter navigation, remove composable dependency
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useFieldLayout } from '../contracts/layoutContext'
|
||||
import { useFormFieldNavigation } from '../composables/useFormFieldNavigation'
|
||||
|
||||
export interface KsTextFieldProps {
|
||||
modelValue: string
|
||||
@@ -40,7 +39,7 @@ const emit = defineEmits<{
|
||||
const isFocused = ref(false)
|
||||
const id = computed(() => props.inputId || `input-${Math.random().toString(36).substr(2, 9)}`)
|
||||
const { isInline } = useFieldLayout(props.inline)
|
||||
const { inputRef, handleKeyDown } = useFormFieldNavigation()
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const containerClass = computed(() => [
|
||||
'ks-text-field',
|
||||
@@ -73,8 +72,35 @@ const handleInput = (event: Event) => {
|
||||
emit('input', event)
|
||||
}
|
||||
|
||||
const handleKeyPress = (event: KeyboardEvent) => {
|
||||
handleKeyDown(event, false)
|
||||
const moveToNextInput = () => {
|
||||
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>
|
||||
|
||||
@@ -107,7 +133,7 @@ const handleKeyPress = (event: KeyboardEvent) => {
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@keydown="handleKeyPress"
|
||||
@keydown.enter.prevent="moveToNextInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user