검색어 드롭다운을 구현하는 중에 위쪽 화살표 키보드를 눌렀을 때, input의 커서(캐럿)가 글자의 앞으로 옮겨지는 이슈가 있었다.
그래서 커서가 옮겨지는 것을 막기 위해 event.preventDefault()
를 호출해줬는데 여전히 먹히지 않는 상황이었다.
// input 태그 부분
<input
type="text"
value={inputValue}
onChange={handleInputChange}
ref={inputEl}
onKeyUp={handleKeyUp}
/>
// 키보드 이벤트 핸들러
const handleKeyUp = (event) => {
if(event.key === 'ArrowUp') {
event.preventDefault();
/* ... */
}
/* ... */
}
keyUp 이벤트가 아닌 keyDown
이벤트 발생 시 동작하도록 변경해서 해결했다.
(구글에 Why event.preventDefault is not working on keyup event? 라고 검색했을 때 힌트를 얻을 수 있었는데,)
keyUp 이벤트의 default 이벤트가 이미 발생한 다음 preventDefault 메서드가 호출되기 때문에 keyUp 이벤트는 preventDefault 메서드가 먹히지 않는다.
그래서 keyUp 이벤트를 모두 keyDown으로 바꿔준 후 실행했더니
// input 태그 부분
<input
type="text"
value={inputValue}
onChange={handleInputChange}
ref={inputEl}
onKeyDown={handleKeyDown}
/>
// 키보드 이벤트 핸들러
const handleKeyDown = (event) => {
if(event.key === 'ArrowUp') {
event.preventDefault();
/* ... */
}
/* ... */
}
커서가 움직이지 않고 고정되었다.