diff --git a/resources/views/barobill/eaccount/index.blade.php b/resources/views/barobill/eaccount/index.blade.php index 138b83b5..40f6deed 100644 --- a/resources/views/barobill/eaccount/index.blade.php +++ b/resources/views/barobill/eaccount/index.blade.php @@ -159,7 +159,7 @@ className={`px-2.5 py-1 rounded text-xs font-medium transition-colors ${ const AccountCodeSelect = ({ value, onChange, accountCodes }) => { const [isOpen, setIsOpen] = useState(false); const [search, setSearch] = useState(''); - const [highlightIndex, setHighlightIndex] = useState(0); + const [highlightIndex, setHighlightIndex] = useState(-1); const containerRef = useRef(null); const listRef = useRef(null); @@ -177,7 +177,7 @@ className={`px-2.5 py-1 rounded text-xs font-medium transition-colors ${ // 검색어 변경 시 하이라이트 초기화 useEffect(() => { - setHighlightIndex(0); + setHighlightIndex(-1); }, [search]); // 외부 클릭 시 닫기 @@ -186,7 +186,7 @@ className={`px-2.5 py-1 rounded text-xs font-medium transition-colors ${ if (containerRef.current && !containerRef.current.contains(e.target)) { setIsOpen(false); setSearch(''); - setHighlightIndex(0); + setHighlightIndex(-1); } }; document.addEventListener('mousedown', handleClickOutside); @@ -198,14 +198,14 @@ className={`px-2.5 py-1 rounded text-xs font-medium transition-colors ${ onChange(code.code, selected?.name || ''); setIsOpen(false); setSearch(''); - setHighlightIndex(0); + setHighlightIndex(-1); }; const handleClear = (e) => { e.stopPropagation(); onChange('', ''); setSearch(''); - setHighlightIndex(0); + setHighlightIndex(-1); }; // 키보드 네비게이션 @@ -214,26 +214,31 @@ className={`px-2.5 py-1 rounded text-xs font-medium transition-colors ${ if (e.key === 'ArrowDown') { e.preventDefault(); - setHighlightIndex(prev => Math.min(prev + 1, maxIndex)); + const newIndex = highlightIndex < maxIndex ? highlightIndex + 1 : 0; + setHighlightIndex(newIndex); // 스크롤 따라가기 - if (listRef.current) { - const item = listRef.current.children[Math.min(highlightIndex + 1, maxIndex)]; - item?.scrollIntoView({ block: 'nearest' }); - } + setTimeout(() => { + if (listRef.current && listRef.current.children[newIndex]) { + listRef.current.children[newIndex].scrollIntoView({ block: 'nearest' }); + } + }, 0); } else if (e.key === 'ArrowUp') { e.preventDefault(); - setHighlightIndex(prev => Math.max(prev - 1, 0)); - if (listRef.current) { - const item = listRef.current.children[Math.max(highlightIndex - 1, 0)]; - item?.scrollIntoView({ block: 'nearest' }); - } + const newIndex = highlightIndex > 0 ? highlightIndex - 1 : maxIndex; + setHighlightIndex(newIndex); + setTimeout(() => { + if (listRef.current && listRef.current.children[newIndex]) { + listRef.current.children[newIndex].scrollIntoView({ block: 'nearest' }); + } + }, 0); } else if (e.key === 'Enter' && filteredCodes.length > 0) { e.preventDefault(); - handleSelect(filteredCodes[highlightIndex]); + const selectIndex = highlightIndex >= 0 ? highlightIndex : 0; + handleSelect(filteredCodes[selectIndex]); } else if (e.key === 'Escape') { setIsOpen(false); setSearch(''); - setHighlightIndex(0); + setHighlightIndex(-1); } };