[withWidth] Broken innerRef property

[alimo]

Regarding #12216, innerRef property was implemented for withWidth and withTheme HOCs. But since withWidth itself uses withTheme as its wrapper, innerRef will not be propagated through both of them.

Since we're not using forwardRef API at the moment (#10825 (comment)), i think we should come up with a solution for the existing HOCs to forward the innerRef property.

A solution would be to add an options argument to withTheme to set an optional flag (like forwardInnerRef) so the innerRef property provided to WithTheme component would be forwarded to the wrapped component (WithWidth in this case) as its innerRef property.

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

We should be able to access the component wrapped with withWidth.

Current Behavior

By using innerRef, we get the WithWidth component.

Steps to Reproduce

(See console output)

Your Environment

Tech	Version
Material-UI	v1.5.0
React	v16.4.2
Browser	Chrome 56

[oliviertassinari]

@alimo What do you think of removing the innerRef dead code from the withWidth and wait for #10825 so we made it clear it's not supported?

[alimo]

@oliviertassinari as you mentioned, using forwardRef is a breaking change and #10825 has a v2 milestone. So it might be a long time until we are able to use this API in our projects. The problem of using multiple HOCs remains unsolved until then.

I suggest an enhancement on the current innerRef API as I mentioned in the issue description. Something like how react-redux/connect takes a withRef option. But in this case, when a certain flag is provided, we will be forwarding the provided innerRef function to the wrapped component as its innerRef property (instead of ref).

[oliviertassinari]

@alimo I understand your suggestion but I don't think that it worth pushing the story forward. I think that we should go the other way around, cleaning the property from the component. v2 should come by early 2019.

People should avoid relying on ref as much as possible. If you have this requirement, surely you are doing something custom, you should be willing to make your own ref forwarding logic. This issue isn't a blocker, there are ways to workaround it.

[alimo]

@oliviertassinari You're right. It would make things more complicated than it should be. Thank you for your response. Keep up the good work 😊