fix(modal): changing the open property no longer calls beforeClose

packages/calcite-components/src/components/modal/modal.e2e.ts

@@ -123,11 +123,12 @@ describe("calcite-modal properties", () => {
         (elm.beforeClose = (window as typeof window & Pick<typeof elm, "beforeClose">).beforeClose)
     );
     await page.waitForChanges();
-    await modal.setProperty("open", true);
+    modal.setProperty("open", true);
     await page.waitForChanges();
-    await modal.setProperty("open", false);
+    const closeButton = await page.find(`calcite-modal >>> .${CSS.close}`);
+    await closeButton.click();
     await page.waitForChanges();
-    expect(mockCallBack).toHaveBeenCalled();
+    expect(mockCallBack).toHaveBeenCalledTimes(1);
   });
 });
 

packages/calcite-components/src/components/modal/modal.tsx

@@ -94,8 +94,7 @@ export class Modal
   @Prop({ mutable: true, reflect: true }) open = false;
 
   /** Passes a function to run before the component closes. */
-  @Prop()
-  beforeClose: (el: HTMLElement) => Promise<void> = () => Promise.resolve();
+  @Prop() beforeClose: (el: HTMLCalciteModalElement) => Promise<void>;
 
   /** When `true`, disables the component's close button. */
   @Prop({ reflect: true }) closeButtonDisabled = false;
@@ -291,7 +290,7 @@ export class Modal
         aria-label={this.messages.close}
         class={CSS.close}
         key="button"
-        onClick={this.close}
+        onClick={this.handleClose}
         title={this.messages.close}
         // eslint-disable-next-line react/jsx-sort-props
         ref={(el) => (this.closeButtonEl = el)}
@@ -407,7 +406,7 @@ export class Modal
   @Listen("keydown", { target: "window" })
   handleEscape(event: KeyboardEvent): void {
     if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) {
-      this.close();
+      this.handleClose();
       event.preventDefault();
     }
   }
@@ -511,7 +510,7 @@ export class Modal
       this.openModal();
     } else {
       this.transitionEl?.classList.add(CSS.closingIdle);
-      this.close();
+      this.closeModal();
     }
   }
 
@@ -536,23 +535,28 @@ export class Modal
     }
   }
 
-  handleOutsideClose = (): void => {
+  private handleOutsideClose = (): void => {
     if (this.outsideCloseDisabled) {
       return;
     }
 
-    this.close();
+    this.handleClose();
   };
 
-  /** Close the modal, first running the `beforeClose` method */
-  close = (): Promise<void> => {
-    return this.beforeClose(this.el).then(() => {
-      this.open = false;
-      this.isOpen = false;
-      this.removeOverflowHiddenClass();
-    });
+  private handleClose = async (): Promise<void> => {
+    if (this.beforeClose) {
+      await this.beforeClose(this.el);
+    }
+
+    this.closeModal();
   };
 
+  private closeModal(): void {
+    this.open = false;
+    this.isOpen = false;
+    this.removeOverflowHiddenClass();
+  }
+
   private removeOverflowHiddenClass(): void {
     document.documentElement.classList.remove(CSS.overflowHidden);
   }