diff --git a/src/components/connect.tsx b/src/components/connect.tsx index 3e6c92c39..8d313f2bf 100644 --- a/src/components/connect.tsx +++ b/src/components/connect.tsx @@ -960,12 +960,13 @@ 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 22eac6914..36d3aa4d1 100644 --- a/test/components/connect.spec.tsx +++ b/test/components/connect.spec.tsx @@ -2659,6 +2659,33 @@ describe('React', () => { expect(tester.getByTestId('a')).toHaveTextContent('42') }) + + it('should not override a ref prop when forwardRef is not enabled', () => { + type RootStateType = {} + const store = createStore(() => ({})) + type RefReceiverPropsType = {} + const RefReceiver = React.forwardRef< + HTMLSpanElement, + RefReceiverPropsType + >((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', () => {