Fix PopperJS instantiation (see issue #32)

src/Popper.jsx

@@ -2,8 +2,6 @@ import React, { Component, createElement } from 'react'
 import PropTypes from 'prop-types'
 import PopperJS from 'popper.js'
 
-const noop = () => null
-
 class Popper extends Component {
   static contextTypes = {
     popperManager: PropTypes.object.isRequired,
@@ -40,19 +38,16 @@ class Popper extends Component {
     }
   }
 
-  componentDidMount() {
-    this._updatePopper()
-  }
-
   componentDidUpdate(lastProps) {
     if (
       lastProps.placement !== this.props.placement ||
       lastProps.eventsEnabled !== this.props.eventsEnabled
     ) {
-      this._updatePopper()
+      this._destroyPopper()
+      this._createPopper()
     }
 
-    if (this._popper && lastProps.children !== this.props.children) {
+    if (lastProps.children !== this.props.children) {
       this._popper.scheduleUpdate()
     }
   }
@@ -95,13 +90,6 @@ class Popper extends Component {
     },
   }
 
-  _updatePopper() {
-    this._destroyPopper()
-    if (this._node) {
-      this._createPopper()
-    }
-  }
-
   _createPopper() {
     const { placement, eventsEnabled } = this.props
     const modifiers = {
@@ -122,7 +110,7 @@ class Popper extends Component {
       modifiers,
     })
 
-    // schedule an update to make sure everything gets positioned correct
+    // schedule an update to make sure everything gets positioned correctly
     // after being instantiated
     this._popper.scheduleUpdate()
   }
@@ -138,7 +126,7 @@ class Popper extends Component {
 
     // If Popper isn't instantiated, hide the popperElement
     // to avoid flash of unstyled content
-    if (!this._popper || !data) {
+    if (!data) {
       return {
         position: 'absolute',
         pointerEvents: 'none',
@@ -155,7 +143,7 @@ class Popper extends Component {
   }
 
   _getPopperPlacement = () => {
-    return !!this.state.data ? this.state.data.placement : undefined
+    return this.state.data ? this.state.data.placement : undefined
   }
 
   _getPopperHide = () => {
@@ -184,6 +172,11 @@ class Popper extends Component {
 
     const popperRef = node => {
       this._node = node
+      if(node) {
+        this._createPopper();
+      } else {
+        this._destroyPopper();
+      }
       if (typeof innerRef === 'function') {
         innerRef(node)
       }
@@ -199,10 +192,16 @@ class Popper extends Component {
         ['data-placement']: popperPlacement,
         ['data-x-out-of-boundaries']: popperHide,
       }
+
       return children({
         popperProps,
         restProps,
-        scheduleUpdate: this._popper && this._popper.scheduleUpdate,
+        scheduleUpdate: () => {
+          // _createPopper will scheduleUpdate,
+          // so calling this before this._popper exists
+          // can be a noop.
+          this._popper && this._popper.scheduleUpdate();
+        },
       })
     }
 
@@ -227,3 +226,4 @@ class Popper extends Component {
 }
 
 export default Popper
+