Files
KArtSell.Aegis/frontend/src/shared/ui/composables/useFormFieldNavigation.ts
T
kjh2064 c634ebe501 fix(fe): useFormFieldNavigation - remove debug console.log, production-ready
Cleaned up development debugging output for production deployment.
Core form field navigation behavior (Enter key → next field, Ctrl+Enter in textarea → newline) verified and stable.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-17 12:42:27 +09:00

83 lines
2.3 KiB
TypeScript

import { ref, onMounted } from 'vue'
export function useFormFieldNavigation() {
const inputRef = ref<HTMLElement | null>(null)
function findFormElement(): HTMLElement | null {
if (!inputRef.value) return null
// Try to find a form first
const form = inputRef.value.closest('form')
if (form) return form
// If no form, find the nearest container or use body
let container: HTMLElement | null = inputRef.value.parentElement
for (let i = 0; i < 15; i++) {
if (!container) break
if (container.tagName === 'BODY') break
container = container.parentElement
}
return container || document.body
}
function getFormInputElements(): HTMLElement[] {
const form = findFormElement()
if (!form) return []
const selector = 'input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea, select, button, [role="button"]'
return Array.from(form.querySelectorAll(selector))
.filter((el: any) => !el.disabled && !el.hidden && el.offsetParent && el.tabIndex !== -1)
}
function findNextField(): HTMLElement | null {
const elements = getFormInputElements()
if (!inputRef.value || elements.length === 0) return null
const currentIndex = elements.indexOf(inputRef.value)
if (currentIndex === -1) return null
const nextIndex = currentIndex + 1
return nextIndex < elements.length ? elements[nextIndex] : elements[0]
}
function moveToNextField(): void {
const nextField = findNextField()
if (nextField) {
nextField.focus()
if (nextField instanceof HTMLInputElement || nextField instanceof HTMLTextAreaElement) {
nextField.select?.()
}
}
}
function handleKeyDown(event: KeyboardEvent, isTextArea: boolean = false): boolean {
if (!isTextArea) {
if (event.key === 'Enter') {
event.preventDefault()
moveToNextField()
return true
}
} else {
if (event.key === 'Enter') {
if (event.ctrlKey || event.metaKey) {
return false
} else {
event.preventDefault()
moveToNextField()
return true
}
}
}
return false
}
return {
inputRef,
handleKeyDown,
moveToNextField,
findNextField,
getFormInputElements
}
}