From f02e659fb7502ebb524651494e9c9bd1098fcc9b Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@googlemail.com>
Date: Tue, 9 May 2017 11:27:06 +0100
Subject: [PATCH] Consume key{up,down,pressed} events

so they don't trigger other things bubbling up
until Modal is closed
---
 src/components/views/dialogs/BaseDialog.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index ac36dfd056..02460148b3 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -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"
                 >