fix: make sure DOM handlers work properly

Author: frontendphil

demo/src/regressions/Regressions.js

@@ -1,10 +1,11 @@
 import React from 'react'
 
 import ButtonOverlay from './ButtonOverlay'
-import SameWidth from './SameWidth'
-import StickNodeWidth from './StickNodeWidth'
 import FitOnPage from './FitOnPage'
+import SameWidth from './SameWidth'
 import StickInSvg from './StickInSvg'
+import StickNodeWidth from './StickNodeWidth'
+import StickOnHover from './StickOnHover'
 import StyledWithDataAttributes from './StyledWithDataAttributes'
 import TransportToFixedContainer from './TransportToFixedContainer'
 
@@ -20,6 +21,7 @@ export default function Regressions() {
       <StickInSvg />
       <StyledWithDataAttributes />
       <TransportToFixedContainer />
+      <StickOnHover />
     </div>
   )
 }

demo/src/regressions/StickOnHover.js

@@ -0,0 +1,64 @@
+import { range } from 'lodash'
+import React, { useState } from 'react'
+
+import Stick from '../../../es'
+import Regression from './Regression'
+
+function StickOnHover() {
+  return (
+    <Regression
+      allBrowsers
+      fixed
+      version="3.0.3"
+      title="Node does not unmount on mouse leave"
+      description="Move your mouse over the squares. When you're hovering one another node should be shown. However, there should always only be one node at the same time."
+    >
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        {range(100).map(i => (
+          <div key={i} style={{ marginLeft: 20, marginBottom: 20 }}>
+            <Popover />
+          </div>
+        ))}
+      </div>
+    </Regression>
+  )
+}
+
+function Popover() {
+  const [hover, setHover] = useState(false)
+
+  return (
+    <Stick
+      position="top center"
+      node={hover && <Node />}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      <Anchor />
+    </Stick>
+  )
+}
+
+const Anchor = () => (
+  <div
+    style={{
+      height: 30,
+      width: 30,
+      backgroundColor: 'rgb(24, 170, 177)'
+    }}
+  />
+)
+
+const Node = ({ children }) => (
+  <div
+    style={{
+      backgroundColor: '#ae0d5c',
+      width: 10,
+      height: 10
+    }}
+  >
+    {children}
+  </div>
+)
+
+export default StickOnHover

src/Stick.js

@@ -8,7 +8,7 @@ import React, {
   useContext,
   useEffect,
   useRef,
-  useState,
+  useState
 } from 'react'
 import { type HOC } from 'recompose'
 import { type Substyle, defaultStyle } from 'substyle'
@@ -25,7 +25,7 @@ import { getDefaultAlign, getModifiers, scrollX, uniqueId } from './utils'
 type PropsT = {|
   ...ApiPropsT,
 
-  style: Substyle,
+  style: Substyle
 |}
 
 function Stick({
@@ -132,18 +132,6 @@ function Stick({
     }
   }, [checkAlignment])
 
-  if (!node) {
-    const Component = component || 'div'
-
-    return (
-      <StickContext.Provider value={nestingKey}>
-        <Component {...resolvedStyle} {...rest}>
-          {children}
-        </Component>
-      </StickContext.Provider>
-    )
-  }
-
   if (inline) {
     return (
       <StickContext.Provider value={nestingKey}>
@@ -153,15 +141,17 @@ function Stick({
           align={resolvedAlign}
           style={resolvedStyle}
           node={
-            <StickNode
-              width={width}
-              position={resolvedPosition}
-              align={resolvedAlign}
-              sameWidth={!!sameWidth}
-              nodeRef={nodeRef}
-            >
-              {node}
-            </StickNode>
+            node && (
+              <StickNode
+                width={width}
+                position={resolvedPosition}
+                align={resolvedAlign}
+                sameWidth={!!sameWidth}
+                nodeRef={nodeRef}
+              >
+                {node}
+              </StickNode>
+            )
           }
           nestingKey={nestingKey}
           containerRef={node => {
@@ -193,15 +183,17 @@ function Stick({
         }}
         position={resolvedPosition}
         node={
-          <StickNode
-            width={width}
-            position={resolvedPosition}
-            align={resolvedAlign}
-            sameWidth={!!sameWidth}
-            nodeRef={nodeRef}
-          >
-            {node}
-          </StickNode>
+          node && (
+            <StickNode
+              width={width}
+              position={resolvedPosition}
+              align={resolvedAlign}
+              sameWidth={!!sameWidth}
+              nodeRef={nodeRef}
+            >
+              {node}
+            </StickNode>
+          )
         }
         style={resolvedStyle}
         nestingKey={nestingKey}
@@ -261,7 +253,7 @@ function calculateWidth(
   const positionAdjustments = {
     left,
     center: left + width / 2,
-    right,
+    right
   }
 
   const absLeft = scrollX(anchorRef) + positionAdjustments[horizontalPosition]
@@ -286,8 +278,8 @@ const styled: HOC<*, ApiPropsT> = defaultStyle(
     node: {
       position: 'absolute',
       zIndex: 99,
-      textAlign: 'left',
-    },
+      textAlign: 'left'
+    }
   },
   getModifiers
 )

src/StickPortal.js

@@ -1,14 +1,16 @@
 // @flow
 import 'requestidlecallback'
 
+import invariant from 'invariant'
 import React, {
   createContext,
   forwardRef,
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useRef,
-  useState,
+  useState
 } from 'react'
 import { createPortal } from 'react-dom'
 
@@ -36,14 +38,24 @@ function StickPortal(
   const [top, setTop] = useState(0)
   const [left, setLeft] = useState(0)
 
-  const host = useHost(transportTo)
+  const [host, hostParent] = useHost(transportTo)
 
   useEffect(() => {
     if (nodeRef.current) {
       onReposition(nodeRef.current)
     }
   }, [onReposition, top, left])
 
+  useLayoutEffect(() => {
+    if (node) {
+      hostParent.appendChild(host)
+
+      return () => {
+        hostParent.removeChild(host)
+      }
+    }
+  }, [host, hostParent, node])
+
   const measure = useCallback(() => {
     if (!nodeRef.current) {
       return
@@ -101,7 +113,7 @@ function StickPortal(
               // $FlowFixMe
               ...nodeStyle,
               top,
-              left,
+              left
             }}
           >
             {node}
@@ -122,21 +134,11 @@ function useHost(transportTo) {
 
   const portalHost = useContext(PortalContext)
 
-  useEffect(() => {
-    const hostParent = transportTo || portalHost || document.body
+  const hostParent = transportTo || portalHost || document.body
 
-    if (hostParent) {
-      hostParent.appendChild(host)
-    }
-
-    return () => {
-      if (hostParent) {
-        hostParent.removeChild(host)
-      }
-    }
-  }, [host, portalHost, transportTo])
+  invariant(hostParent, 'Could not determine a parent for the host node.')
 
-  return host
+  return [host, hostParent]
 }
 
 function calculateTop(