fix(fe): KsTextField - simplify Enter navigation, remove composable dependency
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user