From 4e35ce82691dff9cd81dae2f0e2f566f6f3ef85c Mon Sep 17 00:00:00 2001
From: unarist <m.unarist@gmail.com>
Date: Fri, 20 Apr 2018 21:04:16 +0900
Subject: [PATCH] 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.
---
.../components/autosuggest_textarea.js | 18 +++++-------------
1 file changed, 5 insertions(+), 13 deletions(-)
diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js
index 34904194f..5474771c9 100644
--- 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}
--
GitLab