From 238771826670d7ee4f90090c9fb4dbdfd5ca68f6 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Tue, 30 May 2023 15:31:13 +0200
Subject: [PATCH] Fixed modal scroll bug in AdminX Design System

refs. https://github.com/TryGhost/Team/issues/3318
---
 ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 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 e6e3ee2604..8de35bbe83 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
@@ -76,13 +76,15 @@ const Modal: React.FC<ModalProps> = ({size = 'md', title, okLabel, cancelLabel,
         break;
     }
 
-    const handleBackdropClick = () => {
-        modal.remove();
+    const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {        
+        if (e.target === e.currentTarget) {
+            modal.remove();
+        }
     };
 
     return (
-        <div className={backdropStyles} id='modal-backdrop'>
-            <div className='fixed inset-0 z-0 bg-[rgba(0,0,0,0.1)]' onClick={handleBackdropClick}></div>
+        <div className={backdropStyles} id='modal-backdrop' onClick={handleBackdropClick}>
+            <div className='pointer-events-none fixed inset-0 z-0 bg-[rgba(0,0,0,0.1)]'></div>
             <section className={modalStyles}>
                 <div>
                     {title && <Heading level={4}>{title}</Heading>}