Merge pull request #281 from devtron-labs/fix/tooltip-rerender

fix: recalculate text truncation logic on re-renders

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.1",
+    "version": "0.3.2",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -1,4 +1,4 @@
-import { useCallback, useState, cloneElement } from 'react'
+import { useState, cloneElement } from 'react'
 import TippyJS from '@tippyjs/react'
 import { TooltipProps } from './types'
 
@@ -12,25 +12,26 @@ const Tooltip = ({
 }: TooltipProps) => {
     const [isTextTruncated, setIsTextTruncated] = useState(false)
 
-    const refCallback = useCallback((node: HTMLDivElement) => {
-        if (node) {
-            // NOTE: for line-clamp we need to check scrollHeight against clientHeight since orientation
-            // is set to vertical through -webkit-box-orient prop that is needed for line-clamp to work
-            // see: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
-            setIsTextTruncated(node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight)
+    const handleMouseEnterEvent: React.MouseEventHandler = (event) => {
+        const { currentTarget: node } = event
+        const isTextOverflowing = node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight
+        if (isTextOverflowing && !isTextTruncated) {
+            setIsTextTruncated(true)
+        } else if (!isTextOverflowing && isTextTruncated) {
+            setIsTextTruncated(false)
         }
-    }, [])
+    }
 
     return (!isTextTruncated || !showOnTruncate) && !alwaysShowTippyOnHover ? (
-        cloneElement(child, { ...child.props, ref: refCallback })
+        cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })
     ) : (
         <TippyJS
             arrow={false}
             placement="top"
             {...rest}
             className={`default-tt ${wordBreak ? 'dc__word-break-all' : ''} dc__mxw-200-imp ${rest.className}`}
         >
-            {cloneElement(child, { ...child.props, ref: refCallback })}
+            {cloneElement(child, { ...child.props, onMouseEnter: handleMouseEnterEvent })}
         </TippyJS>
     )
 }