internal usage of forwardedRef prevents a parent component from passing a forwardedRef prop to a connected component

[dtschust]

What is the current behavior?

If a parent of a connected component passes in a prop forwardedRef, it is passed through as ref to the child component. This is happening because connectAdvanced is using forwardedRef internally, for the use case where forwardRef is set to true when connect is called.

Here is what I feel is expected behavior, using react-redux v5.1.2 . The App component passes a prop forwardedRef to the connected Component, which then uses that forwardedRef prop to pass a reference to an Input. The behavior of this example is that clicking the button will focus the input.

And here is the current behavior, using react-redux v7.1.3. In this example, the top two buttons do not focus on their inputs, because the connect HOC is intercepting the forwardedRef prop passed in by App. The third button works, following the exact same pattern but using a name other than forwardedRef, in this case refToForward.

What is the expected behavior?

I think react-redux should use a different internal name for this field, perhaps something like __REACT_REDUX_FORWARDED_REF, which would limit namespace collision. forwardedRef is a particularly likely name to collide on because it's the name used in React's forwarding refs documentation. I'm happy to make a PR for this change if you think this is a change worth making. The forwardedRef key is used internally only so I believe it would be a non-breaking change.

[timdorr]

If you want to make a PR, that's cool. But given it's not enabled by default and is a fairly uncommon occurrence that you're forwarding a ref twice through a component, I'm going to close this issue out. I don't think we need to track this very rare edge case.