MUI TextField onKeyDown 댓글 2개 입력되는 문제

문제 원인

맥에서도 크롬 브라우저를 사용해서 발생하는 문제였습니다.

IME 관련 문제였는데

IME가 뭐냐면

IME(Input Method Editor)는 조합이 필요한 글자(영어빼고 웬만한 한국어 중국어 일본어) 작성에 사용되는 에디터입니다.

이 에디터에는 조합 여부를 판단하는 "e.nativeEvent.isComposing" 이라는 필드가 있는데 MacOS의 크롬 브라우저에서는 이게 true일 때 엔터를 누르면 두번 입력되는 문제가 발생합니다.

자세한 내용은 다음 블로그를 참고하면 됩니다. 아주 잘 정리가 되어있었습니다.

https://velog.io/@darr/React-onKeyDown-한글-입력-시-두번-실행되는-문제

해결과정

TexfField의 OnkeyDown에 !e.nativeEvent.isComposing 을 통해 완성되지 않은 단어를 입력했을 때 두번 입력되는 것을 막았습니다.

처음에는 !e.isComposing 으로 커서가 작성주었는데, 이거는 영어랑 숫자는 한번만 입력되게 하지만 한글 자음으로 끝나는 거는 두번 작성되는 문제가 있었습니다.

예를 들면, "d"나 "1"이나 "!" 같은 것들은 한번만 작성되는데

모음으로 끝나는 것들, "ㅇ" 이나 받침 있는 "앙" 이런거는 두번 입력되었습니다.

지금 돌아보면 e.isComposing이라는 필드가 없는데 이걸 써놓고 커서한테 왜 안되냐고 물어봤던게 웃깁니다.

커서도 이 필드가 없는 필드인지는 몰랐던 거 같습니다.

<TextField
onKeyDown={(e) => {
              console.log(e)
            }}
/>

아래 스크린샷은 TextField의 onKeyDown 이벤트인데 위의 코드 찍고 콘솔 들어가서 확인해보면 보입니다.

참고로 여기서 keyCode 가 229로 나타나는데 이는 IME 에디터에서 다국어 입력모드로 실행되고 있다는 것을 말한다고 합니다.

궁금해져서 “a” 와 “A”도 입력해봤는데 65가 나옵니다. 대소문자 구별은 아스키코드값으로 따로 안하는 거 같습니다.

근데 이제는 거의 안쓰고 key 나 code 를 사용하는게 권장된다고 합니다.

 

해결 코드

<TextField
            fullWidth
            size="small"
            multiline
            minRows={1}
            maxRows={3}
            placeholder={showReplies ? "답글을 입력하세요..." : "댓글을 입력하세요..."}
            value={commentText}
            onChange={(e) => setCommentText(e.target.value)}
            onKeyDown={(e) => {
              console.log(e)
              if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing && commentText.trim()) {
                e.preventDefault();
                handleCommentSubmit(e);
              }
            }}
            sx={{
              '& .MuiOutlinedInput-root': {
                borderRadius: '20px',
                background: 'white',
                color: 'black',
                '& fieldset': {
                  borderColor: 'black',
                },
                '&:hover fieldset': {
                  borderColor: 'black',
                },
                '&.Mui-focused fieldset': {
                  borderColor: 'black',
                },
              },
              input: {
                color: 'black',
              },
            }}
          />

여기서 onKeyDown 의 !e.nativeEvent.isComposing 부분을 추가하면 해결됩니다.