From 7944e4c11d87775b68c2cf13e8e87527738380af Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Fri, 2 Sep 2022 23:09:31 +0530
Subject: [PATCH] Allowed dismissing portal popup with Esc for signup page

closes https://github.com/TryGhost/Team/issues/1034

- pressing esc to dismiss popup didn't work for signup page as it was focused on input field
- allows esc to dismiss popup if the focused input field is empty
---
 ghost/portal/src/components/PopupModal.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/ghost/portal/src/components/PopupModal.js b/ghost/portal/src/components/PopupModal.js
index 49ec0cfe3a..abc67fc262 100644
--- a/ghost/portal/src/components/PopupModal.js
+++ b/ghost/portal/src/components/PopupModal.js
@@ -58,9 +58,8 @@ class PopupContent extends React.Component {
         if (this.node && !hasMode(['preview'])) {
             this.node.focus();
             this.keyUphandler = (event) => {
-                const eventTargetTag = (event.target && event.target.tagName);
-                if (event.key === 'Escape' && eventTargetTag !== 'INPUT') {
-                    this.context.onAction('closePopup');
+                if (event.key === 'Escape') {
+                    this.dismissPopup(event);
                 }
             };
             this.node.ownerDocument.removeEventListener('keyup', this.keyUphandler);
@@ -69,6 +68,15 @@ class PopupContent extends React.Component {
         this.sendContainerHeightChangeEvent();
     }
 
+    dismissPopup(event) {
+        const eventTargetTag = (event.target && event.target.tagName);
+        // If focused on input field, only allow close if no value entered
+        const allowClose = eventTargetTag !== 'INPUT' || (eventTargetTag === 'INPUT' && !event?.target?.value);
+        if (allowClose) {
+            this.context.onAction('closePopup');
+        }
+    }
+
     sendContainerHeightChangeEvent() {
         if (this.node && hasMode(['preview'])) {
             if (this.node?.clientHeight !== this.lastContainerHeight) {