fix(modal): closed in Storybook on window location change

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

@@ -1,10 +1,9 @@
 import type { OdsModalAttribute } from './interfaces/attributes';
 import { ODS_THEME_COLOR_INTENT, ODS_THEME_TYPOGRAPHY_SIZE } from '@ovhcloud/ods-common-theming';
-import { Component, Element, Host, Method, Prop, h } from '@stencil/core';
+import { Component, Element, Host, Method, Prop, Watch, h } from '@stencil/core';
 import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
 import { ODS_ICON_NAME, ODS_ICON_SIZE } from '@ovhcloud/ods-component-icon';
 import { ODS_TEXT_LEVEL } from '@ovhcloud/ods-component-text';
-import { OdsModalController } from './core/controller';
 import { OdsModalMethod } from './interfaces/methods';
 
 /**
@@ -16,7 +15,6 @@ import { OdsModalMethod } from './interfaces/methods';
   shadow: true
 })
 export class OsdsModal implements OdsModalAttribute, OdsModalMethod {
-  controller: OdsModalController = new OdsModalController(this);
   @Element() el!: HTMLElement;
 
   /** @see OdsModalAttributes.color */
@@ -36,31 +34,35 @@ export class OsdsModal implements OdsModalAttribute, OdsModalMethod {
    */
   @Method()
   async close(): Promise<void> {
-    this.controller.close();
+    this.masked = true;
   }
 
   /**
    * @see OdsModalMethods.open
    */
   @Method()
   async open(): Promise<void> {
-    this.controller.open();
+    this.masked = false;
   }
 
-  componentWillRender(): void {
-    document.body.appendChild(this.el);
+  @Watch('masked')
+  watchOpenedStateHandler(masked: boolean) {
     const directChildren = Array.from(document.body.children);
-    for (const child of directChildren) {
-      if (child !== this.el && child.nodeName !== 'SCRIPT') {
-        if (!this.masked) {
-          child.setAttribute('inert', '');
-        } else {
-          child.removeAttribute('inert');
-        }
+    const filteredChildren = directChildren.filter(child => child !== this.el && child.nodeName !== 'SCRIPT');
+
+    for (const child of filteredChildren) {
+      if (!masked) {
+        child.setAttribute('inert', '');
+      } else {
+        child.removeAttribute('inert');
       }
     }
   }
 
+  componentWillLoad(): void {
+    document.body.appendChild(this.el);
+  }
+
   render() {
 
     const {

packages/components/modal/src/docs/osds-modal/usage.mdx

@@ -5,7 +5,22 @@ import GenericStyle from '@ovhcloud/ods-common-core/docs/generic-style.mdx';
 ## Usage
 
 ### Default
-<osds-modal>Modal</osds-modal>
+
+export const buttonTrigger = () => {
+  setTimeout(() => {
+    const toggleModal = document.getElementById('toggle-modal');
+    const modal = document.getElementById('modal-doc');
+    toggleModal.addEventListener('click', () => {
+      modal.open();
+    });
+  }, 0);
+};
+
+<osds-button id="toggle-modal">Toggle modal</osds-button>
+
+<osds-modal id="modal-doc" masked>Modal</osds-modal>
+
+<>{ buttonTrigger() }</>
 
 ```html
 <osds-modal>Modal</osds-modal>

packages/storybook/stories/components/modal/modal.web-components.stories.ts

@@ -59,6 +59,7 @@ const TemplateDefault = (args:any) => {
     const modal = document.querySelector('osds-modal');
     if (modal) {
       modal.open();
+      locationChangeTrigger();
     }
   }
 
@@ -69,9 +70,27 @@ const TemplateDefault = (args:any) => {
     }
   }
 
+  const locationChangeTrigger = () => {
+    setTimeout(() => {
+      let prevUrl = window.location.href;
+      const interval = setInterval(() => {
+        const currUrl = window.location.href;
+        if (currUrl !== prevUrl) {
+          prevUrl = currUrl;
+          const modals = document.getElementsByTagName('osds-modal');
+          for (let i = 0; i < modals.length; i++) {
+            modals[i].close();
+          }
+          clearInterval(interval);
+        }
+      }, 100);
+    }, 0);
+  };
+
   return html`
     <button @click=${handleOpenModal}>Trigger "open()"</button>
     <button @click=${handleCloseModal}>Trigger "close()"</button>
+    ${locationChangeTrigger()}
 
     <osds-modal id="my-modal" ...=${getTagAttributes(args)}>
       ${unsafeHTML(args.content)}