fix(react): Nav unmounts component while invoking popTo or popToRoot (#27821)

Issue number: Resolves #27798

---------

## What is the current behavior

React IonNav component's views are missing keys, leading to unnecessary
duplicate mounting of components.


## What is the new behavior?
- Adds key to views of React IonNav component.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: Sean Perkins <[email protected]>

Author: 2 people

packages/react/src/framework-delegate.tsx

@@ -1,6 +1,8 @@
 import type { FrameworkDelegate } from '@ionic/core/components';
 import { createPortal } from 'react-dom';
 
+import { generateId } from './utils/generateId';
+
 // TODO(FW-2959): types
 
 type ReactComponent = (props?: any) => JSX.Element;
@@ -10,6 +12,9 @@ export const ReactDelegate = (
   removeView: (view: React.ReactElement) => void
 ): FrameworkDelegate => {
   const refMap = new WeakMap<HTMLElement, React.ReactElement>();
+  const reactDelegateId = `react-delegate-${generateId()}`;
+  // Incrementing counter to generate unique keys for each view
+  let id = 0;
 
   const attachViewToDom = async (
     parentElement: HTMLElement,
@@ -22,7 +27,8 @@ export const ReactDelegate = (
     parentElement.appendChild(div);
 
     const componentWithProps = component(propsOrDataObj);
-    const hostComponent = createPortal(componentWithProps, div);
+    const key = `${reactDelegateId}-${id++}`;
+    const hostComponent = createPortal(componentWithProps, div, key);
 
     refMap.set(div, hostComponent);
 

packages/react/test/base/src/pages/navigation/NavComponent.tsx

@@ -11,7 +11,7 @@ import {
   IonBackButton,
   IonPage,
 } from '@ionic/react';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 const PageOne = ({
   nav,
@@ -39,7 +39,10 @@ const PageOne = ({
         <IonNavLink
           routerDirection="forward"
           component={PageTwo}
-          componentProps={{ someValue: 'Hello' }}
+          componentProps={{
+            someValue: 'Hello',
+            nav: nav,
+          }}
         >
           <IonButton>Go to Page Two</IonButton>
         </IonNavLink>
@@ -48,7 +51,7 @@ const PageOne = ({
   );
 };
 
-const PageTwo = (props?: { someValue: string }) => {
+const PageTwo = ({ nav, ...rest }: { someValue: string; nav: React.MutableRefObject<HTMLIonNavElement> }) => {
   return (
     <>
       <IonHeader>
@@ -61,16 +64,21 @@ const PageTwo = (props?: { someValue: string }) => {
       </IonHeader>
       <IonContent id="pageTwoContent">
         <IonLabel>Page two content</IonLabel>
-        <div id="pageTwoProps">{JSON.stringify(props)}</div>
-        <IonNavLink routerDirection="forward" component={PageThree}>
+        <div id="pageTwoProps">{JSON.stringify(rest)}</div>
+        <IonNavLink routerDirection="forward" component={() => <PageThree nav={nav} />}>
           <IonButton>Go to Page Three</IonButton>
         </IonNavLink>
       </IonContent>
     </>
   );
 };
 
-const PageThree = () => {
+const PageThree = ({ nav }: { nav: React.MutableRefObject<HTMLIonNavElement> }) => {
+  useEffect(() => {
+    return () => {
+      window.dispatchEvent(new CustomEvent('pageThreeUnmounted'));
+    };
+  });
   return (
     <>
       <IonHeader>
@@ -81,8 +89,9 @@ const PageThree = () => {
           </IonButtons>
         </IonToolbar>
       </IonHeader>
-      <IonContent>
+      <IonContent id="pageThreeContent">
         <IonLabel>Page three content</IonLabel>
+        <IonButton onClick={() => nav.current.popToRoot()}>popToRoot</IonButton>
       </IonContent>
     </>
   );

packages/react/test/base/tests/e2e/specs/navigation/IonNav.cy.ts

@@ -47,4 +47,23 @@ describe('IonNav', () => {
     cy.get('#pageTwoProps').should('have.text', '{"someValue":"Hello"}');
   });
 
+  it('should unmount pages when popping to root', () => {
+    // Issue: https://github.com/ionic-team/ionic-framework/issues/27798
+
+    cy.contains('Go to Page Two').click();
+    cy.get('#pageTwoContent').should('be.visible');
+
+    cy.contains('Go to Page Three').click();
+    cy.get('#pageThreeContent').should('be.visible');
+
+    cy.window().then((window) => {
+      window.addEventListener('pageThreeUnmounted', cy.stub().as('pageThreeUnmounted'));
+    });
+
+    cy.get('ion-button').contains('popToRoot').click();
+    cy.get('#pageThreeContent').should('not.exist');
+
+    cy.get('@pageThreeUnmounted').should('have.been.calledOnce');
+  });
+
 });