WordPress.org

Make WordPress Core

Opened 13 months ago

Closed 8 months ago

#45371 closed defect (bug) (fixed)

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

Reported by: afercia Owned by: ryanshoover
Milestone: 5.2 Priority: normal
Severity: normal Version: 4.9
Component: Taxonomy Keywords: has-patch
Focuses: accessibility Cc:
PR Number:

Description

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

Attachments (5)

45371.patch (1.2 KB) - added by miyauchi 13 months ago.
45371.1.patch (650 bytes) - added by ryanshoover 9 months ago.
Refreshes patch to just use isComposing
2019-04-01 05-21-54.2019-04-01 05_23_36.gif (280.5 KB) - added by miyauchi 8 months ago.
Example for Japanese Kanji input
45371.2.patch (1.2 KB) - added by ryanshoover 8 months ago.
Potential new solution
45371.3.patch (1.2 KB) - added by ryanshoover 8 months ago.
Removes unnecessary conditional bool check

Download all attachments as: .zip

Change History (39)

@miyauchi
13 months ago

#1 @miyauchi
13 months ago

@afercia

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

Thanks! :)

#2 @miyauchi
13 months ago

  • Keywords has-patch added

#3 @miyauchi
13 months ago

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.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


11 months ago

#5 @afercia
11 months ago

  • Keywords needs-refresh added
  • Milestone changed from Awaiting Review to 5.2
  • Owner set to afercia
  • Status changed from new to assigned

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

#6 @afercia
11 months ago

  • Owner changed from afercia to ryanshoover

#7 @ryanshoover
10 months ago

@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.

#8 @afercia
9 months ago

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.

Last edited 9 months ago by afercia (previous) (diff)

#9 @afercia
9 months ago

@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 :)

#10 @ryanshoover
9 months ago

  • Keywords needs-refresh removed

@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
9 months ago

Refreshes patch to just use isComposing

#11 @ryanshoover
9 months ago

  • Keywords needs-testing added

This ticket was mentioned in Slack in #core by afercia. View the logs.


9 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 months ago

#14 @afercia
9 months ago

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


9 months ago

@miyauchi
8 months ago

Example for Japanese Kanji input

#16 @miyauchi
8 months ago

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 :)

#17 @ryanshoover
8 months ago

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

#18 @miyauchi
8 months ago

@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...

#19 @miyauchi
8 months ago

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

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

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


8 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


8 months ago

#22 @afercia
8 months ago

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!

#23 @ryanshoover
8 months ago

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

#24 @ryanshoover
8 months ago

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
8 months ago

Potential new solution

#25 @ryanshoover
8 months ago

@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.

This ticket was mentioned in Slack in #accessibility by ryanshoover. View the logs.


8 months ago

#27 @miyauchi
8 months ago

@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!

#28 @afercia
8 months ago

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:

#29 @miyauchi
8 months ago

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!

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


8 months ago

#31 @ryanshoover
8 months ago

@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
8 months ago

Removes unnecessary conditional bool check

#32 @ryanshoover
8 months ago

Refreshed the patch to remove the || false

#33 @afercia
8 months ago

  • Component changed from I18N to Taxonomy
  • Keywords needs-testing removed

#34 @afercia
8 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.