Rocket.Chat 3.0.12 Livechat issue about Korean IME

[chojunki]

Description:

When you type in some messages in Korean through livechat windows, the Content get corrupted.

Steps to reproduce:

1. Open livechat on a Korean IME enabled PC with New Edge or Chrome browser. Then It will look like this:
   

2. Type any messages in Korean in the field showing 'Type your message here'

3. At first keystroke, the 'Type your message here' will disappear but IME will stop composing keystrokes to assemble a syllable like thks:
   

4. After this, The text will be entered normally.

Expected behavior:

At first keystroke, the 'Type your message here' should disappear and keystroke composion must go normally.

Actual behavior:

The only first keystroke that makes 'Type your message here' only removes the message and keystroke composition feature just breaks up.

I think this is because of the IME characteristics related with onKeyDown, onKeyUp and onKeyPress event. I found that I should not use onKeyUp event with Korean IME because that event will break up character composition feature of Korean IME.

Server Setup Information:

This is just a client issue.

• Version of Rocket.Chat Server: 3.0.12
• Operating System: CentOS 7.4
• Deployment Method: manual installation
• Number of Running Instances: 1
• DB Replicaset Oplog: enabled
• NodeJS Version: 12.14.0
• MongoDB Version: 4.2.0, but this is not the case this time.

Client Setup Information

• Desktop App or Browser Version: New Edge and Chrome. Both current version.
• Operating System: WIndows 10 Pro Korean, 19H2 with all updates

Additional context

Relevant logs:

[ybshin]

@chojunki 라이브쳇 문제없이 되시나요? IE나 Firefox에서..

[chojunki]

@chojunki 라이브쳇 문제없이 되시나요? IE나 Firefox에서..

With Rocket.Chat 3.0.12, livechat doesn’t work with IE11. I don’t use firefox so I cannot say if it works or not with firefox.
They say Rocket.Chat 3.1.0 will work with IE, but I failed to build from source so I could not test.

[chojunki]

@chojunki 라이브쳇 문제없이 되시나요? IE나 Firefox에서..

I am wondering if you are Korean...

[luixxiul]

This issue can be consistently reproduced on Japanese too.

Here is a GIF image to demonstrate the issue:

As you can see the first characters, ones without underline, are decided as soon as you input them and cannot be included for conversion. The first characters are fixed at the same time when the paper plane icon on the right side appears. FWIW this issue is only reproduced on livechat's input box, not other input boxes as far as I know.

[luixxiul]

• Reproduced on Firefox (intermittently).

• Not reproduced on Android either. Reproduced on Android as well.

• Reproduced on Debian (with mozc) too

[luixxiul]

@renatobecker FWIW the issue can be avoided by replacing <div> whose class is composer__input__ubV5B with a regular <input> element.

The paper plane icon to send a message stops appearing with that, so another modification would be required.

--

The issue does not happen on input forms on the registration as they are created with the regular <input> tag.

[luixxiul]

The issue is reproduced on Chinese IME too. The issue is common among CJK environment.

Steps to reproduce the issue:

1. Install Chinese IME on Windows
2. Enable Chinese IME
3. Open Livechat (or open https://rocketchat.github.io/Rocket.Chat.Livechat/?path=/story/routes-chat--loading)
4. Go through registration
5. Set cursor on the input div box
6. Push D one time
7. Push D again

Expected result: 李 should appear

Actual result: 木 has been already fixed as soon as you enter D, and the input form does not accept the second D to display 李. If you keep pushing D, it keeps conversion.

[LanceloteHK]

I found a temporary fix for this by removing the onchange event of the div composer__input__ubV5B. But this stop the showing of the send icon but it is still fine by pressing enter to send message. Seems this bug is similar to this react issue https://github.com/facebook/react/issues/3926