Enter 키 입력 시 한글이 두 번 제출되는 문제 해결하기

문제 상황

textarea 요소에 입력을 하고 enter 키를 누를때 한 번만 제출 될꺼라는 생각과 달리 중복돼서 제출이 되는 이슈가 있었다.

이 현상이 발생하는 방법은 오로지 한글을 입력하고 enter 키를 누를때만 발생하는 이슈였다.

<textarea
   data-component="comment-right-panel"
   type="text"
   placeholder="답글을 입력해 주세요."
   [value]="_inputValue"
   (input)="onInput($event)"
   (keydown)="onKeyDown($event, 'reply-change')"
   (focus)="onTextareaFocus($event)"
   (blur)="onTextareaBlur($event)"
   [style.text-indent]="getNicknameIndent()"
></textarea>
        
        
        
 onKeyDown(event: KeyboardEvent, formType: string): void {
    event.stopPropagation();

    // 엔터키 누를 때 기본 동작(줄바꿈) 방지
    if (event.key === 'Enter' && !CrossBrowsing.touchDevice) {
      event.preventDefault();

      if (!this._inputValue.trim()) {
        return; // 빈 내용이면 실행하지 않음
      }

 

즉 한글을 입력후 Enter 키를 누르면 onKeyDown에 event.key가 Enter인경우가 두 번 호출된다. 

문제 원인

IME 프로그램의 작동 방식때문에 발생했다고 볼 수 있다.

자음과 모음의 조합으로 사용자가 작성후 Enter 키를 입력하면 첫 번째 이벤트는 IME가 이를 가로채서 조합이 최종적으로 완료됐다는 확정을 하기 위해서 사용한다고 보면 된다. 

두 번째 Enter 이벤트는 말그대로 제출을 위해서 사용된 이벤트로 처리가 된다. 

 

다른 문자들의 경우 한글처럼 조합을 하지 않기 때문에 IME가 동작하지 않아 제출을 위한 Enter 이벤트만 동작을 한다. 

 

해결 방법

 

해결 방법은 한글 입력후 두 번의 event 인자의 값을 찍어보면 처음 발생한 이벤트에는 isComposing이 true로 되어있고 두 번째 발생한 이벤트에는 isComposing이 false로 되어있는걸 확인해볼 수 있다. 

 

처음 발생한 이벤트의 경우 조합중이기 때문에 true로 오기 때문에 true일때만 제출 로직이 동작하지 않도록 분기처리 해주면 된다.