fix(react): can assign ref to IonNav (#25653)

Resolves #25652
ionic-team · Jul 20, 2022 · 041de9e · 041de9e
1 parent 7be2d80
commit 041de9e
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 5 deletions.
diff --git a/packages/react/src/components/navigation/IonNav.tsx b/packages/react/src/components/navigation/IonNav.tsx
@@ -4,13 +4,18 @@ import React, { useState } from 'react';
 
 import { ReactDelegate } from '../../framework-delegate';
 import { createReactComponent } from '../react-component-lib';
+import { createForwardRef } from '../utils';
 
 const IonNavInner = createReactComponent<
   JSX.IonNav & { delegate: FrameworkDelegate },
   HTMLIonNavElement
 >('ion-nav', undefined, undefined, defineCustomElement);
 
-export const IonNav: React.FC<JSX.IonNav> = ({ children, ...restOfProps }) => {
+type IonNavProps = JSX.IonNav & {
+  forwardedRef?: React.ForwardedRef<HTMLIonNavElement>;
+};
+
+const IonNavInternal: React.FC<IonNavProps> = ({ children, forwardedRef, ...restOfProps }) => {
   const [views, setViews] = useState<React.ReactElement[]>([]);
 
   /**
@@ -23,8 +28,10 @@ export const IonNav: React.FC<JSX.IonNav> = ({ children, ...restOfProps }) => {
   const delegate = ReactDelegate(addView, removeView);
 
   return (
-    <IonNavInner delegate={delegate} {...restOfProps}>
+    <IonNavInner delegate={delegate} ref={forwardedRef} {...restOfProps}>
       {views}
     </IonNavInner>
   );
 };
+
+export const IonNav = createForwardRef<IonNavProps, HTMLIonNavElement>(IonNavInternal, 'IonNav');
diff --git a/packages/react/test-app/cypress/integration/navigation/IonNav.spec.ts b/packages/react/test-app/cypress/integration/navigation/IonNav.spec.ts
@@ -7,6 +7,10 @@ describe('IonNav', () => {
     cy.get('ion-nav').contains('Page one content');
   });
 
+  it('should have a ref defined', () => {
+    cy.get('#navRef').should('have.text', 'Nav ref is defined: true');
+  });
+
   it('should push a page', () => {
     cy.get('ion-button').contains('Go to Page Two').click();
     cy.get('#pageTwoContent').should('be.visible');

diff --git a/packages/react/test-app/src/pages/navigation/NavComponent.tsx b/packages/react/test-app/src/pages/navigation/NavComponent.tsx
@@ -11,9 +11,17 @@ import {
   IonBackButton,
   IonPage,
 } from '@ionic/react';
-import React from 'react';
+import React, { useRef } from 'react';
 
-const PageOne = (props: { someString: string; someNumber: number; someBoolean: boolean }) => {
+const PageOne = ({
+  nav,
+  ...restOfProps
+}: {
+  someString: string;
+  someNumber: number;
+  someBoolean: boolean;
+  nav: React.MutableRefObject<HTMLIonNavElement>;
+}) => {
   return (
     <>
       <IonHeader>
@@ -26,7 +34,8 @@ const PageOne = (props: { someString: string; someNumber: number; someBoolean: b
       </IonHeader>
       <IonContent id="pageOneContent">
         <IonLabel>Page one content</IonLabel>
-        <div id="pageOneProps">{JSON.stringify(props)}</div>
+        <div id="pageOneProps">{JSON.stringify(restOfProps)}</div>
+        <div id="navRef">Nav ref is defined: {nav.current !== null ? 'true' : 'false'}</div>
         <IonNavLink
           routerDirection="forward"
           component={PageTwo}
@@ -80,14 +89,17 @@ const PageThree = () => {
 };
 
 const NavComponent: React.FC = () => {
+  const ref = useRef<any>();
   return (
     <IonPage>
       <IonNav
+        ref={ref}
         root={PageOne}
         rootParams={{
           someString: 'Hello',
           someNumber: 3,
           someBoolean: true,
+          nav: ref,
         }}
       />
     </IonPage>