fix(react): setting a ref should allow other props to be passed in, closes #22609

packages/react-router/test-app/cypress/integration/refs.spec.js

@@ -0,0 +1,20 @@
+const port = 3000;
+
+describe("Refs", () => {
+  /*
+    This spec tests that refs and props get correctly set on ionic components
+  */
+
+  it("/refs, when ref is used on an FC, className should be added to ionic component", () => {
+    cy.visit(`http://localhost:${port}/refs`);
+    cy.ionPageVisible("refs-fc");
+    cy.get(".ref-test");
+  });
+
+
+  it("/refs/class, when ref is used on a Class, className should be added to ionic component", () => {
+    cy.visit(`http://localhost:${port}/refs/class`);
+    cy.ionPageVisible("refs-class");
+    cy.get(".ref-test");
+  });
+});

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

@@ -32,6 +32,7 @@ import ReplaceAction from './pages/replace-action/Replace';
 import TabsContext from './pages/tab-context/TabContext';
 import { OutletRef } from './pages/outlet-ref/OutletRef';
 import { SwipeToGoBack } from './pages/swipe-to-go-back/SwipToGoBack';
+import Refs from './pages/refs/Refs';
 debugger;
 const App: React.FC = () => {
   return (
@@ -48,6 +49,7 @@ const App: React.FC = () => {
         <Route path="/tab-context" component={TabsContext} />
         <Route path="/outlet-ref" component={OutletRef} />
         <Route path="/swipe-to-go-back" component={SwipeToGoBack} />
+        <Route path="/refs" component={Refs} />
       </IonReactRouter>
     </IonApp>
   );

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

@@ -52,6 +52,9 @@ const Main: React.FC<MainProps> = () => {
           <IonItem routerLink="/swipe-to-go-back">
             <IonLabel>Swipe to go back</IonLabel>
           </IonItem>
+          <IonItem routerLink="/Refs">
+            <IonLabel>Refs</IonLabel>
+          </IonItem>
         </IonList>
       </IonContent>
     </IonPage>

packages/react-router/test-app/src/pages/refs/Refs.tsx

@@ -0,0 +1,54 @@
+import React, { useRef } from "react";
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonRouterOutlet,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { Route } from "react-router";
+
+interface RefsProps {}
+
+const Refs: React.FC = () => {
+  return (
+    <IonRouterOutlet>
+      {/* <Route exact path="/home" render={() => <Home update={addRoute} />} /> */}
+      <Route exact path="/refs" component={RefsFC} />
+      <Route exact path="/refs/class" component={RefsClass} />
+    </IonRouterOutlet>
+  );
+};
+
+const RefsFC: React.FC<RefsProps> = () => {
+  const contentRef = useRef<HTMLIonContentElement>(null);
+  return (
+    <IonPage data-pageid="refs-fc">
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Refs FC</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent ref={contentRef} className="ref-test"></IonContent>
+    </IonPage>
+  );
+};
+
+class RefsClass extends React.Component {
+  ref = React.createRef<HTMLIonContentElement>();
+  render() {
+    return (
+      <IonPage data-pageid="refs-class">
+        <IonHeader>
+          <IonToolbar>
+            <IonTitle>Refs Class</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <IonContent ref={this.ref} className="ref-test"></IonContent>
+      </IonPage>
+    );
+  }
+}
+
+export default Refs;

packages/react/src/components/createComponent.tsx

@@ -14,7 +14,7 @@ import {
 } from './utils';
 
 interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
-  forwardedRef?: React.Ref<ElementType>;
+  forwardedRef?: React.RefObject<ElementType>;
   href?: string;
   routerLink?: string;
   ref?: React.Ref<any>;
@@ -46,7 +46,7 @@ export const createReactComponent = <PropType, ElementType>(
     componentDidUpdate(prevProps: IonicReactInternalProps<PropType>) {
       // Try to use the forwarded ref to get the child node.
       // Otherwise, use the one we created.
-      const node = (this.props.forwardedRef || this.ref.current!) as HTMLElement;
+      const node = (this.props.forwardedRef?.current || this.ref.current!) as HTMLElement;
       attachProps(node, this.props, prevProps);
     }