Cannot input the first character with Chinese IME

[Pavek]

This is quite specific test-case reproduced on different Windows machines with Chinese Traditional keyboard input. Unfortunately, this is quite nasty.

While typing the very first character in editor with the input method specified below, the caret goes back to start position every time you press a key, essentially making it impossible to start typing. Important note: after typing a space character (' ') you can then type normally!

Language: Chinese (Traditional, Taiwan)
Keyboard: Chinese (Traditional) - New Phonetic
Preferred keyboard layout - HanYu Pinyin

Probably, it's an edge case for issue #213.

Steps for Reproduction

1. Visit quilljs.com (yes, reproduced on demo page!)
2. Remove all content from the editor (make it empty)
3. Switch to Chinese Keyboard specified above
4. Start typing any chars

Expected behavior: The mini-popup appears underneath the typed char and one can complete the hieroglyph.

Actual behavior: The caret moves back to initial position and mini-popup does not appear, essentially making it impossible to type. Pressing space solves the issue.

Platforms: IE11 on Win7 (not reproduced on latest FF and Chrome)

Version: v0.20.1

[jhchen]

Thanks for the report. I'll see if I can reproduce it in the 1.0 development branch and look into a fix if so.

[Pavek]

Here's the crazy workaround: https://jsbin.com/fidivelale/1/edit?html,js,output
Notes:

• We use react-quill and this jsbin contains stripped-down version of our implementation
• Notice the   on the line 3 -- this is the key. Without it one cannot type Chinese characters on IE11.

[yachtingchen]

Here is how the problem looks like:
expected behavior: (recording from Chrome)

actual behavior: (recording from IE11)

Steps to reproduce the problem.

1. go to http://quilljs.com/
2. Select all text in the editor and delete
3. Type "5j/ " and press Enter for Chinese character "中"

Environment: Windows 8
Input method: Chinese (Traditional, Taiwan) Microsoft Bopomofo

[ximing]

The 56 version of the chrome can reproduce this bug

[ghost]

plz disable your chrome extend，and have a try.

[ximing]

@kennywho ， when I disable evernote extend ,everything is all right. But why? I found ScrollBlot's MutationObserver (in parchment) give a wrong mutations when I able evernote extend .
【Right】

【Wrong】

But ,when I write a contenteditable div like this

No matter whether I disable the extend, everything is fine.MutationObserver give the correct value.

[eric-leihe]

After some digging and testing. I found at least in Chrome this problem is caused by Evernote Extension. I have tried safari without any issue.
But in Chrome if I enable Evernote extension the issue reproduced. I have some other Chrome extensions such like grammarly which will live check my typing but only Evernote leads to this problem. I don't know what Evernote extension do to the input but it apparently intercepts the input content and not properly passes it down to next layer.

But when I tested in IE Edge another wired problem happened. When I input Chinese at the beginning of an empty line, the first character I typed will be directly treated as English character and placed into the cursor position. Thie behavior breaks my normal Chinese Pinyin input, change my consecutive input into 1 leading English character and some Pinyin characters following.

See the attached screen shot. I am typing shurufa which is Pinyin of Chinese "输入法", but I got "s + hurufa".

If only input one character at the line beginning it will not trigger Windows Chinese Input Widget. But except this position, you can smoothly input Chinese without any problem. So apparently this issue was caused by some special processing at line beginning.

Another testing, it seems quilljs cannot well handle new line when working with Chinese input. When I input Chinese at the last empty line the cursor jumps back to the first empty line.

By the way, I am using Reactjs + quilljs npm package.

Some JS error may give you some clues:

I record a video of the issue.

https://www.youtube.com/watch?v=yfHQZPb8d8k

[jhchen]

Looks like multiple people are reporting it is due to Evernote. Please contact their development or support team.