[FE] 맥북에서 키워드 마지막 글자 입력되는 오류 해결(#774)

[github-actions]

📓 스토리북 링크

바로가기

📌 관련 이슈

• closed : [FE] 맥북에서 키워드 마지막 글자 입력되는 오류 해결 #774

✨ PR 세부 내용

❗ 맥북 사용자는 local+chrome 환경에서 꼭 확인해주세요!

🔥 원인

KeyboardEvent.isComposing은 입력한 문자가 조합문자인지 아닌지를 판단합니다. 한글은 자음과 모음의 조합으로 한 음절이 만들어지기 때문에 조합문자이고, 영어는 조합문자가 아닙니다.

한글을 입력할 때 자세히 보면 입력 중인 글자 바로 아래에 검은 밑줄이 생기는 경우가 있는데, 이 밑줄이 보이는 상황에서 Enter키를 입력하면 이벤트가 2번 발생하는 이슈가 있습니다. onKeyDown 이벤트를 걸었을 때 우리가 키를 누르고 떼는 순간까지의 시간 동안에 이벤트가 발생하고 진행되는데, 그 시간 동안에 음절이 완성되면 다시 이벤트가 호출될 수 있기 때문입니다.

🔥 해결 방법

영어는 onKeyDown 이벤트가 한 번 발생하고 조합 글자가 아니기 때문에 항상 isComposing 값이 false입니다.

한글은 조합 중인 글자, 즉 밑줄이 있는 글자를 탈출할 때 이벤트가 두 번 발생합니다. 음절이 완성되었기 때문인데요. 방향키, ESC, Space Bar, Enter 키 등을 눌렀을 때를 말합니다.
처음 이벤트에서는 조합 글자였기 때문에 isComposing 값이 true이고, 위 키들 때문에 음절이 완성되어 발생한 두 번째 이벤트에서는 조합을 탈출했기 때문에 isComposing 값이 false로 바뀝니다.

이것을 활용하여 isComposing이 false일 때만 키워드를 배열에 추가하면 됩니다. 따라서 코드를 아래와 같이 수정하였습니다.

      if (e.nativeEvent.isComposing === false) {
        onKeywordsChange([...currentKeywords, trimmedKeyword]);
        setKeyword("");
      }

[00kang]

오 덕분에 새로운 거 알아갑니다!! 👍
어떻게 알아낸 건지 해결과정도 궁금하네요 :>

수고하셨습니다~

[chlwlstlf]

👍 어떻게 알아낸 건지 해결과정도 궁금하네요 :>

노션 기술 블로그에 적어놓았습니다ㅎㅎㅎ (입력 폼 변천기가 제목이었는데 키워드 트러블 슈팅 내용이 절반 이상이 되어버린..)

[pp449]

이걸로 또 하나 배워가네요 ㅎㅎ 😄