fix: Forward Refs in React SDK HOC (#862)

DevCycleHQ · May 22, 2024 · c2d5ad1 · c2d5ad1
1 parent aee5894
commit c2d5ad1
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/.github/workflows/nx-affected-e2e.yml b/.github/workflows/nx-affected-e2e.yml
@@ -27,6 +27,7 @@ jobs:
               run: yarn affected:e2e
               env:
                 E2E_NEXTJS_SERVER_KEY: ${{ secrets.E2E_NEXTJS_SERVER_KEY }}
+                NEXT_PUBLIC_E2E_NEXTJS_KEY: ${{ secrets.NEXT_PUBLIC_E2E_NEXTJS_CLIENT_KEY }}
                 NEXT_PUBLIC_E2E_NEXTJS_CLIENT_KEY: ${{ secrets.NEXT_PUBLIC_E2E_NEXTJS_CLIENT_KEY }}
                 DVC_E2E_SERVER_SDK_KEY: ${{ secrets.DVC_E2E_SERVER_SDK_KEY }}
             - name: Upload Playwright Report

diff --git a/sdk/react/src/withDevCycleProvider.tsx b/sdk/react/src/withDevCycleProvider.tsx
@@ -1,25 +1,32 @@
 import { ProviderConfig } from './types'
-import React from 'react'
+import React, {
+    forwardRef,
+    ForwardRefExoticComponent,
+    PropsWithoutRef,
+    RefAttributes,
+} from 'react'
 import hoistNonReactStatics from 'hoist-non-react-statics'
 import { DevCycleProvider } from './DevCycleProvider'
 
-export function withDevCycleProvider<T extends object>(
-    config: ProviderConfig,
-): (WrappedComponent: React.ComponentType<T>) => React.ComponentType<T> {
-    return (WrappedComponent) => {
-        const HoistedComponent = (props: T) => {
+export const withDevCycleProvider =
+    <T extends object>(config: ProviderConfig) =>
+    (
+        WrappedComponent: React.ComponentType<T>,
+    ): ForwardRefExoticComponent<
+        PropsWithoutRef<T> & RefAttributes<unknown>
+    > => {
+        const HoistedComponent = forwardRef((props: T, ref) => {
             return (
                 <DevCycleProvider config={config}>
-                    <WrappedComponent {...props} />
+                    <WrappedComponent {...props} ref={ref} />
                 </DevCycleProvider>
             )
-        }
+        })
 
         hoistNonReactStatics(HoistedComponent, WrappedComponent)
 
         return HoistedComponent
     }
-}
 
 /**
  * @deprecated Use withDevCycleProvider instead