check truncated before showing tooltip

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>

Author: gitdallas

packages/react-core/src/components/Truncate/Truncate.tsx

@@ -74,10 +74,15 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
   omissionContent = '\u2026',
   content,
   innerRef,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
   ...props
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = useState(true);
   const [shouldRenderByMaxChars, setShouldRenderByMaxChars] = useState(maxCharsDisplayed > 0);
+  const [showTooltip, setShowTooltip] = useState(false);
 
   const textRef = useRef<HTMLElement>(null);
   useImperativeHandle(innerRef, () => textRef.current!);
@@ -93,12 +98,49 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
     if (shouldRenderByMaxChars) {
       setIsTruncated(content.length > maxCharsDisplayed);
     }
-  }, [shouldRenderByMaxChars]);
+  }, [shouldRenderByMaxChars, content.length, maxCharsDisplayed]);
 
   useEffect(() => {
     setShouldRenderByMaxChars(maxCharsDisplayed > 0);
   }, [maxCharsDisplayed]);
 
+  // Check if content is truncated (called on hover/focus)
+  const checkTruncation = (): boolean => {
+    if (shouldRenderByMaxChars) {
+      return isTruncated;
+    }
+
+    if (!textRef.current) {
+      return false;
+    }
+
+    return textRef.current.scrollWidth > textRef.current.clientWidth;
+  };
+
+  const handleMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
+    if (checkTruncation()) {
+      setShowTooltip(true);
+    }
+    onMouseEnter?.(e);
+  };
+
+  const handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
+    setShowTooltip(false);
+    onMouseLeave?.(e);
+  };
+
+  const handleFocus = (e: React.FocusEvent<HTMLElement>) => {
+    if (checkTruncation()) {
+      setShowTooltip(true);
+    }
+    onFocus?.(e);
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLElement>) => {
+    setShowTooltip(false);
+    onBlur?.(e);
+  };
+
   const lrmEntity = <Fragment>&lrm;</Fragment>;
   const isStartPosition = position === TruncatePosition.start;
   const isEndPosition = position === TruncatePosition.end;
@@ -186,6 +228,10 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
       href={href}
       className={css(styles.truncate, shouldRenderByMaxChars && styles.modifiers.fixed, className)}
       {...(isTruncated && !href && !tooltipProps?.triggerRef && { tabIndex: 0 })}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
       {...props}
     >
       {!shouldRenderByMaxChars ? renderResizeObserverContent() : renderMaxDisplayContent()}
@@ -194,15 +240,14 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
 
   return (
     <>
-      {isTruncated && (
-        <Tooltip
-          hidden={!isTruncated}
-          position={tooltipPosition}
-          content={content}
-          triggerRef={subParentRef}
-          {...tooltipProps}
-        />
-      )}
+      <Tooltip
+        position={tooltipPosition}
+        content={content}
+        triggerRef={subParentRef}
+        trigger="manual"
+        isVisible={showTooltip}
+        {...tooltipProps}
+      />
       {truncateBody}
     </>
   );

packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx

@@ -1,10 +1,10 @@
-import { render, screen, within } from '@testing-library/react';
-import { Truncate, TruncatePosition } from '../Truncate';
+import { render, screen } from '@testing-library/react';
+import { Truncate } from '../Truncate';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import '@testing-library/jest-dom';
 
 jest.mock('../../Tooltip', () => ({
-  Tooltip: ({ content, position, children, triggerRef, ...props }) => (
+  Tooltip: ({ content, position, children, triggerRef, trigger, isVisible, ...props }) => (
     <div data-testid="Tooltip-mock" {...props}>
       <div data-testid="Tooltip-mock-content-container">Test {content}</div>
       <p>{`position: ${position}`}</p>