Merge pull request #932 from ReactTooltip/feat/tooltip-rendered-element-dom

danielbarion · web-flow · commit f979a603d99f · 2023-02-09T11:21:25.000-03:00
fix: remove tooltip rendered element from DOM when is not showing
diff --git a/docs/docs/options.mdx b/docs/docs/options.mdx
@@ -109,8 +109,3 @@ import 'react-tooltip/dist/react-tooltip.css';
 | data-tooltip-show              | number  | false    |            | any `number`                                      | tooltip show will be delayed in miliseconds by the amount of value                                                                        |
 | data-tooltip-hide              | number  | false    |            | any `number`                                      | tooltip hide will be delayed in miliseconds by the amount of value                                                                        |
 | data-tooltip-float             | boolean | false    | `false`    | `true` `false`                                    | tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`)                            |
-
-#### Observations
-
-- When using `data-tooltip-content` the `<br />` works by default
-- When using prop `content` the `<br />` doesn't work by default, use prop `html` instead of this
diff --git a/package.json b/package.json
@@ -117,7 +117,7 @@
     ]
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.0.4",
+    "@floating-ui/dom": "1.1.1",
     "classnames": "^2.3.2"
   }
 }
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -44,21 +44,52 @@ const Tooltip = ({
   const [inlineStyles, setInlineStyles] = useState({})
   const [inlineArrowStyles, setInlineArrowStyles] = useState({})
   const [show, setShow] = useState(false)
+  const [rendered, setRendered] = useState(false)
   const wasShowing = useRef(false)
-  const [calculatingPosition, setCalculatingPosition] = useState(false)
   const lastFloatPosition = useRef<IPosition | null>(null)
   const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id)
   const [activeAnchor, setActiveAnchor] = useState<React.RefObject<HTMLElement>>({ current: null })
   const hoveringTooltip = useRef(false)
 
-  const handleShow = (value: boolean) => {
-    if (setIsOpen) {
-      setIsOpen(value)
-    } else if (isOpen === undefined) {
-      setShow(value)
+  useEffect(() => {
+    if (!show) {
+      setRendered(false)
     }
+  }, [show])
+
+  const handleShow = (value: boolean) => {
+    setRendered(true)
+    /**
+     * wait for the component to render and calculate position
+     * before actually showing
+     */
+    setTimeout(() => {
+      setIsOpen?.(value)
+      if (isOpen === undefined) {
+        setShow(value)
+      }
+    }, 10)
   }
 
+  /**
+   * this replicates the effect from `handleShow()`
+   * when `isOpen` is changed from outside
+   */
+  useEffect(() => {
+    if (isOpen === undefined) {
+      return () => null
+    }
+    if (isOpen) {
+      setRendered(true)
+    }
+    const timeout = setTimeout(() => {
+      setShow(isOpen)
+    }, 10)
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [isOpen])
+
   useEffect(() => {
     if (show === wasShowing.current) {
       return
@@ -117,7 +148,7 @@ const Tooltip = ({
   const handleHideTooltip = () => {
     if (clickable) {
       // allow time for the mouse to reach the tooltip, in case there's a gap
-      handleHideTooltipDelayed(delayHide || 50)
+      handleHideTooltipDelayed(delayHide || 100)
     } else if (delayHide) {
       handleHideTooltipDelayed()
     } else {
@@ -144,7 +175,6 @@ const Tooltip = ({
         }
       },
     } as Element
-    setCalculatingPosition(true)
     computeTooltipPosition({
       place,
       offset,
@@ -154,7 +184,6 @@ const Tooltip = ({
       strategy: positionStrategy,
       middlewares,
     }).then((computedStylesData) => {
-      setCalculatingPosition(false)
       if (Object.keys(computedStylesData.tooltipStyles).length) {
         setInlineStyles(computedStylesData.tooltipStyles)
       }
@@ -306,7 +335,11 @@ const Tooltip = ({
       })
       parentObserver.disconnect()
     }
-  }, [anchorRefs, activeAnchor, closeOnEsc, anchorId, events, delayHide, delayShow])
+    /**
+     * rendered is also a dependency to ensure anchor observers are re-registered
+     * since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM
+     */
+  }, [rendered, anchorRefs, activeAnchor, closeOnEsc, anchorId, events, delayHide, delayShow])
 
   useEffect(() => {
     if (position) {
@@ -335,7 +368,6 @@ const Tooltip = ({
       // `anchorId` element takes precedence
       elementReference = document.querySelector(`[id='${anchorId}']`) as HTMLElement
     }
-    setCalculatingPosition(true)
     let mounted = true
     computeTooltipPosition({
       place,
@@ -350,7 +382,6 @@ const Tooltip = ({
         // invalidate computed positions after remount
         return
       }
-      setCalculatingPosition(false)
       if (Object.keys(computedStylesData.tooltipStyles).length) {
         setInlineStyles(computedStylesData.tooltipStyles)
       }
@@ -361,18 +392,7 @@ const Tooltip = ({
     return () => {
       mounted = false
     }
-  }, [
-    show,
-    isOpen,
-    anchorId,
-    activeAnchor,
-    content,
-    html,
-    place,
-    offset,
-    positionStrategy,
-    position,
-  ])
+  }, [show, anchorId, activeAnchor, content, html, place, offset, positionStrategy, position])
 
   useEffect(() => {
     return () => {
@@ -386,13 +406,14 @@ const Tooltip = ({
   }, [])
 
   const hasContentOrChildren = Boolean(html || content || children)
+  const canShow = Boolean(hasContentOrChildren && show && Object.keys(inlineStyles).length > 0)
 
-  return (
+  return rendered ? (
     <WrapperElement
       id={id}
       role="tooltip"
       className={classNames('react-tooltip', styles['tooltip'], styles[variant], className, {
-        [styles['show']]: hasContentOrChildren && !calculatingPosition && (isOpen || show),
+        [styles['show']]: canShow,
         [styles['fixed']]: positionStrategy === 'fixed',
         [styles['clickable']]: clickable,
       })}
@@ -409,7 +430,7 @@ const Tooltip = ({
         ref={tooltipArrowRef}
       />
     </WrapperElement>
-  )
+  ) : null
 }
 
 export default Tooltip
diff --git a/src/test/__snapshots__/index.spec.js.snap b/src/test/__snapshots__/index.spec.js.snap
@@ -1,123 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`tooltip attributes basic tooltip component 1`] = `
+<span
+  data-tooltip-content="Hello World!"
+  id="basic-example-attr"
+>
+  Lorem Ipsum
+</span>
+`;
+
+exports[`tooltip attributes tooltip component - delayHide 1`] = `
+<span
+  data-tooltip-content="Hello World!"
+  data-tooltip-delay-hide={1000}
+  id="basic-example-delay-hide-attr"
+>
+  Lorem Ipsum
+</span>
+`;
+
+exports[`tooltip attributes tooltip component - delayShow 1`] = `
+<span
+  data-tooltip-content="Hello World!"
+  data-tooltip-delay-show={1000}
+  id="basic-example-delay-show-attr"
+>
+  Lorem Ipsum
+</span>
+`;
+
+exports[`tooltip attributes tooltip component - html 1`] = `
+<span
+  data-tooltip-html="Hello World!"
+  data-tooltip-place="top"
+  data-tooltip-variant="info"
+  id="basic-example-html-attr"
+>
+  Lorem Ipsum
+</span>
+`;
+
+exports[`tooltip attributes tooltip component - without anchorId 1`] = `
+<span
+  data-tooltip-content="Hello World!"
+>
+  Lorem Ipsum
+</span>
+`;
+
 exports[`tooltip props basic tooltip component 1`] = `
-[
-  <span
-    id="basic-example"
-  >
-    Lorem Ipsum
-  </span>,
-  <div
-    className="react-tooltip"
-    role="tooltip"
-    style={{}}
-  >
-    Hello World!
-    <div
-      className="react-tooltip-arrow"
-      style={{}}
-    />
-  </div>,
-]
+<span
+  id="basic-example"
+>
+  Lorem Ipsum
+</span>
+`;
+
+exports[`tooltip props tooltip component - delayHide 1`] = `
+<span
+  id="basic-example-delay-hide"
+>
+  Lorem Ipsum
+</span>
+`;
+
+exports[`tooltip props tooltip component - delayShow 1`] = `
+<span
+  id="basic-example-delay-show"
+>
+  Lorem Ipsum
+</span>
 `;
 
 exports[`tooltip props tooltip component - getContent 1`] = `
-[
-  <span
-    id="basic-example-get-content"
-  >
-    Lorem Ipsum
-  </span>,
-  <div
-    className="react-tooltip"
-    role="tooltip"
-    style={{}}
-  >
-    Hello World!
-    <div
-      className="react-tooltip-arrow"
-      style={{}}
-    />
-  </div>,
-]
+<span
+  id="basic-example-get-content"
+>
+  Lorem Ipsum
+</span>
 `;
 
 exports[`tooltip props tooltip component - html 1`] = `
-[
-  <span
-    id="basic-example-html"
-  >
-    Lorem Ipsum
-  </span>,
-  <div
-    className="react-tooltip"
-    role="tooltip"
-    style={{}}
-  >
-    <span
-      dangerouslySetInnerHTML={
-        {
-          "__html": "Hello World!",
-        }
-      }
-    />
-    <div
-      className="react-tooltip-arrow"
-      style={{}}
-    />
-  </div>,
-]
+<span
+  id="basic-example-html"
+>
+  Lorem Ipsum
+</span>
 `;
 
 exports[`tooltip props tooltip component - position props 1`] = `
-[
-  <span
-    id="position-props"
-  >
-    Lorem Ipsum
-  </span>,
-  <div
-    className="react-tooltip"
-    role="tooltip"
-    style={{}}
-  >
-    Hello World!
-    <div
-      className="react-tooltip-arrow"
-      style={{}}
-    />
-  </div>,
-]
+<span
+  id="position-props"
+>
+  Lorem Ipsum
+</span>
 `;
 
 exports[`tooltip props tooltip component - without anchorId 1`] = `
-[
-  <span>
-    Lorem Ipsum
-  </span>,
-  <div
-    className="react-tooltip"
-    role="tooltip"
-    style={{}}
-  >
-    Hello World!
-    <div
-      className="react-tooltip-arrow"
-      style={{}}
-    />
-  </div>,
-]
+<span>
+  Lorem Ipsum
+</span>
 `;
 
-exports[`tooltip props tooltip component - without element reference 1`] = `
-<div
-  className="react-tooltip"
-  role="tooltip"
-  style={{}}
->
-  <div
-    className="react-tooltip-arrow"
-    style={{}}
-  />
-</div>
-`;
+exports[`tooltip props tooltip component - without element reference 1`] = `null`;
diff --git a/src/test/index.spec.js b/src/test/index.spec.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -117,7 +117,7 @@`
`117`	`117`	`]`
`118`	`118`	`},`
`119`	`119`	`"dependencies": {`
`120`		`- "@floating-ui/dom": "^1.0.4",`
	`120`	`+ "@floating-ui/dom": "1.1.1",`
`121`	`121`	`"classnames": "^2.3.2"`
`122`	`122`	`}`
`123`	`123`	`}`