mirror of https://github.com/Siphonay/mastodon
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.
This commit is contained in:
parent
6f63cbb53c
commit
4e35ce8269
|
@ -86,7 +86,9 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
|
||||||
|
|
||||||
switch(e.key) {
|
switch(e.key) {
|
||||||
case 'Escape':
|
case 'Escape':
|
||||||
if (!suggestionsHidden) {
|
if (suggestions.size === 0 || suggestionsHidden) {
|
||||||
|
document.querySelector('.ui').parentElement.focus();
|
||||||
|
} else {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.setState({ suggestionsHidden: true });
|
this.setState({ suggestionsHidden: true });
|
||||||
}
|
}
|
||||||
|
@ -125,16 +127,6 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
|
||||||
this.props.onKeyDown(e);
|
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 = () => {
|
onBlur = () => {
|
||||||
this.setState({ suggestionsHidden: true });
|
this.setState({ suggestionsHidden: true });
|
||||||
}
|
}
|
||||||
|
@ -186,7 +178,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { value, suggestions, disabled, placeholder, autoFocus } = this.props;
|
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
|
||||||
const { suggestionsHidden } = this.state;
|
const { suggestionsHidden } = this.state;
|
||||||
const style = { direction: 'ltr' };
|
const style = { direction: 'ltr' };
|
||||||
|
|
||||||
|
@ -208,7 +200,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
|
||||||
value={value}
|
value={value}
|
||||||
onChange={this.onChange}
|
onChange={this.onChange}
|
||||||
onKeyDown={this.onKeyDown}
|
onKeyDown={this.onKeyDown}
|
||||||
onKeyUp={this.onKeyUp}
|
onKeyUp={onKeyUp}
|
||||||
onBlur={this.onBlur}
|
onBlur={this.onBlur}
|
||||||
onPaste={this.onPaste}
|
onPaste={this.onPaste}
|
||||||
style={style}
|
style={style}
|
||||||
|
|
Loading…
Reference in New Issue