[오삽완] input에서 위쪽 화살표 키를 눌렀을 때, 커서(캐럿)가 맨 앞으로 움직이는 경우

🔍 삽질

검색어 드롭다운을 구현하는 중에 위쪽 화살표 키보드를 눌렀을 때, 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();
		/* ... */
	}
	/* ... */
}

커서가 움직이지 않고 고정되었다.