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();