1. Composition 이벤트란

한국어, 일본어, 중국어와 같이 조합(composition)이 필요한 언어를 처리할 때 발생하는 이벤트입니다. 사용자가 입력한 값을 하나의 완성된 문자로 만들기 위해 다음과 같은 이벤트가 발생합니다.

<aside>

1. compositionStart

   • 사용자가 조합을 시작할 때 발생
   • 입력 중인 텍스트는 조합 중인 상태로 간주

2. compositionUpdate

   • 조합 중인 텍스트가 업데이트될 때마다 발생

3. compositionEnd

   • 사용자가 조합을 완료했을 때 발생
   • 입력된 텍스트는 완성된 텍스트로 간주 </aside>

예를 들어 서울을 입력할 때 다음과 같이 동작합니다.

// 'ㅅ' 입력
[Composition Start]
ㅅ
// 'ㅓ' 입력
서
// 'ㅇ' 입력
성
// 'ㅜ' 입력
서
[Composition End]
[Composition Start]
서우
// 'ㄹ' 입력
서울
// 입력 완료
[Composition End]
서
서울

2. Formatter와 Composition 이벤트 간 문제 해결

Trablock은 문자 입력 시 돈 형식으로 변환하는 기능을 가지고 있습니다.

0
// '1' 입력
1
// '2' 입력
12
// '3' 입력
123
// '4' 입력
1,234
// '5' 입력
12,345

이 기능은 입력할 때마다 정규식을 사용해 값을 실시간으로 포맷팅합니다. 입력값에서 숫자를 제외한 모든 문자를 제거 후 3자리마다 쉼표를 삽입하고, 맨 앞에 위치한 ‘0’을 제거하며, 최종 값이 없거나 ‘0’일 경우 중복 없이 ‘0’을 반환합니다. 만약 숫자가 아닌 문자를 입력할 경우 다음과 같이 작동합니다.

12,345
// 'a' 입력
전) 12,345a
후) 12,345
// 'b' 입력
전) 12,34b5
후) 12,345
// 'c' 입력
전) c12,345
후) 12,345

일반적인 문자를 입력할 때에는 문제가 발생하지 않습니다. 하지만 Composition 이벤트가 발생하는 문자를 입력할 경우 다음과 같이 문제가 발생합니다.

12,345
// 'ㄱ' 입력
[Composition Start]
전) 12,345ㄱ
후) 12,345
전) 12,34
후) 1,234
// 'ㄴ' 입력
[Composition Start]
전) 1,234ㄴ
후) 1,234
전) 1,23
후) 123
// 'ㄷ' 입력
[Composition Start]
전) 123ㄷ
후) 123
전) 12
후) 12

원래 의도한 동작은 이전 abc를 입력했던 예시처럼 기존 숫자는 그대로 유지한 채로 abc만 제거하는 것입니다. 하지만 ㄱㄴㄷ의 경우 해당 문자 이전에 위치한 숫자까지 제거하는 현상이 나타납니다. 이 현상의 원인은 첫번째 예시에 이어서 입력한 다음 예시를 통해 알 수 있습니다.