Components: Resolving unintended key events in IME composition

[t-hamano]

Related to: #45510, #45599

This tracking issue seeks to resolve the problem of events occurring in IME composition mode causing unintended behavior in some components.

What is IME composition ?

One of the input systems in which the IME composition are used is Japanese.

Because of the vast number of characters in the Japanese language ( including Kanji), it is not possible to input characters directly on a standard keyboard. Therefore, after entering "hiragana" characters, we choose which character to convert to and confirm with the Enter key.

• When you begin typing a character, an underline appears indicating that the expected character has not been finalized.
• Use the space or up/down keys to move through the list of candidates.
• Use the 'left' and 'right' keys to move the cursor position.
• Press the delete or backspace key to delete characters before or after the current cursor position
• Finally, press the enter key to confirm your input.
• Press the escape key to hide input candidates or cancel what you are typing.

Screencast

f38e4476faa008f2cac7f10fd13c5f35.mp4

What is the problem if it is IME composition ?

The keyboard operations described above are only for finalizing characters. However, for some components, these keystrokes are monitored and may cause unintended behavior.

What is the cause and solution?

I found the following differences about key events when character input is not finalized.

• event.code: returns the pressed key itself
• event.keyCode: returns the immediately preceding key
• event.key: returns the string Process

Therefore, in components that accept text input and use event.code, I believe it is appropriate to rewrite them using event.key.

@edit: It turns out that simply replacing event.code with event.key is insufficient. As noted in this comment, it would be desirable to add checks for event.isComposing and event.keyCode.

Components to be fixed

After a series of tests, I believe that the following components are causing problems and should be fixed:

• FormTokenField: Duplicate tags are entered
  • FormTokenField: Fix duplicate input in IME composition #45607
• ComboboxControl: When the enter key is pressed, both candidate characters and typed characters may be inserted.
  • ComboboxControl: Fix unexpected behaviour in IME Composition #46827
• Modal: Pressing the escape key to cancel the input state causes the modal to disappear.
  • Modal: Fix unexpected modal closing in IME Composition #46453
• AutocompleteUI: Forward slash inserter doesn't work in Japanese
  • Autocomplete: Fix unexpected block insertion during IME composition #45510
  • Autocomplete: Check key events more strictly in IME composition #45626
• Follow-up fix to TokenInput component (see ComboboxControl: Fix unexpected behaviour in IME Composition #46827 ' s description)

The following components may have a lower priority because I believe that there are few cases where text input elements will be placed.

• ConfirmDialog: Pressing the escape key to cancel the input state causes the modal to disappear.
  • Modal: Fix unexpected modal closing in IME Composition #46453
• Guide: Pressing the escape key to cancel the input state causes the modal to disappear.
  • Modal: Fix unexpected modal closing in IME Composition #46453

[t-hamano]

@ciampo @mirka
If there are other issues that need to be addressed, please advise me 🙏

[t-hamano]

Update: The ConfirmDialog and Guide components in the task list use Modal components internally, so this was automatically fixed by #46453. I temporarily added input elements to the two components, and IME input works correctly.

648dd5b0b4744b1c6036d0176f5e5065.mp4

[t-hamano]

Once #60090 is merged, all IME composition issues in the component package should be resolved. Therefore, I would like to close this issue.