Can't access reffed component

[dutzi]

Hi guys,

We're having issues using react-tracking with reffed components.

The following example illustrates this:

@track({})
export default class ChildComponent extends Component {
    focus() {
        ...
    }
    ...
}

export default class ParentCompoent extends Component {
    componentDidMount() {
        this.child.focus()
    }
    render() {
        <ChildComponent ref={el => this.child = el}/>
    }
}

ParentComponent can't call ChildComponent's focus method since @track annotation wraps the component without allowing access to the component itself.

React-redux solves this with an option called withRef and and exposing a function called getWrappedInstance, would be great if could also see something similar here.

Thank you!

[tizmagik]

Ah, yes, thanks for the issue, that makes sense. Although I think the React.forwardRef API might be a better fit for this, https://reactjs.org/docs/forwarding-refs.html

[dutzi]

Hey @tizmagik, sorry for nagging but any idea when this fix will go live or should we implement it for now? (We just have something that depends on it waiting to go live)

[tizmagik]

Feel free to submit a PR, otherwise I can try and take a look at it this week

[kelyvin]

+1

[AliceMarshall]

Hi, is there anymore work being done on this? I see you made a PR back in 2018 for a fix, would really like a way to forwardRefs with HOC tracking.

[tizmagik]

Yeap unfortunately I haven't had a chance to land that PR. If you're interested, feel free to pickup where that PR left off and/or start a new one. I think it's pretty close, I just haven't had time to focus on that 😞