Add removal tracker prototype

Author: huumanoid

src/decorators/trackRemoval.js

@@ -0,0 +1,76 @@
+// http://stackoverflow.com/a/32726412/7571078
+const isDetached = (element) => {
+  if (element.parentNode === window.document) {
+    return false
+  }
+  if (element.parentNode == null) return true
+  return isDetached(element.parentNode)
+}
+
+// https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/
+const getMutationObserverClass = () => {
+  return window.MutationObserver ||
+    window.WebKitMutationObserver ||
+    window.MozMutationObserver
+}
+
+export default function (target) {
+  target.prototype.trackRemoval = function () {
+    if (this.removalObserver) {
+      this.releaseRemovalTracker()
+    }
+
+    this.tracked = []
+
+    const MutationObserver = getMutationObserverClass()
+    if (MutationObserver) {
+      const observer = this.removalObserver = new MutationObserver(() => {
+        for (const element of this.tracked) {
+          if (isDetached(element) && element === this.state.currentTarget) {
+            this.hideTooltip()
+          }
+        }
+      })
+      observer.observe(window.document, { childList: true, subtree: true })
+    }
+  }
+
+  target.prototype.attachRemovalTracker = function (element) {
+    this.tracked.push(element)
+
+    const isMutationObserverAvailable = getMutationObserverClass()
+    if (!isMutationObserverAvailable) {
+      this.listeners = this.listeners || []
+
+      let listener = function (e) {
+        if (e.currentTarget === this.state.currentTarget) {
+          this.hideTooltip()
+          const idx = this.listeners.indexOf(listener)
+          this.listeners.splice(idx, 1)
+        }
+      }
+      listener = listener.bind(this)
+
+      this.listeners.push({
+        element,
+        listener
+      })
+
+      element.addEventListener('DOMNodeRemovedFromDocument', listener)
+    }
+  }
+
+  target.prototype.releaseRemovalTracker = function () {
+    if (this.removalObserver) {
+      this.removalObserver.disconnect()
+      this.removalObserver = null
+      this.tracked = []
+    }
+    if (this.listeners) {
+      for (const {listener, element} of this.listeners) {
+        element.removeEventListener('DOMNodeRemovedFromDocument', listener)
+      }
+      this.listeners = []
+    }
+  }
+}

src/index.js

@@ -10,6 +10,7 @@ import windowListener from './decorators/windowListener'
 import customEvent from './decorators/customEvent'
 import isCapture from './decorators/isCapture'
 import getEffect from './decorators/getEffect'
+import trackRemoval from './decorators/trackRemoval'
 
 /* Utils */
 import getPosition from './utils/getPosition'
@@ -20,7 +21,12 @@ import nodeListToArray from './utils/nodeListToArray'
 /* CSS */
 import cssStyle from './style'
 
-@staticMethods @windowListener @customEvent @isCapture @getEffect
+@staticMethods
+@windowListener
+@customEvent
+@isCapture
+@getEffect
+@trackRemoval
 class ReactTooltip extends Component {
 
   static propTypes = {
@@ -163,6 +169,8 @@ class ReactTooltip extends Component {
     const {id, globalEventOff} = this.props
     let targetArray = this.getTargetArray(id)
 
+    this.trackRemoval()
+
     targetArray.forEach(target => {
       const isCaptureMode = this.isCapture(target)
       const effect = this.getEffect(target)
@@ -181,7 +189,7 @@ class ReactTooltip extends Component {
         target.addEventListener('mousemove', this.updateTooltip, isCaptureMode)
       }
       target.addEventListener('mouseleave', this.hideTooltip, isCaptureMode)
-      target.addEventListener('DOMNodeRemovedFromDocument', this.checkSameTarget, isCaptureMode)
+      this.attachRemovalTracker(target)
     })
 
     // Global event to hide tooltip
@@ -203,6 +211,7 @@ class ReactTooltip extends Component {
     })
 
     if (globalEventOff) window.removeEventListener(globalEventOff, this.hideTooltip)
+    this.releaseRemovalTracker()
   }
 
   /**
@@ -215,7 +224,6 @@ class ReactTooltip extends Component {
     target.removeEventListener('mouseenter', this.showTooltip, isCaptureMode)
     target.removeEventListener('mousemove', this.updateTooltip, isCaptureMode)
     target.removeEventListener('mouseleave', this.hideTooltip, isCaptureMode)
-    target.removeEventListener('DOMNodeRemovedFromDocument', this.checkSameTarget, isCaptureMode)
   }
 
   /**