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', () => {