diff --git a/src/components/connect.tsx b/src/components/connect.tsx
index fc096d918..774c8f3f7 100644
--- a/src/components/connect.tsx
+++ b/src/components/connect.tsx
@@ -747,11 +747,14 @@ function connect<
// Now that all that's done, we can finally try to actually render the child component.
// We memoize the elements for the rendered child component as an optimization.
const renderedWrappedComponent = React.useMemo(() => {
+ const effectiveProps = {...actualChildProps};
+ if (forwardRef) {
+ effectiveProps.ref = reactReduxForwardedRef
+ }
return (
// @ts-ignore
)
}, [reactReduxForwardedRef, WrappedComponent, actualChildProps])
diff --git a/test/components/connect.spec.tsx b/test/components/connect.spec.tsx
index fd6199353..10afe2d86 100644
--- a/test/components/connect.spec.tsx
+++ b/test/components/connect.spec.tsx
@@ -2588,6 +2588,32 @@ describe('React', () => {
expect(tester.getByTestId('a')).toHaveTextContent('42')
})
+
+ it('should not override ref property when not asked to.', async () => {
+ type RootStateType = {}
+ const store = createStore(() => ({}))
+ type RefReceiverPropsType = {}
+ const RefReceiver = React.forwardRef(
+ (props: RefReceiverPropsType, ref) =>
+ );
+ type RefReceiverNoDispatchType = null
+ const decorator = connect<
+ RefReceiverPropsType,
+ RefReceiverNoDispatchType,
+ RefReceiverPropsType,
+ RootStateType
+ >(null, null, null, {
+ forwardRef: IS_REACT_18
+ })
+ const DecoratedRefReceiver = decorator(RefReceiver)
+ const testRef = React.createRef()
+ rtl.render(
+
+
+
+ )
+ expect(testRef.current).toBeInstanceOf(HTMLSpanElement);
+ })
})
describe('Factory functions for mapState/mapDispatch', () => {