fix(react): inline overlays dismiss when parent component unmounts (#26245)

Resolves #25775, #26185

packages/react-router/test-app/src/App.tsx

@@ -37,6 +37,7 @@ import DynamicIonpageClassnames from './pages/dynamic-ionpage-classnames/Dynamic
 import Tabs from './pages/tabs/Tabs';
 import TabsSecondary from './pages/tabs/TabsSecondary';
 import Params from './pages/params/Params';
+import Overlays from './pages/overlays/Overlays';
 
 setupIonicReact();
 
@@ -60,6 +61,7 @@ const App: React.FC = () => {
           <Route path="/tabs" component={Tabs} />
           <Route path="/tabs-secondary" component={TabsSecondary} />
           <Route path="/refs" component={Refs} />
+          <Route path="/overlays" component={Overlays} />
           <Route path="/params/:id" component={Params} />
         </IonRouterOutlet>
       </IonReactRouter>

packages/react-router/test-app/src/pages/Main.tsx

@@ -55,9 +55,12 @@ const Main: React.FC<MainProps> = () => {
           <IonItem routerLink="/dynamic-ionpage-classnames">
             <IonLabel>Dynamic IonPage Classnames</IonLabel>
           </IonItem>
-          <IonItem routerLink="/Refs">
+          <IonItem routerLink="/refs">
             <IonLabel>Refs</IonLabel>
           </IonItem>
+          <IonItem routerLink="/overlays">
+            <IonLabel>Overlays</IonLabel>
+          </IonItem>
           <IonItem routerLink="/tabs" id="go-to-tabs">
             <IonLabel>Tabs</IonLabel>
           </IonItem>

packages/react-router/test-app/src/pages/overlays/Overlays.tsx

@@ -0,0 +1,41 @@
+import { IonButton, IonContent, IonModal } from '@ionic/react';
+import { useState } from 'react';
+import { useHistory } from 'react-router';
+
+const Overlays: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const history = useHistory();
+
+  const goBack = () => history.goBack();
+  const replace = () => history.replace('/');
+  const push = () => history.push('/');
+
+  return (
+    <>
+      <IonButton id="openModal" onClick={() => setIsOpen(true)}>
+        Open Modal
+      </IonButton>
+      <IonModal
+        isOpen={isOpen}
+        onDidDismiss={() => {
+          setIsOpen(false);
+        }}
+      >
+        <IonContent>
+          <IonButton id="goBack" onClick={goBack}>
+            Go Back
+          </IonButton>
+          <IonButton id="replace" onClick={replace}>
+            Replace
+          </IonButton>
+          <IonButton id="push" onClick={push}>
+            Push
+          </IonButton>
+        </IonContent>
+      </IonModal>
+    </>
+  );
+};
+
+export default Overlays;

packages/react-router/test-app/tests/e2e/specs/overlays.cy.js

@@ -0,0 +1,41 @@
+const port = 3000;
+
+describe('Overlays', () => {
+  it('should remove the overlay when going back to the previous route', () => {
+    // Requires navigation history to perform a pop
+    cy.visit(`http://localhost:${port}`);
+    cy.visit(`http://localhost:${port}/overlays`);
+
+    cy.get('#openModal').click();
+
+    cy.get('ion-modal').should('exist');
+
+    cy.get('#goBack').click();
+
+    cy.get('ion-modal').should('not.exist');
+  });
+
+  it('should remove the overlay when pushing to a new route', () => {
+    cy.visit(`http://localhost:${port}/overlays`);
+
+    cy.get('#openModal').click();
+
+    cy.get('ion-modal').should('exist');
+
+    cy.get('#push').click();
+
+    cy.get('ion-modal').should('not.exist');
+  });
+
+  it('should remove the overlay when replacing the route', () => {
+    cy.visit(`http://localhost:${port}/overlays`);
+
+    cy.get('#openModal').click();
+
+    cy.get('ion-modal').should('exist');
+
+    cy.get('#replace').click();
+
+    cy.get('ion-modal').should('not.exist');
+  });
+});