Skip to content
Snippets Groups Projects
Commit 4e35ce82 authored by unarist's avatar unarist Committed by Eugen Rochko
Browse files

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.
parent 6f63cbb5
Branches
Tags
1 merge request!8WIP: Backport from Mastodon FE main to support the "Direct messages" column and Lists
......@@ -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}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment