From a4c2c2ebcffee379f6f977392240ff0879f7f1ff Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 24 May 2023 16:51:04 +0200
Subject: [PATCH] Added backdrop interaction to modals in AdminX

refs. https://github.com/TryGhost/Team/issues/3150
---
 .../admin-x-settings/src/admin-x-ds/global/Modal.tsx  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
index 5bd83f5e59..6e734d1924 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
@@ -41,8 +41,8 @@ const Modal: React.FC<ModalProps> = ({size = 'md', title, okLabel, cancelLabel,
         });
     }
 
-    let modalStyles = 'z-50 mx-auto flex flex-col justify-between bg-white p-8 shadow-xl w-full';
-    let backdropStyles = 'fixed inset-0 h-[100vh] w-[100vw] overflow-y-scroll bg-[rgba(0,0,0,0.1)]';
+    let modalStyles = 'relative z-50 mx-auto flex flex-col justify-between bg-white p-8 shadow-xl w-full';
+    let backdropStyles = 'fixed inset-0 h-[100vh] w-[100vw] overflow-y-scroll ';
 
     switch (size) {
     case 'sm':
@@ -77,8 +77,13 @@ const Modal: React.FC<ModalProps> = ({size = 'md', title, okLabel, cancelLabel,
         backdropStyles += ' p-[2vmin]';
     }
 
+    const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        modal.remove();
+    };
+
     return (
-        <div className={backdropStyles}>
+        <div className={backdropStyles} id='modal-backdrop'>
+            <div className='absolute inset-0 z-0 bg-[rgba(0,0,0,0.1)]' onClick={handleBackdropClick}></div>
             <section className={modalStyles}>
                 <div>
                     {title && <Heading level={4}>{title}</Heading>}