fix(core/modal): fires 2 events on closing (#1489)

Co-authored-by: Daniel Leroux <[email protected]>

.changeset/breezy-hotels-tap.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/modal): duplicate event firing

packages/core/src/components/modal/modal.tsx

@@ -182,6 +182,10 @@ export class Modal {
    */
   @Method()
   async dismissModal<T = any>(reason?: T) {
+    if (!this.modalVisible) {
+      return;
+    }
+
     let allowDismiss = true;
 
     if (this.beforeDismiss !== undefined) {
@@ -213,7 +217,12 @@ export class Modal {
    */
   @Method()
   async closeModal<T = any>(reason: T) {
+    if (!this.modalVisible) {
+      return;
+    }
+
     this.slideOutModal(() => {
+      this.modalVisible = false;
       this.dialog.close(
         JSON.stringify(
           {

packages/core/src/components/modal/test/modal.ct.ts

@@ -8,10 +8,12 @@
  */
 import { expect } from '@playwright/test';
 import { test } from '@utils/test';
+import { ModalInstance, showModal } from './../../utils/modal';
 
 declare global {
   interface Window {
-    showModal: any;
+    showModal: typeof showModal;
+    __counter: number;
   }
 }
 
@@ -149,3 +151,55 @@ test.describe('closeOnBackdropClick = true', () => {
     await expect(page.locator('ix-modal dialog')).toBeVisible();
   });
 });
+
+test('emits one event on close', async ({ mount, page }) => {
+  await mount(``);
+
+  await page.evaluate(() => {
+    return new Promise<void>((resolve) => {
+      const script = document.createElement('script');
+      script.type = 'module';
+      script.innerHTML = `
+        import * as ix from 'http://127.0.0.1:8080/www/build/index.esm.js';
+        window.showModal = ix.showModal;
+      `;
+      document.body.appendChild(script);
+      resolve();
+    });
+  });
+
+  await page.waitForTimeout(1000);
+
+  await page.evaluate(() => {
+    const elm = document.createElement('ix-modal');
+    elm.innerHTML = `
+      <ix-modal-header>Title</ix-modal-header>
+      <ix-modal-content>Content</ix-modal-header>
+    `;
+
+    window
+      .showModal({
+        content: elm,
+        // Disable animation to get the direct animation end callback
+        animation: false,
+      })
+      .then((instance: ModalInstance<unknown>) => {
+        instance.onDismiss.on(() => {
+          const counter = window.__counter;
+          if (counter) {
+            window.__counter = counter + 1;
+          } else {
+            window.__counter = 1;
+          }
+        });
+      });
+  });
+  const dialog = page.locator('ix-modal dialog');
+  await expect(dialog).toBeVisible();
+  const iconButton = page.locator('ix-icon-button');
+
+  await iconButton.click();
+  await expect(dialog).not.toBeVisible();
+
+  expect(await page.evaluate(() => window.__counter)).toBe(1);
+});