From 31f45cdcc953b08749d9db08321fa5ec6cbe2532 Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Tue, 8 Dec 2020 13:45:24 -0700
Subject: [PATCH] fix(react): setting a ref should allow other props to be
 passed in, closes #22609

---
 .../test-app/cypress/integration/refs.spec.js | 20 +++++++
 packages/react-router/test-app/src/App.tsx    |  2 +
 .../react-router/test-app/src/pages/Main.tsx  |  3 ++
 .../test-app/src/pages/refs/Refs.tsx          | 54 +++++++++++++++++++
 .../react/src/components/createComponent.tsx  |  4 +-
 5 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-router/test-app/cypress/integration/refs.spec.js
 create mode 100644 packages/react-router/test-app/src/pages/refs/Refs.tsx

diff --git a/packages/react-router/test-app/cypress/integration/refs.spec.js b/packages/react-router/test-app/cypress/integration/refs.spec.js
new file mode 100644
index 0000000000..15881645d4
--- /dev/null
+++ b/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");
+  });
+});
diff --git a/packages/react-router/test-app/src/App.tsx b/packages/react-router/test-app/src/App.tsx
index d8a7c8600f..16ded6277b 100644
--- a/packages/react-router/test-app/src/App.tsx
+++ b/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>
   );
diff --git a/packages/react-router/test-app/src/pages/Main.tsx b/packages/react-router/test-app/src/pages/Main.tsx
index 1add9a7a4e..75b67f711a 100644
--- a/packages/react-router/test-app/src/pages/Main.tsx
+++ b/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>
diff --git a/packages/react-router/test-app/src/pages/refs/Refs.tsx b/packages/react-router/test-app/src/pages/refs/Refs.tsx
new file mode 100644
index 0000000000..7ac15c83ab
--- /dev/null
+++ b/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;
diff --git a/packages/react/src/components/createComponent.tsx b/packages/react/src/components/createComponent.tsx
index d0ce8f67db..086c94b15e 100644
--- a/packages/react/src/components/createComponent.tsx
+++ b/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);
     }