From 5f0ecc588f9f161b1013c936d619c065aa1ce66e Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 26 Apr 2017 17:37:52 +0100
Subject: [PATCH] Fix dialog reappearing after hitting Enter

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 :grimacing: 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.
---
 src/components/views/dialogs/BaseDialog.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index d0f34c5fbd..279dedbd43 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -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) {
             e.stopPropagation();
             e.preventDefault();
@@ -79,7 +81,7 @@ export default React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         return (
-            <div onKeyDown={this._onKeyDown} className={this.props.className}>
+            <div onKeyUp={this._onKeyUp} className={this.props.className}>
                 <AccessibleButton onClick={this._onCancelClick}
                     className="mx_Dialog_cancelButton"
                 >