fix(sheet): calciteSheetClose should emit on scrim click.

Esri · Sep 5, 2023 · 9797977 · 9797977
1 parent 59f1c31
commit 9797977
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git 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`<calcite-sheet open></calcite-sheet>`);
+      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
@@ -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<void> => {
+  private closeSheet = async (ignoreOpenChange = false): Promise<void> => {
     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();