use findDOMNode() for reference; fix #3

Author: atomiks

src/Tippy.js

@@ -1,14 +1,14 @@
 import React from 'react'
-import tippy from 'tippy.js'
+import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
+import tippy from 'tippy.js'
 
 const getNativeTippyProps = props => {
   const { children, onCreate, ...tippyProps } = props
   return tippyProps
 }
 
 class Tippy extends React.Component {
-  reference = React.createRef()
   content = React.createRef()
 
   static propTypes = {
@@ -24,7 +24,7 @@ class Tippy extends React.Component {
   }
 
   componentDidMount() {
-    this.tip = tippy.one(this.reference.current, {
+    this.tip = tippy.one(ReactDOM.findDOMNode(this), {
       ...getNativeTippyProps(this.props),
       content: this.getContent()
     })
@@ -46,13 +46,11 @@ class Tippy extends React.Component {
   }
 
   render() {
-    const { children, content } = this.props
-
     return (
       <React.Fragment>
-        {React.cloneElement(children, { ref: this.reference })}
-        {React.isValidElement(content) && (
-          <div ref={this.content}>{content}</div>
+        {this.props.children}
+        {React.isValidElement(this.props.content) && (
+          <div ref={this.content}>{this.props.content}</div>
         )}
       </React.Fragment>
     )

test/Tippy.test.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import Tippy from '../src/Tippy'
-import { shallow, mount } from 'enzyme'
+import { mount } from 'enzyme'
 
 describe('<Tippy />', () => {
   test('renders only the child element', () => {
-    const wrapper = shallow(
+    const wrapper = mount(
       <Tippy content="tooltip">
         <button />
       </Tippy>
@@ -98,4 +98,28 @@ describe('<Tippy />', () => {
       done()
     })
   })
+
+  test('component as a child', () => {
+    const withForwardRef = Comp => {
+      return React.forwardRef((props, ref) => (
+        <Comp {...props} forwardRef={ref} />
+      ))
+    }
+    const Button = withForwardRef(
+      class extends React.Component {
+        render() {
+          return <button ref={this.props.forwardRef}>My button</button>
+        }
+      }
+    )
+    const wrapper = mount(
+      <div>
+        <Tippy content="tooltip">
+          <Button />
+        </Tippy>
+      </div>
+    )
+    expect(wrapper.find(Tippy).getDOMNode()._tippy).toBeDefined()
+    wrapper.unmount()
+  })
 })