Using react-reactonlickoutside with React.forwardRef results in a runtime error

[gaborsar]

Using the following component that uses React.forwardRef:

const TestComponent = onClickOutside(
    React.forwardRef((props, ref) => <div {...props} ref={ref} />)
);

Leads to the following error:

Uncaught TypeError: Cannot read property 'isReactComponent' of undefined
    at onClickOutside.render (react-onclickoutside.es.js:329)
    at finishClassComponent (react-dom.development.js:13727)
    at updateClassComponent (react-dom.development.js:13690)
    at beginWork (react-dom.development.js:14489)
    at performUnitOfWork (react-dom.development.js:17014)
    at workLoop (react-dom.development.js:17054)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:16366)

As styled-components uses React.forwardRef, react-onclickoutside cannot be directly used with styled components.
Related to: #293

[Pomax]

I am very glad they finally added this as a thing, because it solves a problem that is inherent to HOC implementations. That said, this is absolutely worth updating the code for, and then releasing it as a new major version that does away with the whole instance forwarding code this HOC has had to use for years now.

As per https://reactjs.org/docs/forwarding-refs.html#note-for-component-library-maintainers - let's use this! And mark it as breaking change.

/cc @Andarist

[Andarist]

Sure - doing a major release for this is cool 👍

[ozluy]

Any update on that?

[arthur-cen]

Any updates on this fix?

[kevalbhatt]

@Andarist could you please update your PR

[adarrra]

is there any workaround now to use with styled-components?

[NilSet]

#326 should be able to work with forwardRef without a breaking change

[Pomax]

I've not had any free time to look at this before today, but I've left some questions on that PR - there's some odd things going on in it and I'd like to make sure those are all intentional.