Add proper event listener to Portal (#4359)

js/package.json

@@ -175,6 +175,7 @@
     "react-dom": "15.4.1",
     "react-dropzone": "3.7.3",
     "react-element-to-jsx-string": "6.0.0",
+    "react-event-listener": "0.4.1",
     "react-intl": "2.1.5",
     "react-portal": "3.0.0",
     "react-redux": "4.4.6",

js/src/ui/Portal/portal.js

@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import EventListener from 'react-event-listener';
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import ReactPortal from 'react-portal';
@@ -85,6 +86,7 @@ export default class Portal extends Component {
             onKeyDown={ this.handleKeyDown }
           >
             <ParityBackground className={ styles.parityBackground } />
+            { this.renderBindings() }
             { this.renderCloseIcon() }
             { children }
           </div>
@@ -93,6 +95,21 @@ export default class Portal extends Component {
     );
   }
 
+  renderBindings () {
+    const { expanded } = this.state;
+
+    if (!expanded) {
+      return null;
+    }
+
+    return (
+      <EventListener
+        target='window'
+        onKeyUp={ this.handleKeyUp }
+      />
+    );
+  }
+
   renderCloseIcon () {
     const { expanded } = this.state;
 
@@ -121,18 +138,20 @@ export default class Portal extends Component {
 
   handleKeyDown = (event) => {
     const { onKeyDown } = this.props;
+
+    event.persist();
+    return onKeyDown
+      ? onKeyDown(event)
+      : false;
+  }
+
+  handleKeyUp = (event) => {
     const codeName = keycode(event);
 
     switch (codeName) {
       case 'esc':
         event.preventDefault();
         return this.handleClose();
-
-      default:
-        event.persist();
-        return onKeyDown
-          ? onKeyDown(event)
-          : false;
     }
   }