네이버 검색처럼 주식 종목 선택할 때 방향키로 선택할 수 있게 만들기

[bigtae1007]

onKeyDown을 이용해서 방향키로 움직일 수 있게 만들었는데, 처음에 2번 입력되는 이슈가 발생

[bigtae1007]

onKeyDown: keycode 값 - 한/영, Shift, Backsapce 등 인식 가능
onKeyPress: ASCII 값 - 한/영, Shift, Backsapce 등 인식 불가

keyDown을 keyPress로 변경하면 해결가능하다는 검색결과가 있었다.
keyDown은 한글 조합이 있어서 두 번 실행된다고 한다.
테스트 해보니 keyDown으로 동작했을 때 숫자나 영문은 한 번만 실행되지만 한글은 두 번 실행되는 걸 파악했다.

---

결과
방향키를 인식하지 않아 실패...... 다른 방법을 알아보자

[bigtae1007]

e.nativeEvent.isComposing 를 조건에 추가하여 작성

e.nativeEvent.isComposing는 조합문자일 때는(한글) true 일반 문자일 때는 false를 나타낸다.
콘솔로 확인해보니 영문이나 숫자는 계속 false를 반환하는 반면에 문자는 조합이 계속되고 있다고 판단하여 ( 사실 완성됐다는 판단을 할 수 없다) 계속 true를 반환
한글로 작성 후 방향 키를 누르면 true , false 각각 한 번씩 반환되더라....
따라서 조건에 e.nativeEvent.isComposing이 false일 때에 명령을 실행하도록하여 true인 상태의 명령을 무효화시켜 해결했다.

[bigtae1007]

또 다른 문제....

목록에서는 스크롤로 하단 내용을 조회할 수 있는데 키보드로 옮겨갈 수는 있지만, 인덱스 번호를 비교하여 동작하기 때문에 자동으로 스크롤 하지 않아 화면을 벗어난다.

[bigtae1007]

.scrollIntoView(<옵션>)

이걸 사용해서 해결
ref와 인덱스를 통해 지금 선택하려는 요소에 접근하여 해당 요소가 가려지는 타이밍에 요소까지 스크롤하는 코드로 계속 위로 올렸다