From be4788838ad36a8b6d041583941487f867243f19 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Sat, 12 Jul 2025 04:21:52 -0700
Subject: [PATCH 1/6] fix(modal): dismiss modal when parent element is removed
 from DOM

---
 core/src/components/modal/modal.tsx           | 67 +++++++++++++++++++
 .../components/modal/test/inline/index.html   | 13 +++-
 .../components/modal/test/inline/modal.e2e.ts | 67 +++++++++++++++++++
 3 files changed, 145 insertions(+), 2 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index e5e906204f8..33ff95ca060 100644
--- a/core/src/components/modal/modal.tsx
+++ b/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,
diff --git a/core/src/components/modal/test/inline/index.html b/core/src/components/modal/test/inline/index.html
index 2e29f756b93..dcdccbbe0aa 100644
--- a/core/src/components/modal/test/inline/index.html
+++ b/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;
       });
diff --git a/core/src/components/modal/test/inline/modal.e2e.ts b/core/src/components/modal/test/inline/modal.e2e.ts
index 35690fc2d8f..8e41c7f13ec 100644
--- a/core/src/components/modal/test/inline/modal.e2e.ts
+++ b/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();
+    });
   });
 });

From 27299f0a37e4b93af8b30c6728e08ebf45a4a158 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Sat, 12 Jul 2025 05:24:44 -0700
Subject: [PATCH 2/6] fix(modal): lint and test support

---
 core/src/components/modal/modal.tsx           | 47 ++++++++++---------
 .../components/modal/test/inline/index.html   |  8 +++-
 .../components/modal/test/inline/modal.e2e.ts |  4 +-
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 33ff95ca060..7cb0fc7fe30 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1172,7 +1172,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
     }
 
     // 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) {
+    if (
+      this.cachedOriginalParent.nodeType === Node.DOCUMENT_NODE ||
+      this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+    ) {
       return;
     }
 
@@ -1181,33 +1184,35 @@ export class Modal implements ComponentInterface, OverlayInterface {
       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) => {
+    if (typeof MutationObserver !== 'undefined') {
+      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;
+              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;
+            // 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');
+            if (cachedParentWasRemoved || cachedParentDisconnected) {
+              this.dismiss(undefined, 'parent-removed');
+            }
           }
-        }
+        });
       });
-    });
 
-    // Observe with subtree to catch nested removals
-    this.parentRemovalObserver.observe(grandParent, {
-      childList: true,
-      subtree: true,
-    });
+      // Observe with subtree to catch nested removals
+      this.parentRemovalObserver.observe(grandParent, {
+        childList: true,
+        subtree: true,
+      });
+    }
   }
 
   private cleanupParentRemovalObserver() {
diff --git a/core/src/components/modal/test/inline/index.html b/core/src/components/modal/test/inline/index.html
index dcdccbbe0aa..40a8eadb1a9 100644
--- a/core/src/components/modal/test/inline/index.html
+++ b/core/src/components/modal/test/inline/index.html
@@ -33,7 +33,9 @@
               <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>
+                <button id="remove-modal-container" onclick="removeModalContainer(event)">
+                  Remove Modal Container
+                </button>
 
                 <ion-modal id="child-modal" swipe-to-close="true">
                   <ion-header>
@@ -46,7 +48,9 @@
                     <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>
+                    <button id="child-remove-modal-container" onclick="removeModalContainer(event)">
+                      Remove Modal Container
+                    </button>
                   </ion-content>
                 </ion-modal>
               </ion-content>
diff --git a/core/src/components/modal/test/inline/modal.e2e.ts b/core/src/components/modal/test/inline/modal.e2e.ts
index 8e41c7f13ec..cc285bf2e67 100644
--- a/core/src/components/modal/test/inline/modal.e2e.ts
+++ b/core/src/components/modal/test/inline/modal.e2e.ts
@@ -152,7 +152,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(modalContainer).not.toBeAttached();
     });
 
-    test('it should dismiss both parent and child modals when parent container is removed from DOM', async ({ page }) => {
+    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');

From 15cac883516bb30c181079771a5cfc783c3e8877 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Sat, 12 Jul 2025 06:42:42 -0700
Subject: [PATCH 3/6] refactor(modal): add early guard for MutationObserver

---
 core/src/components/modal/modal.tsx | 54 +++++++++++++++--------------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 7cb0fc7fe30..590c821d7f5 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1166,6 +1166,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
   }
 
   private initParentRemovalObserver() {
+    if (typeof MutationObserver === 'undefined') {
+      return;
+    }
+
     // Only observe if we have a cached parent and are in browser environment
     if (typeof window === 'undefined' || !this.cachedOriginalParent) {
       return;
@@ -1184,35 +1188,33 @@ export class Modal implements ComponentInterface, OverlayInterface {
       return;
     }
 
-    if (typeof MutationObserver !== 'undefined') {
-      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');
-            }
+    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,
-      });
-    }
+    // Observe with subtree to catch nested removals
+    this.parentRemovalObserver.observe(grandParent, {
+      childList: true,
+      subtree: true,
+    });
   }
 
   private cleanupParentRemovalObserver() {

From 0f7fc803b6c323dfa2c5262fd41637c7df58e318 Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Sat, 12 Jul 2025 07:09:12 -0700
Subject: [PATCH 4/6] fix(modal): moving mutation observer to the DOM to deal
 with unknown numbers of grandparents being removed, causing the modal to be
 removed by nothing to observe it

---
 core/src/components/modal/modal.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 590c821d7f5..60a0f58269f 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1183,11 +1183,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
       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) {
@@ -1210,8 +1205,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
       });
     });
 
-    // Observe with subtree to catch nested removals
-    this.parentRemovalObserver.observe(grandParent, {
+    // Observe document body with subtree to catch removals at any level
+    this.parentRemovalObserver.observe(document.body, {
       childList: true,
       subtree: true,
     });

From 7376bb36664b474c5f4c1b396936c40ba21b553a Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Sun, 13 Jul 2025 11:16:46 -0700
Subject: [PATCH 5/6] test(modal): verifying a very depply nested modal will
 still be closed when a containing component is removed

---
 .../components/modal/test/inline/modal.e2e.ts | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/core/src/components/modal/test/inline/modal.e2e.ts b/core/src/components/modal/test/inline/modal.e2e.ts
index cc285bf2e67..2f6ef95070a 100644
--- a/core/src/components/modal/test/inline/modal.e2e.ts
+++ b/core/src/components/modal/test/inline/modal.e2e.ts
@@ -191,5 +191,83 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       // Verify the container was actually removed
       await expect(modalContainer).not.toBeAttached();
     });
+
+    test('it should dismiss modals when top-level ancestor is removed', async ({ page }) => {
+      // We need to make sure we can close a modal when a much higher
+      // element is removed from the DOM. This will be a common
+      // use case in frameworks like Angular and React, where an entire
+      // page container for much more than the modal might be swapped out.
+      await page.setContent(
+        `
+        <ion-app>
+          <div class="ion-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Top Level Removal Test</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding">
+              <div id="top-level-container">
+                <div id="nested-container">
+                  <button id="open-nested-modal">Open Nested Modal</button>
+                  <ion-modal id="nested-modal">
+                    <ion-header>
+                      <ion-toolbar>
+                        <ion-title>Nested Modal</ion-title>
+                      </ion-toolbar>
+                    </ion-header>
+                    <ion-content class="ion-padding">
+                      <p>This modal's original parent is deeply nested</p>
+                      <button id="remove-top-level">Remove Top Level Container</button>
+                    </ion-content>
+                  </ion-modal>
+                </div>
+              </div>
+            </ion-content>
+          </div>
+        </ion-app>
+
+        <script>
+          const nestedModal = document.querySelector('#nested-modal');
+          nestedModal.presentingElement = document.querySelector('.ion-page');
+
+          document.getElementById('open-nested-modal').addEventListener('click', () => {
+            nestedModal.isOpen = true;
+          });
+
+          document.getElementById('remove-top-level').addEventListener('click', () => {
+            document.querySelector('#top-level-container').remove();
+          });
+        </script>
+        `,
+        config
+      );
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      const nestedModal = page.locator('#nested-modal');
+      const topLevelContainer = page.locator('#top-level-container');
+
+      // Open the nested modal
+      await page.click('#open-nested-modal');
+      await ionModalDidPresent.next();
+      await expect(nestedModal).toBeVisible();
+
+      // Remove the top-level container
+      await page.click('#remove-top-level');
+
+      // 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(nestedModal).toBeHidden();
+
+      // Verify the container was actually removed
+      await expect(topLevelContainer).not.toBeAttached();
+    });
   });
 });

From ed19c14192db6ff70f29f8b94716c60bf4f8059f Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Sun, 13 Jul 2025 13:47:27 -0700
Subject: [PATCH 6/6] fix(modal): release cached parent when it's removed from
 DOM to prevent a leak

---
 core/src/components/modal/modal.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 60a0f58269f..7843a479611 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1200,6 +1200,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
           if (cachedParentWasRemoved || cachedParentDisconnected) {
             this.dismiss(undefined, 'parent-removed');
+            // Release the reference to the cached original parent
+            // so we don't have a memory leak
+            this.cachedOriginalParent = undefined;
           }
         }
       });
@@ -1213,10 +1216,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
   }
 
   private cleanupParentRemovalObserver() {
-    if (this.parentRemovalObserver) {
-      this.parentRemovalObserver.disconnect();
-      this.parentRemovalObserver = undefined;
-    }
+    this.parentRemovalObserver?.disconnect();
+    this.parentRemovalObserver = undefined;
   }
 
   render() {