innerRef support for withTheme() HOC

[evan-scott-zocdoc]

Version

1.4.4

Reproduction

https://www.webpackbin.com/bins/-KfSbgVyPqFmY7yJYVj0

Steps to reproduce

Style a withTheme()-wrapped component and try to use the innerRef callback to grab the wrapped component instance.

Expected Behavior

I would expect the innerRef callback to resolve to the deeply nested child.

Actual Behavior

The withTheme HOC instance is returned by innerRef() and there's no way to get the wrapped child component.

[evan-scott-zocdoc]

Ugh accidentally overwrote my bin, hang on. fixed

[brunolemos]

@evan-scott-zocdoc Just to make sure...

This is the current output:

"this.child instanceof Child === false"
"this.child instanceof ThemedChild === true"
"this.child instanceof StyledThemedChild === false"

and you were expecting this:

"this.child instanceof Child === true"
"this.child instanceof ThemedChild === false"
"this.child instanceof StyledThemedChild === false"

Is that correct?

[evan-scott-zocdoc]

Yes that's correct.

[brunolemos]

I don't think it's related to withTheme because if you replace the following line:

-const ThemedChild = withTheme(Child);`
+const ThemedChild = styled(Child)``;

The output will be all false.
The innerRef won't even be called.

[evan-scott-zocdoc]

Ah the example should probably be tweaked, as you can't take a ref on a SFC. I'll do that now.

[evan-scott-zocdoc]

@brunolemos updated the example, your change will now reflect Child as the constructor as expected.

[mxstbr]

This should definitely be fixed! Thanks for the reproduction.

[kitten]

This PR should fix this 😄 #710

@evan-scott-zocdoc @mxstbr

[evan-scott-zocdoc]

Woot!

[kitten]

All done 😸

[denkristoffer]

I'm seeing this behaviour again with SC 3.2.5 (https://codesandbox.io/s/056wj1zmw), possibly because of #1414 ? Or am I doing something wrong here? I can't access the bin in OP to compare the code.

[kitten]

@denkristoffer That happens because your InputWithRef component (which shouldn't be necessary in the first place 😉) tries to use the ref prop, which is a special prop and thus not accessible to you. tl;dr you can't pass ref and expect to receive it in the component. That's why we call it innerRef. Renaming it fixes
the problem: https://codesandbox.io/s/72m8xxy121

Btw it's not preferable to post comments on closed/stale/old issues (this issue is all of those three things 😅) It's easier to create a new issue or ask for help on Spectrum