From d8367e3752333985d263bad0e025176a5e86934c Mon Sep 17 00:00:00 2001
From: gavhuang <47684670+gavhuang@users.noreply.github.com>
Date: Mon, 17 Jul 2023 12:53:03 -0400
Subject: [PATCH 1/3] Move logic for closing dialog kit on outside click

---
 .../playbook/pb_dialog/dialogHelper.js        | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js b/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js
index 50750caf5a..dec0a87b29 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js
+++ b/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js
@@ -1,6 +1,7 @@
 const dialogHelper = () => {
   const openTrigger = document.querySelectorAll("[data-open-dialog]");
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+  const dialogs = document.querySelectorAll(".pb_dialog_rails")
 
   openTrigger.forEach((open) => {
     open.addEventListener("click", () => {
@@ -8,21 +9,6 @@ const dialogHelper = () => {
       var targetDialog = document.getElementById(openTriggerData)
       if (targetDialog.open) return;
       targetDialog.showModal();
-
-      //the following allows you to close dialog by clicking on overlay
-      targetDialog.addEventListener('click',((event) => {
-        var dialogContainerData = targetDialog.parentElement.dataset
-         if (dialogContainerData.overlayClick === "overlay_close") return;
-          let rect = event.target.getBoundingClientRect();
-                if (rect.left > event.clientX ||
-              rect.right < event.clientX ||
-              rect.top > event.clientY ||
-              rect.bottom < event.clientY
-          ) {
-              targetDialog.close();
-          }
-        })
-      );
     });
   });
 
@@ -32,6 +18,21 @@ const dialogHelper = () => {
       document.getElementById(closeTriggerData).close();
     });
   });
+
+  // Close dialog box on outside click
+  dialogs.forEach((dialogElement) => {
+    dialogElement.addEventListener("click", (event) => {
+      const dialogParentDataset = dialogElement.parentElement.dataset
+      if (dialogParentDataset.overlayClick === "overlay_close") return
+
+      const clickedOutsideDialogBox = event.target.classList.contains("pb_dialog_rails")
+      const closeDialog = () => dialogElement.close()
+
+      if (clickedOutsideDialogBox) {
+        closeDialog()
+      }
+    })
+  })
 };
 
 export default dialogHelper;

From b5fbd5d4c3906dd1142a6d2d1e37f449e887e83d Mon Sep 17 00:00:00 2001
From: gavhuang <47684670+gavhuang@users.noreply.github.com>
Date: Mon, 17 Jul 2023 12:54:53 -0400
Subject: [PATCH 2/3] Update function

---
 playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js b/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js
index dec0a87b29..3d12b1f52f 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js
+++ b/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js
@@ -26,10 +26,9 @@ const dialogHelper = () => {
       if (dialogParentDataset.overlayClick === "overlay_close") return
 
       const clickedOutsideDialogBox = event.target.classList.contains("pb_dialog_rails")
-      const closeDialog = () => dialogElement.close()
 
       if (clickedOutsideDialogBox) {
-        closeDialog()
+        dialogElement.close()
       }
     })
   })

From 7055d6e374c7b6276c21536586507e85abea270e Mon Sep 17 00:00:00 2001
From: gavhuang <47684670+gavhuang@users.noreply.github.com>
Date: Tue, 18 Jul 2023 14:21:11 -0400
Subject: [PATCH 3/3] Stop click event propagation for nested dialogs

---
 playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js b/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js
index 3d12b1f52f..5bad250961 100644
--- a/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js
+++ b/playbook/app/pb_kits/playbook/pb_dialog/dialogHelper.js
@@ -29,6 +29,7 @@ const dialogHelper = () => {
 
       if (clickedOutsideDialogBox) {
         dialogElement.close()
+        event.stopPropagation()
       }
     })
   })