innerRef is leaked as a prop to the wrapped component

Version

1.4.4

Reproduction

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

Steps to reproduce

Wrap any component in styled() and use the innerRef callback to access it.

Expected Behavior

innerRef should not be leaked as a prop to the wrapped child component.

Actual Behavior

innerRef is leaked as a prop to the wrapped child component.

[mxstbr]

I’m not misunderstanding, I get what you’re trying to tell me: Don’t pass innerRef to wrapper child components.

I think what you’re misunderstanding is that this would make some things impossible. Imagine this component:

const Input = ({ className }) => <input type="text" className={className} />

const WrappedInput = styled(Input)``;

Now when I render it, how can I focus the input?

<WrappedInput ref={comp => this.input = comp} />

// this.input is the styled-components wrapper, not the DOM node, so this doesn't work, right?
this.input.focus();

(I don’t know if this is actually the case, but I think it is)

You can fix this with innerRef though:

const Input = ({ className, innerRef }) => <input type="text" ref={innerRef} className={className} />

const WrappedInput = styled(Input)``;

<WrappedInput innerRef={comp => this.input = comp} />

// Works!
this.input.focus();

[evan-scott-zocdoc]

I think you might be misunderstanding what the issue is.

innerRef is an ok pattern to use to access the wrapped child, but in that styled wrapper component it should be deleting the innerRef prop and not forwarding it to the child. That’s what I’m trying to point out. innerRef is a styled-components implementation detail that shouldn’t be leaked.