diff --git a/packages/calcite-components/src/components/sheet/sheet.e2e.ts b/packages/calcite-components/src/components/sheet/sheet.e2e.ts index 2dde28d9fc4..4ba1c1206bb 100644 --- a/packages/calcite-components/src/components/sheet/sheet.e2e.ts +++ b/packages/calcite-components/src/components/sheet/sheet.e2e.ts @@ -409,6 +409,31 @@ describe("calcite-sheet properties", () => { ]); }); + it("emits when closing on click", async () => { + const page = await newE2EPage(); + await page.setContent(html``); + const sheet = await page.find("calcite-sheet"); + + await page.waitForChanges(); + expect(await sheet.isVisible()).toBe(true); + + const beforeCloseSpy = await sheet.spyOnEvent("calciteSheetBeforeClose"); + const closeSpy = await sheet.spyOnEvent("calciteSheetClose"); + const sheetBeforeClose = page.waitForEvent("calciteSheetBeforeClose"); + const sheetClose = page.waitForEvent("calciteSheetClose"); + + const scrim = await page.find(`calcite-sheet >>> .${CSS.scrim}`); + await scrim.click(); + + await sheetBeforeClose; + await sheetClose; + + expect(beforeCloseSpy).toHaveReceivedEventTimes(1); + expect(closeSpy).toHaveReceivedEventTimes(1); + + expect(await sheet.isVisible()).toBe(false); + }); + it("emits when set to open on initial render", async () => { const page = await newProgrammaticE2EPage(); diff --git a/packages/calcite-components/src/components/sheet/sheet.tsx b/packages/calcite-components/src/components/sheet/sheet.tsx index b4f755ce8c7..6a670cd7dab 100644 --- a/packages/calcite-components/src/components/sheet/sheet.tsx +++ b/packages/calcite-components/src/components/sheet/sheet.tsx @@ -96,9 +96,9 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo onToggleOpenCloseComponent(this); if (value) { - this.openSheet(); + this.openSheet(true); } else { - this.closeSheet(); + this.closeSheet(true); } } @@ -305,11 +305,12 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo this.el.removeEventListener("calciteSheetOpen", this.openEnd); }; - private openSheet(): void { + private openSheet(ignoreOpenChange = false): void { if (this.ignoreOpenChange) { return; } + this.ignoreOpenChange = ignoreOpenChange; this.el.addEventListener("calciteSheetOpen", this.openEnd); this.open = true; this.opened = true; @@ -330,7 +331,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo this.closeSheet(); }; - private closeSheet = async (): Promise => { + private closeSheet = async (ignoreOpenChange = false): Promise => { if (this.ignoreOpenChange) { return; } @@ -349,7 +350,7 @@ export class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableCo } } - this.ignoreOpenChange = true; + this.ignoreOpenChange = ignoreOpenChange; this.open = false; this.opened = false; this.removeOverflowHiddenClass();