IText can not input chinese bug.

[yanzhou-share]

Hi, kangax:
First of all, this plugin is very good but I find IText can not input chinese.

@kangax

thanks

[HunterMitchell]

@yanzhou-share For bug reports, could you provide a test case on Jsfiddle?

[suguoyao]

It is a same problem

[evolutionjay]

Input problem more difficult to use Jsfiddle reflected, it is recommended to put YouTube video recording

[asturur]

Need to know:
Operating system
browser
input method used
fabricjs version used

[evolutionjay]

macOS 10.11.6 (15G31)
All Browsers。
the system base Chinese input method
fabric version 1.6.3

[gengshenghong]

Same issue here. Tested with Chrome on both windows, Ubuntu..using fabric version 1.6.3

[neopheus]

jsfiddle that demonstrate the problem.

[gengshenghong]

I tested with the official itext demos, input method is Sogou input method (popular input method for Chinese):
http://fabricjs.com/test/misc/itext.html

[evolutionjay]

The system default input method on macOS／Chrome 52

[gengshenghong]

I found it works on my Ubuntu 16.04 (Ubuntu Kylin, which is the official Chinese version of Ubuntu, with built-in Sogou IME). Tried both Chromium v51.0.2704.79 Ubuntu 16.04 (64-bit), and default Firefox in it.

Last time (not work) I was testing using Chrome (not Chromium) on Ubuntu 14.04 and win7 machines....

It seems like some compatible issues with Chrome. I need more testing around to isolate who is the criminal (OS? Browser? IME?)

Update more information as below:
Test case: http://fabricjs.com/test/misc/itext.html

Windows7 SP1 64bit + Sogou IME:
Chrome v44.0.2403.155 m: fails
Chrome v52.0.2743.116 m: fails
IE11: works
Firefox v48.0.0.6051: works

Ubuntu Kylin 16.04 + Sogou IME:
Chromium v51.0.2704.79: works
Chrome: works
Firefox: works

Ubuntu 14.04 + Sogou IME:
Chrome Version 50.0.2661.94 (64-bit): fail
Chromium Version 49.0.2623.108 Ubuntu 14.04 (64-bit): fail
Firefox: works

[gengshenghong]

I've debugged the code and the issue is clear now, the onCompositionUpdate and onCompositionEnd event compatible issue between browsers. In firefox, the "data" will be updated on both the last "composition update" and "composition end" event, but in chrome, it will only be updated on "composition end". Below updated code (move all code from compositionupdate to compositionend) works for me on both Chrome and Firefox (on same machine with Ubuntu 14.04 and same IME):

@kangax could you please help to review whether the code is ok and no impact on other code? You may merge it to your code if no issues.

` onCompositionEnd: function(e) {
console.log("onCompositionEnd");
console.log(e);
var data = e.data;
this.selectionStart = this.compositionStart;
this.selectionEnd = this.selectionEnd === this.selectionStart ?
this.compositionStart + this.prevCompositionLength : this.selectionEnd;
this.insertChars(data, false);
this.prevCompositionLength = data.length;

this.inCompositionMode = false;

},

onCompositionUpdate: function(e) {
console.log("compositionupdate");
console.log(e);
},`

[gengshenghong]

Update: need to have the code in both composition update and composition end, if need to simulate the typing process better. Without "composition update" code, the entered English characters will not show during typing.

[raffareis]

i believe this relates to #2352

[asturur]

Guys keyboard event is very different from browser to browsers. is something on wich i will work on but i do not think it will be an easy patch..other than composition event there are different ime. if i long press 'e' on mac to get list of e with accents then nothing happens... there is some work to do.

[onassar]

@asturur were you able to make any progress here?

[asturur]

i managed to fix the long press on mac. i submitted a bug on chromium because up to chrome 48 this thing was working enough well, while lately on chrome is completely broken.

[onassar]

Do you have the hash / commit where you made the change?

[asturur]

did not commot yet, looks like the fix does not work with firefox. the keyup and keydown event swallow the event and do not let the cursor run over the popup to choose. other than that number selection does not give any hint in what has been selected. text need to be reversed and make oninput event the unique source of truth of the text. i guess how many things i break if i do so.

[yanzhou-share]

@asturur
Windows XP
Chrome 51
sogou input method

http://fabricjs.com/kitchensink version:1.6.2

i-text can not input chinese

[asturur]

this is fixed on latest master. onInput event is better support and allow for various IME to work.
you can test the code in action here: www.shutterstock.com/editor and try it.