Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 22:14:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Consume key{up,down,pressed} events

Browse Source 
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
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/views/dialogs/BaseDialog.js
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 // Don't let key{down,press} events escape the modal. Consume them all.
_onKeyDown: function(e) { _eatKeyEvent: function(e) {
if (e.keyCode === KeyCode.ESCAPE) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault();
}
}, },
// Must be when the key is released (and not pressed) otherwise componentWillUnmount // Must be when the key is released (and not pressed) otherwise componentWillUnmount
// will focus another element which will receive future key events // will focus another element which will receive future key events
_onKeyUp: function(e) { _onKeyUp: function(e) {
if (e.keyCode === KeyCode.ESCAPE) { if (e.keyCode === KeyCode.ESCAPE) {
e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.props.onFinished(); this.props.onFinished();
} else if (e.keyCode === KeyCode.ENTER) { } else if (e.keyCode === KeyCode.ENTER) {
if (this.props.onEnterPressed) { if (this.props.onEnterPressed) {
e.stopPropagation();
e.preventDefault(); e.preventDefault();
this.props.onEnterPressed(e); this.props.onEnterPressed(e);
} }
} }
// Consume all keyup events while Modal is open
e.stopPropagation();
}, },
_onCancelClick: function(e) { _onCancelClick: function(e) {
@ -89,7 +86,11 @@ export default React.createClass({
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
return ( 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} <AccessibleButton onClick={this._onCancelClick}
className="mx_Dialog_cancelButton" className="mx_Dialog_cancelButton"
> >