Fix Esc hotkey behavior (#7199)

This fixes following cases which causes hotkey action accidentally:

* hitting Esc key to cancel text composition (mostly in CJK)

  Although events on cancelling composition are still heavily
  browser / input method dependent, but this implementation would
  covers current UI Events spec and some exceptions.

* hitting Esc key to close autocomplete suggestions

This PR changes to use keydown event instead of keyup event as well as other hotkeys.

diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js
index 34904194f73414928882011df49d846a12c43150..5474771c9927e854072f9e72e84eb93d8f3bc15f 100644 (file)
--- a/app/javascript/mastodon/components/autosuggest_textarea.js
+++ b/app/javascript/mastodon/components/autosuggest_textarea.js
@@ -86,7 +86,9 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
 
     switch(e.key) {
     case 'Escape':
-      if (!suggestionsHidden) {
+      if (suggestions.size === 0 || suggestionsHidden) {
+        document.querySelector('.ui').parentElement.focus();
+      } else {
         e.preventDefault();
         this.setState({ suggestionsHidden: true });
       }
@@ -125,16 +127,6 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
     this.props.onKeyDown(e);
   }
 
-  onKeyUp = e => {
-    if (e.key === 'Escape' && this.state.suggestionsHidden) {
-      document.querySelector('.ui').parentElement.focus();
-    }
-
-    if (this.props.onKeyUp) {
-      this.props.onKeyUp(e);
-    }
-  }
-
   onBlur = () => {
     this.setState({ suggestionsHidden: true });
   }
@@ -186,7 +178,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
   }
 
   render () {
-    const { value, suggestions, disabled, placeholder, autoFocus } = this.props;
+    const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
     const { suggestionsHidden } = this.state;
     const style = { direction: 'ltr' };
 
@@ -208,7 +200,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
             value={value}
             onChange={this.onChange}
             onKeyDown={this.onKeyDown}
-            onKeyUp={this.onKeyUp}
+            onKeyUp={onKeyUp}
             onBlur={this.onBlur}
             onPaste={this.onPaste}
             style={style}