SamProject/sam-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:계정과목 키보드 네비게이션 개선 - 화살표 키로 순환 선택

Browse Source
This commit is contained in:
김보곤
2026-02-03 10:16:43 +09:00
parent 38d123eb96
commit e5073085f7
1 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
resources/views/barobill/eaccount/index.blade.php
View File

@@ -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);
}
};