Consume key{up,down,pressed} events

so they don't trigger other things bubbling up
until Modal is closed
This commit is contained in:
Michael Telatynski 2017-05-09 11:27:06 +01:00 committed by GitHub
parent bd32df4ef6
commit f02e659fb7

View File

@ -57,28 +57,25 @@ export default React.createClass({
}
},
// Don't let esc keydown events get any further, so they only trigger this and nothing more
_onKeyDown: function(e) {
if (e.keyCode === KeyCode.ESCAPE) {
e.stopPropagation();
e.preventDefault();
}
// Don't let key{down,press} events escape the modal. Consume them all.
_eatKeyEvent: function(e) {
e.stopPropagation();
},
// Must be when the key is released (and not pressed) otherwise componentWillUnmount
// will focus another element which will receive future key events
_onKeyUp: function(e) {
if (e.keyCode === KeyCode.ESCAPE) {
e.stopPropagation();
e.preventDefault();
this.props.onFinished();
} else if (e.keyCode === KeyCode.ENTER) {
if (this.props.onEnterPressed) {
e.stopPropagation();
e.preventDefault();
this.props.onEnterPressed(e);
}
}
// Consume all keyup events while Modal is open
e.stopPropagation();
},
_onCancelClick: function(e) {
@ -89,7 +86,11 @@ export default React.createClass({
const TintableSvg = sdk.getComponent("elements.TintableSvg");
return (
<div onKeyDown={this._onKeyDown} onKeyUp={this._onKeyUp} className={this.props.className}>
<div onKeyUp={this._onKeyUp}
onKeyDown={this._eatKeyEvent}
onKeyPress={this._eatKeyEvent}
className={this.props.className}
>
<AccessibleButton onClick={this._onCancelClick}
className="mx_Dialog_cancelButton"
>