autonomic-cooperative/hometown
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix Esc hotkey behavior (#7199)

Browse Source 
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.
This commit is contained in:
unarist
2018-04-20 21:04:16 +09:00
committed by Eugen Rochko
parent 6f63cbb53c
commit 4e35ce8269
1 changed files with 5 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/mastodon/components/autosuggest_textarea.js
View File

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