diff --git a/.changeset/weak-crabs-battle.md b/.changeset/weak-crabs-battle.md
new file mode 100644
index 000000000..782e728b1
--- /dev/null
+++ b/.changeset/weak-crabs-battle.md
@@ -0,0 +1,5 @@
+---
+"@getflip/swirl-components": patch
+---
+
+Stop modelClose and modelOpen events of swirl-pdf-reader from bubbling
diff --git a/packages/swirl-components/src/components/swirl-pdf-reader/swirl-pdf-reader.spec.tsx b/packages/swirl-components/src/components/swirl-pdf-reader/swirl-pdf-reader.spec.tsx
index a18bc5a1e..7fe1475e0 100644
--- a/packages/swirl-components/src/components/swirl-pdf-reader/swirl-pdf-reader.spec.tsx
+++ b/packages/swirl-components/src/components/swirl-pdf-reader/swirl-pdf-reader.spec.tsx
@@ -118,6 +118,45 @@ describe("swirl-pdf-reader", () => {
`);
});
+ it("emits modalOpen event that does not bubble when opened", async () => {
+ const page = await newSpecPage({
+ components: [SwirlPdfReader],
+ html: ``,
+ });
+
+ const modalOpenSpy = jest.fn();
+
+ page.root.addEventListener("modalOpen", modalOpenSpy);
+
+ await page.root.open();
+ await page.waitForChanges();
+
+ expect(modalOpenSpy).toHaveBeenCalledTimes(1);
+ expect(modalOpenSpy.mock.calls[0][0].bubbles).toBe(false);
+ });
+
+ it("emits modalClose event that does not bubble when closed", async () => {
+ const page = await newSpecPage({
+ components: [SwirlPdfReader],
+ html: ``,
+ });
+
+ const modalCloseSpy = jest.fn();
+
+ page.root.addEventListener("modalClose", modalCloseSpy);
+
+ await page.root.open();
+ await page.waitForChanges();
+
+ // Simulate the dialog's close event
+ const dialog = page.root.shadowRoot.querySelector("dialog");
+ dialog.dispatchEvent(new Event("close"));
+ await page.waitForChanges();
+
+ expect(modalCloseSpy).toHaveBeenCalledTimes(1);
+ expect(modalCloseSpy.mock.calls[0][0].bubbles).toBe(false);
+ });
+
it("allows to zoom", async () => {
const page = await newSpecPage({
components: [SwirlPdfReader],
diff --git a/packages/swirl-components/src/components/swirl-pdf-reader/swirl-pdf-reader.tsx b/packages/swirl-components/src/components/swirl-pdf-reader/swirl-pdf-reader.tsx
index 51dce33c2..ef242a69c 100644
--- a/packages/swirl-components/src/components/swirl-pdf-reader/swirl-pdf-reader.tsx
+++ b/packages/swirl-components/src/components/swirl-pdf-reader/swirl-pdf-reader.tsx
@@ -11,9 +11,12 @@ import {
State,
Watch,
} from "@stencil/core";
-import { disableBodyScroll, enableBodyScroll } from "../../utils/body-scroll-lock";
import classnames from "classnames";
import { isMobileViewport, querySelectorAllDeep } from "../../utils";
+import {
+ disableBodyScroll,
+ enableBodyScroll,
+} from "../../utils/body-scroll-lock";
import {
SwirlFileViewerPdfViewMode,
SwirlFileViewerPdfZoom,
@@ -52,8 +55,8 @@ export class SwirlPdfReader {
@Prop() zoomSelectLabel?: string = "Select zoom";
@Prop() skipNativeDownload?: boolean = false;
- @Event() modalClose: EventEmitter;
- @Event() modalOpen: EventEmitter;
+ @Event({ bubbles: false }) modalClose: EventEmitter;
+ @Event({ bubbles: false }) modalOpen: EventEmitter;
@State() active = false;
@State() closing = false;