From 2dee51ee805133488cd440dbdc2a33054c5cb199 Mon Sep 17 00:00:00 2001
From: Rish <zrishabhgarg@gmail.com>
Date: Tue, 8 Sep 2020 17:49:10 +0530
Subject: [PATCH] Handled closing popup with Esc key

refs https://github.com/TryGhost/members.js/issues/95

- Hitting Esc key closes the Portal popup as long is its not inside any `<input>` field for entering data
---
 ghost/portal/src/components/Frame.styles.js |  1 +
 ghost/portal/src/components/PopupModal.js   | 23 ++++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/ghost/portal/src/components/Frame.styles.js b/ghost/portal/src/components/Frame.styles.js
index a7f3bd2e7b..1e0478d44d 100644
--- a/ghost/portal/src/components/Frame.styles.js
+++ b/ghost/portal/src/components/Frame.styles.js
@@ -254,6 +254,7 @@ const GlobalStyles = `
     }
 
     .gh-portal-popup-container {
+        outline: none;
         position: relative;
         display: flex;
         box-sizing: border-box;
diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js
index 317d52e986..ceb3680bac 100644
--- a/ghost/portal/src/components/PopupModal.js
+++ b/ghost/portal/src/components/PopupModal.js
@@ -41,6 +41,27 @@ const StylesWrapper = ({member}) => {
 class PopupContent extends React.Component {
     static contextType = AppContext;
 
+    componentDidMount() {
+        // Handle Esc to close popup
+        if (this.node) {
+            this.node.focus();
+            this.keyUphandler = (event) => {
+                const eventTargetTag = (event.target && event.target.tagName);
+                if (event.key === 'Escape' && eventTargetTag !== 'INPUT') {
+                    this.context.onAction('closePopup');
+                }
+            };
+            this.node.removeEventListener('keyup', this.keyUphandler);
+            this.node.addEventListener('keyup', this.keyUphandler);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.node) {
+            this.node.removeEventListener('keyup', this.keyUphandler);
+        }
+    }
+
     renderActivePage() {
         const {page} = this.context;
         getActivePage({page});
@@ -67,7 +88,7 @@ class PopupContent extends React.Component {
             ...Styles.page[page]
         };
         return (
-            <div className={hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container'} style={pageStyle}>
+            <div className={hasMode(['preview', 'dev']) ? 'gh-portal-popup-container preview' : 'gh-portal-popup-container'} style={pageStyle} ref={node => (this.node = node)} tabIndex="-1">
                 {this.renderPopupClose()}
                 {this.renderActivePage()}
             </div>