fix(dialog): fix nested dialog propagation problem (#847)

This PR fixes the propagation issue during close in nested dialogs

Closes #342

Co-authored-by: Bahar Yılmaz <[email protected]>

Author: BaharYilmaz

src/components/dialog/bl-dialog.test.ts

@@ -208,6 +208,26 @@ describe("bl-dialog", () => {
       await resetMouse();
     });
 
+    it("should prevent parent dialog from closing when the child dialog is closed", async () => {
+      const dialog = await fixture<typeOfBlDialog>(html`<bl-dialog id="parent" open>
+        <bl-dialog id="child" open>
+          Child dialog
+        </bl-dialog>
+      </bl-dialog>`);
+
+      const childDialog =  dialog.querySelector("bl-dialog") as typeOfBlDialog;
+      const childDialogCloseBtn = childDialog?.shadowRoot?.querySelector("bl-button");
+
+      expect(dialog.open).to.equal(true);
+
+      childDialogCloseBtn?.click();
+
+      setTimeout(() => {
+        expect(dialog.open).to.equal(true);
+        expect(childDialog.open).to.equal(false);
+      });
+    });
+
     it("should add shadow to footer when the content is too long", async () => {
       window.innerWidth = 400;
 

src/components/dialog/bl-dialog.ts

@@ -111,7 +111,7 @@ export default class BlDialog extends LitElement {
       this.content?.addEventListener("scroll", this.toggleFooterShadow);
     } else {
       this.dialog?.close?.();
-      this.onClose({ isOpen: false });
+      this.onClose({ isOpen: false }, { bubbles: false });
       document.body.style.overflow = "auto";
       window?.removeEventListener("keydown", this.onKeydown);
       window?.removeEventListener("resize", this.toggleFooterShadow);