Add tag: Use `event.isComposing` to support input method editor (IME) converters

[afercia]

In some languages, for example Chinese, Japanese, and Korean, Input Method Editor (IME) converters are used to show a list of suggestions and pick up an alternate script, for example ​theJapanese kanji.

In #42234 / [41988] the keyup event used to insert a Tag was changed to keypress to support IME converters. However, this change broke the previous keyboard interaction for users who don't use an IME. See also #42233.

There are now 2 keypress events on the same input but more importantly there's now the need to press the Enter key twice to add a term. Previously, one Enter key press was enough because the term was added when releasing the Enter key (on keyup).

The different keyboard interaction behavior can be easily verified testing the previous behavior on WordPress 4.8 and the new one on WordPress 4.9. Worth noting this also affects the way the associated speak() audible messages work.

Thanks to @miyauchi who pointed it out and thanks to the remarkable collaboration on this Gutenberg Pull Request ​https://github.com/WordPress/gutenberg/pull/11908 it appears there's now a better method to balance the two different needs.

By using event.isComposing it's possible to detect when characters are being composed and wait for the composition to end before triggering a callback. This way, it should be possible to restore the previous behavior for non-IME users (just one Enter key press to add a tag) and also support IME users.

Also, this would align with what Gutenberg already does.

A couple references:

Browsers support: ​https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing#Browser_compatibility

More details: ​https://www.w3.org/TR/uievents/#events-composition-types

[miyauchi]

@afercia

I created a patch to fix this problem.
I tested on Firefox and Chrome on macOS.

Thanks! :)

[miyauchi]

Note:

I tried to use event.isComposing but it will be set false when I enter to submit Japanese kanji.
So, we can't detect when characters are being composed with event.isComposing.

[afercia]

Discussed during today's accessibility bug scrub and agreed to explore this for 5.2.

[ryanshoover]

@miyauchi in my testing event.isComposing works as intended, being set to true while composing and false when done. Can you elaborate on why it doesn't work for you?

I'd rather use native browser events if possible rather than tracking composition status through a function prop.

[afercia]

I think the patch should be refreshed to use event.originalEvent.isComposing. Looking at the Gutenberg implementation, ​https://github.com/WordPress/gutenberg/pull/11908/files onCompositionEnd is used only to ensure the callback is triggered "for browsers that don't emit a final input event after composition."

Also, the same should be done for the Quick Edit form in the Posts list.

[afercia]

@ryanshoover when you have a chance, do you need any help on this ticket? I'd really appreciate some feedback to not punt this ticket to next release. Thank you :)

[ryanshoover]

@afercia I've attached a patch that reverts back to keyup and has a simple check for event.originalEvent.isComposing === false. A single enter key will select the IME character and add the tag.

Looking at the Quick Edit box, I'd suggest not updating that code. The enter key is used to trigger the save action. If we pass the IME's enter key for choosing one of the selections through to the quick edit JS, then selecting a script will also update the post.

I'd like to have a native user of IME input test the UX to make sure we haven't overlooked something. Do you have any suggestions?

[ryanshoover]

Refreshes patch to just use isComposing

[afercia]

@ryanshoover thanks! Asked around for native IME users willing to test this patch. Hopefully someone will step up.

[miyauchi]

Example for Japanese Kanji input

[miyauchi]

Hi @afercia @ryanshoover

I am sorry for delaying for reply.

2019-04-01 05-21-54.2019-04-01 05_23_36.gif​ is Gif animation added console.log( event.originalEvent.isComposing ); into the 45371.1.patch.

We need [Enter] twice to insert tag with Japanese Kanji. (Chinese and Korean too)
The first [Enter] is to confirm Kanji and the second [Enter] is to insert the tag.
You can see isComposing is false on first [Enter] to confirm Kanji on Gif animation, so it isn't expected behavior for Japanese IME.

Thanks :)

[ryanshoover]

@miyauchi thanks for the tests. We'll need to dig in further.

[miyauchi]

@ryanshoover

It is good to see sequence of events.

​https://input-inspector.now.sh/profiles/2NIftuQTgXLvr5PhtrF8

I found out that my patch isn't working for us too...

[miyauchi]

I found out that my patch isn't working for us too...

I got it wrong. My patch looks working for me.

[afercia]

I think we (as developers) would need to learn how to setup an IME on our computers to actually be able to test and fix this issue. Sorry for my ignorance :) but I wouldn't know where to start. Can anyone be so kind to provide some instructions? Thanks!

[ryanshoover]

@afercia I set up an IME successfully by following the instructions in ​https://github.com/WordPress/gutenberg/pull/11908#issuecomment-439041771

[ryanshoover]

For reference - the complications we're having testing patches seems to be from different browser implementations of the sequence of events that fire between keyup & compositionend.

​https://github.com/w3c/uievents/issues/202

[ryanshoover]

Potential new solution

[ryanshoover]

@miyauchi @afercia would you two mind testing out 45372.2.patch?

I've taken a different approach.

• tags-box.js has its 2nd keypress event removed. General cleanup
• tags-suggest.js now runs tagBox.flushTags() when an option is selected. When browsing through the suggested tags, a single enter key will add the tag to the post.

The 2nd enter key was required because both the jQuery autocomplete widget that holds the suggested tags and the keypress function were listening for keydown and stopping propagation to other events. (keypress is an alias of keydown)

I explored various ways of sniffing for isComposing / compositionend but couldn't get reliable results between browsers.

[miyauchi]

@ryanshoover

I tried 45372.2.patch and it looks good to me with Japanese IME.

The 2nd enter key was required because both the jQuery autocomplete widget that holds the suggested tags and the keypress function were listening for keydown and stopping propagation to other events. (keypress is an alias of keydown)

Oh nice catch! :)

Thanks!

[afercia]

Testing on Windows 10 with Japanese IME and Hiragana I need to press Enter twice: first time, to confirm the IME suggestion. After that, the Tags suggestions appear and I need to press Enter again. @miyauchi is this the expected behavior? Just to be 100% sure I'm not missing anything :)

@ryanshoover thanks for the new patch. If it's OK for IME, looks good to me: the patch restores the original behavior pre [41988] so that (when not using an IME) the tags are added when pressing Enter once. Just one small thing: I'm not sure I understand false used here:

if ( window.tagBox || false )

For reference and history: reading the related ​w3c/uievents GitHub issue it appears the composition events are unreliable: the events order differs across browsers and also across languages. The new approach looks cleaner and solves the issue. Worth mentioning two useful tools to test keyboard events:

• ​https://w3c.github.io/uievents/tools/key-event-viewer.html
• ​https://input-inspector.now.sh/profiles/2NIftuQTgXLvr5PhtrF8

[miyauchi]

Hi @afercia

Testing on Windows 10 with Japanese IME and Hiragana I need to press Enter twice: first time, to confirm the IME suggestion. After that, the Tags suggestions appear and I need to press Enter again.

Yes, it is perfect. :)

Thanks!

[ryanshoover]

@afercia It's an old trick I was taught to help catch undefined values. Some browsers will throw an error if you just check if ( window.tagBox ) {} but will correctly evaluate to false on if ( window.tagBox || false ) {}.

I don't have the rationale at hand. Let me try to track it down.

[ryanshoover]

Removes unnecessary conditional bool check

[ryanshoover]

Refreshed the patch to remove the || false

[afercia]

In 45227:

Accessibility: Make the Tags meta box better support Input Method Editor (IME) converters.

Also, restores the keyboard interaction behavior prior to [41988] by requesting one single Enter key press to add a tag.

Props ryanshoover, miyauchi.
Fixes #45371.