제안 목록의 키보드 탐색

키보드 처리기를 onKeyPress(더 이상 사용되지 않음)나 onKeyUp이 아니라 입력 요소의 onKeyDown 이벤트에 연결하십시오. keyDown은 문자가 입력에 나타나기 전에 실행되므로 기본 브라우저 동작이 적용되기 전에 ArrowDown, ArrowUp, 엔터, 이스케이프를 가로챌 수 있습니다.

사용자가 ArrowDown을 누르면 selectedIndex를 1 증가시키되, 최댓값을 suggestions.length - 1로 제한하십시오: setSelectedIndex(prev => Math.min(prev + 1, suggestions.length - 1)). 또한 e.preventDefault()를 호출하여 입력 텍스트의 커서가 끝으로 이동하지 않게 하십시오. 텍스트 입력에서 ArrowDown을 눌렀을 때 커서가 끝으로 이동하는 것이 기본 브라우저 동작이기 때문입니다.

사용자가 ArrowUp을 누르면 selectedIndex를 1 감소시키되, 최솟값을 0으로 제한하십시오: setSelectedIndex(prev => Math.max(prev - 1, 0)). 또는 인덱스 0보다 위로 이동할 때 -1(선택 항목 없음)까지 제한하여 사용자가 선택을 해제하고 자유롭게 입력하도록 할 수도 있습니다.

엔터를 눌렀을 때 selectedIndex >= 0이면 강조 표시된 제안 항목을 선택하십시오. inputValue를 suggestions[selectedIndex]로 설정하고, 드롭다운을 닫은 다음 selectedIndex를 -1로 재설정합니다. 강조 표시된 제안 항목이 없으면(selectedIndex가 -1이면) 일반적인 양식 제출 또는 검색 동작이 진행되도록 두십시오.

이스케이프를 누르면 isOpen을 false로 설정하여 드롭다운을 닫고 selectedIndex를 -1로 재설정하십시오. 입력 값은 지우지 마십시오. 사용자는 제안 항목을 선택하지 않고 닫기만 원하며, 추가로 편집할 수 있도록 입력한 텍스트를 유지하려는 것입니다.

탭을 누르면 브라우저가 어차피 다음 포커스 가능 요소로 포커스를 이동하므로 드롭다운을 닫으십시오. 탭을 눌렀을 때 isOpen을 false로 설정하면 포커스가 입력을 떠난 후에도 드롭다운이 열린 상태로 남지 않습니다. preventDefault()를 호출할 필요는 없습니다. 브라우저가 기본 탭 순서를 처리하도록 두십시오.

강조 표시된 제안 항목은 시각적으로 구분되어야 합니다. selectedIndex에 해당하는 제안 항목에 활성 스타일을 적용하십시오: className={index === selectedIndex ? 'suggestion suggestion--active' : 'suggestion'}. 활성 상태에는 일반적으로 배경색 변경을 사용하여 엔터를 눌렀을 때 어떤 항목이 선택될지 명확하게 표시합니다.

제안 목록에 최대 높이가 설정되어 스크롤되는 경우 키보드로 탐색하는 동안 강조 표시된 항목이 화면 밖으로 스크롤될 수 있습니다. 참조 배열에 제안 항목의 DOM 요소를 저장하고 selectedIndex가 변경될 때마다 listItemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' })를 호출하십시오. nearest 블록 값은 스크롤 양을 최소화합니다.

입력이 변경되어 새로 필터링된 목록이 나타나면 같은 상태 업데이트에서 selectedIndex를 -1로 재설정하거나, 제안 항목에 의존하는 useEffect에서 재설정하십시오. 제거된 항목을 가리키는 오래된 인덱스가 남아 있으면 사용자가 잘못된 제안 항목을 선택하게 됩니다.

전체 사용자 흐름은 다음과 같습니다. 사용자가 입력하여 필터링하고, ArrowDown으로 첫 번째 항목을 강조하며, ArrowDown을 더 눌러 목록을 이동하고, ArrowUp으로 위로 돌아가며, 엔터로 강조된 항목을 선택하고, 이스케이프로 선택하지 않은 채 닫습니다. 이는 사용자가 자동 완성 필드에서 기대하는 모든 표준 키보드 상호작용 방식을 다룹니다.

텍스트 입력 안에서 ArrowDown과 ArrowUp을 처리할 때는 항상 e.preventDefault()를 호출하십시오. 그렇지 않으면 ArrowDown은 텍스트 커서를 끝으로 이동시키고 ArrowUp은 커서를 처음으로 이동시킵니다. 이러한 커서 이동은 선택 인덱스를 사용한 탐색과 충돌하여 혼란스러운 동작을 만들 수 있습니다.

사용자가 selectedIndex = 2에서 제안 항목이 강조된 상태로 엔터를 누르면 어떻게 됩니까?

입력 요소에서 onKeyDown을 처리합니다. ArrowDown은 selectedIndex를 최댓값으로 제한하면서 증가시키고, ArrowUp은 0 또는 -1로 제한하면서 감소시킵니다. Enter 키는 강조된 항목을 선택하고, Escape 키는 선택하지 않고 닫으며, Tab 키는 닫은 뒤 브라우저가 포커스를 이동하도록 합니다. 화살표 키에서는 항상 preventDefault를 호출하고 강조된 항목이 보이도록 스크롤합니다.