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

Fix dialog reappearing after hitting Enter

Browse source 
Fixes https://github.com/vector-im/riot-web/issues/3714

https://github.com/vector-im/riot-web/issues/3714#issuecomment-297460620 :
> It's as if there are two dialogs and as one closes, the other one appears. For some reason matrix-org/matrix-react-sdk#822 is causing this.
> I've realised it's because the `priorActiveElement` is probably the button that opened the dialog. If this is focused and the enter key is released, this triggers a keyPress which fires once the dialog has closed and the button has been focused 😬 the BaseDialog only calls stopPropagation _onKeyDown.

The soln. was to submit the dialog as finished `onKeyUp`. This means the `priorActiveElement` is focussed after any key events that should be associated with the dialog.
This commit is contained in:
Luke Barnard 2017-04-26 17:37:52 +01:00
parent 9ac06d4c79
commit 5f0ecc588f
1 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -57,7 +57,9 @@ export default React.createClass({
} }
}, },
_onKeyDown: function(e) { // 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) { if (e.keyCode === KeyCode.ESCAPE) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
@ -79,7 +81,7 @@ export default React.createClass({
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
return ( return (
<div onKeyDown={this._onKeyDown} className={this.props.className}> <div onKeyUp={this._onKeyUp} className={this.props.className}>
<AccessibleButton onClick={this._onCancelClick} <AccessibleButton onClick={this._onCancelClick}
className="mx_Dialog_cancelButton" className="mx_Dialog_cancelButton"
> >