PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #867 from matrix-org/t3chguy/BaseDialog-patch1

Browse source 
Fixes 2 issues with Dialog closing
This commit is contained in:
Luke Barnard 2017-05-09 11:36:35 +01:00 committed by GitHub
commit 3549ff2543
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/views/dialogs/BaseDialog.js
View file

@ -57,20 +57,25 @@ export default React.createClass({
} }
}, },
// 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 // 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) {
@ -81,7 +86,11 @@ export default React.createClass({
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
return ( return (
<div 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"
> >