fix(modal): dismiss modal when parent element is removed from DOM

Author: ShaneK

core/src/components/modal/modal.tsx

@@ -96,6 +96,11 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private viewTransitionAnimation?: Animation;
   private resizeTimeout?: any;
 
+  // Mutation observer to watch for parent removal
+  private parentRemovalObserver?: MutationObserver;
+  // Cached original parent from before modal is moved to body during presentation
+  private cachedOriginalParent?: HTMLElement;
+
   lastFocus?: HTMLElement;
   animation?: Animation;
 
@@ -398,6 +403,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   disconnectedCallback() {
     this.triggerController.removeClickListener();
     this.cleanupViewTransitionListener();
+    this.cleanupParentRemovalObserver();
   }
 
   componentWillLoad() {
@@ -407,6 +413,11 @@ export class Modal implements ComponentInterface, OverlayInterface {
     const attributesToInherit = ['aria-label', 'role'];
     this.inheritedAttributes = inheritAttributes(el, attributesToInherit);
 
+    // Cache original parent before modal gets moved to body during presentation
+    if (el.parentNode) {
+      this.cachedOriginalParent = el.parentNode as HTMLElement;
+    }
+
     /**
      * When using a controller modal you can set attributes
      * using the htmlAttributes property. Since the above attributes
@@ -642,6 +653,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
     // Initialize view transition listener for iOS card modals
     this.initViewTransitionListener();
 
+    // Initialize parent removal observer
+    this.initParentRemovalObserver();
+
     unlock();
   }
 
@@ -847,6 +861,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
         this.gesture.destroy();
       }
       this.cleanupViewTransitionListener();
+      this.cleanupParentRemovalObserver();
     }
     this.currentBreakpoint = undefined;
     this.animation = undefined;
@@ -1150,6 +1165,58 @@ export class Modal implements ComponentInterface, OverlayInterface {
     });
   }
 
+  private initParentRemovalObserver() {
+    // Only observe if we have a cached parent and are in browser environment
+    if (typeof window === 'undefined' || !this.cachedOriginalParent) {
+      return;
+    }
+
+    // Don't observe document or fragment nodes as they can't be "removed"
+    if (this.cachedOriginalParent.nodeType === Node.DOCUMENT_NODE || this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      return;
+    }
+
+    const grandParent = this.cachedOriginalParent.parentNode;
+    if (!grandParent) {
+      return;
+    }
+
+    this.parentRemovalObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
+          // Check if our cached original parent was removed
+          const cachedParentWasRemoved = Array.from(mutation.removedNodes).some(
+            (node) => {
+              const isDirectMatch = node === this.cachedOriginalParent;
+              const isContainedMatch = this.cachedOriginalParent ? (node as HTMLElement).contains?.(this.cachedOriginalParent) : false;
+              return isDirectMatch || isContainedMatch;
+            }
+          );
+
+          // Also check if parent is no longer connected to DOM
+          const cachedParentDisconnected = this.cachedOriginalParent && !this.cachedOriginalParent.isConnected;
+
+          if (cachedParentWasRemoved || cachedParentDisconnected) {
+            this.dismiss(undefined, 'parent-removed');
+          }
+        }
+      });
+    });
+
+    // Observe with subtree to catch nested removals
+    this.parentRemovalObserver.observe(grandParent, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  private cleanupParentRemovalObserver() {
+    if (this.parentRemovalObserver) {
+      this.parentRemovalObserver.disconnect();
+      this.parentRemovalObserver = undefined;
+    }
+  }
+
   render() {
     const {
       handle,

core/src/components/modal/test/inline/index.html

@@ -22,9 +22,8 @@
         </ion-header>
 
         <ion-content class="ion-padding">
-          <button id="open-inline-modal" onclick="openModal(event)">Open Modal</button>
-
           <div id="modal-container">
+            <button id="open-inline-modal" onclick="openModal(event)">Open Modal</button>
             <ion-modal swipe-to-close="true">
               <ion-header>
                 <ion-toolbar>
@@ -34,6 +33,7 @@
               <ion-content class="ion-padding">
                 <p>This is my inline modal content!</p>
                 <button id="open-child-modal" onclick="openChildModal(event)">Open Child Modal</button>
+                <button id="remove-modal-container" onclick="removeModalContainer(event)">Remove Modal Container</button>
 
                 <ion-modal id="child-modal" swipe-to-close="true">
                   <ion-header>
@@ -46,6 +46,7 @@
                     <p>When the parent modal is dismissed, this child modal should also be dismissed automatically.</p>
                     <button id="dismiss-parent" onclick="dismissParent(event)">Dismiss Parent Modal</button>
                     <button id="dismiss-child" onclick="dismissChild(event)">Dismiss Child Modal</button>
+                    <button id="child-remove-modal-container" onclick="removeModalContainer(event)">Remove Modal Container</button>
                   </ion-content>
                 </ion-modal>
               </ion-content>
@@ -78,6 +79,14 @@
         childModal.isOpen = false;
       };
 
+      const removeModalContainer = () => {
+        const container = document.querySelector('#modal-container');
+        if (container) {
+          container.remove();
+          console.log('Modal container removed from DOM');
+        }
+      };
+
       modal.addEventListener('didDismiss', () => {
         modal.isOpen = false;
       });

core/src/components/modal/test/inline/modal.e2e.ts

@@ -122,5 +122,72 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.firstElementChild!.className)
       ).not.toContain('ion-page');
     });
+
+    test('it should dismiss modal when parent container is removed from DOM', async ({ page }) => {
+      await page.goto('/src/components/modal/test/inline', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      const modal = page.locator('ion-modal').first();
+      const modalContainer = page.locator('#modal-container');
+
+      // Open the modal
+      await page.click('#open-inline-modal');
+      await ionModalDidPresent.next();
+      await expect(modal).toBeVisible();
+
+      // Remove the modal container from DOM
+      await page.click('#remove-modal-container');
+
+      // Wait for modal to be dismissed
+      const dismissEvent = await ionModalDidDismiss.next();
+
+      // Verify the modal was dismissed with the correct role
+      expect(dismissEvent.detail.role).toBe('parent-removed');
+
+      // Verify the modal is no longer visible
+      await expect(modal).toBeHidden();
+
+      // Verify the container was actually removed
+      await expect(modalContainer).not.toBeAttached();
+    });
+
+    test('it should dismiss both parent and child modals when parent container is removed from DOM', async ({ page }) => {
+      await page.goto('/src/components/modal/test/inline', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      const parentModal = page.locator('ion-modal').first();
+      const childModal = page.locator('#child-modal');
+      const modalContainer = page.locator('#modal-container');
+
+      // Open the parent modal
+      await page.click('#open-inline-modal');
+      await ionModalDidPresent.next();
+      await expect(parentModal).toBeVisible();
+
+      // Open the child modal
+      await page.click('#open-child-modal');
+      await ionModalDidPresent.next();
+      await expect(childModal).toBeVisible();
+
+      // Remove the modal container from DOM
+      await page.click('#child-remove-modal-container');
+
+      // Wait for both modals to be dismissed
+      const firstDismissEvent = await ionModalDidDismiss.next();
+      const secondDismissEvent = await ionModalDidDismiss.next();
+
+      // Verify at least one modal was dismissed with 'parent-removed' role
+      const dismissRoles = [firstDismissEvent.detail.role, secondDismissEvent.detail.role];
+      expect(dismissRoles).toContain('parent-removed');
+
+      // Verify both modals are no longer visible
+      await expect(parentModal).toBeHidden();
+      await expect(childModal).toBeHidden();
+
+      // Verify the container was actually removed
+      await expect(modalContainer).not.toBeAttached();
+    });
   });
 });