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;