Mastodon: Press the ESC key while using the IME, the input focus is out of focus

[osapon]

When using the IME, if you press the ESC key to cancel the input contents, the input focus itself of Mastodon also comes off.
I remember it as if there was no problem before version 2.0. Has a problem arisen since the shortcut key was entered?

Movie: https://gyazo.com/34bbcaca61213494820565028cd79c90
It works in Windows 10, ATOK 2017, Firefox 57 environment.
I heard that it also occurs on Mac.

I hope that the focus does not come off when I press the ESC key.

[unarist]

https://github.com/tootsuite/mastodon/blob/b254e6ca5f780569e3347deb456b84531b4538ae/app/javascript/mastodon/components/autosuggest_textarea.js#L129-L131

We shouldn't use only keyup event for this use because most browsers emit keyup event for Escape to cancel composition. (Some browsers also emit keyup for Enter to complete composition)

This issue wouldn't happen on keydown event. Also we can use compositionend event with keyup event.

Handling IME events in JavaScript – Not Rocket Science

Since we also check this.props.suggestionsHidden, the issue doesn't look to always happen. This property seems to be used for distinguish from cancelling of autocomplete...but it won't work property because keyup event emitted just after setting of it.

autocomplete issue demo: https://mstdn.maud.io/@unarist/98923182148583857

[lilydjwg]

I'm starting to use Mastodon but I can't bear with this any more....I once used Trello and it had the same issue, so I hate Trello since then.

The issue is not only you can't continue to type. Because I'm using VimFx (a Vim-like browser extension), I won't know what's is going once the sequence is broken. For the most of time the page asks me if I really want to close it, but I don't know what else I've done unconsciously.

What's the current progress on this?

[lilydjwg]

FYI，compositionend events aren't fired with Esc if preedit is disabled. That is, the browser gets no info about what's the IME is composing. It only gets the result (the four events compositionstart, compositionupdate, compositionend and input come in a row).

I disable preedit mainly because it causes issues on some sites (like Google Docs or something like that) and it's not useful at all.

[unarist]

UI Events spec (WD) says UA fires keydown -> compositionend -> keyup when user cancelled composition, but some combination of UA and input method will get different behavior. An article which I pasted in the last comment fixes most cases but not complete.

Additionally, this means some users regularly use Esc key while composing text. They may hit extra Esc key by mistake, and fall into this issue. So I think Esc hotkey should be optional anyway...

@Gargron How do you think?

[unarist]

FYI: It can be disabled by userscript anyway.

window.addEventListener('keyup', e => {
  if (e.target.matches('.autosuggest-textarea__textarea') && e.key === 'Escape') {
    e.stopPropagation();
  }
}, true);

[lilydjwg]

@unarist thanks very much! This helps me a lot!

[unarist]

I will close this issue as fixed at #7199 and #7205.

Now we handles keydown event unless e.which==229 or e.isComposing==true. This way would work on most CJK input methods and seems fine as UI Events spec.