start from main and add debounce

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

Author: gitdallas

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

@@ -2,6 +2,7 @@ import { Fragment, useEffect, useRef, useState, forwardRef, useImperativeHandle
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import { css } from '@patternfly/react-styles';
 import { Tooltip, TooltipPosition, TooltipProps } from '../Tooltip';
+import { getReferenceElement } from '../../helpers';
 import { getResizeObserver } from '../../helpers/resizeObserver';
 import { debounce } from '../../helpers/util';
 
@@ -76,94 +77,82 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
   omissionContent = '\u2026',
   content,
   innerRef,
-  onMouseEnter,
-  onMouseLeave,
-  onFocus,
-  onBlur,
   ...props
 }: TruncateProps) => {
-  const [isTruncated, setIsTruncated] = useState(false);
+  const [isTruncated, setIsTruncated] = useState(true);
+  const [parentElement, setParentElement] = useState<HTMLElement>(null);
+  const [textElement, setTextElement] = useState<HTMLElement>(null);
   const [shouldRenderByMaxChars, setShouldRenderByMaxChars] = useState(maxCharsDisplayed > 0);
-  const [showTooltip, setShowTooltip] = useState(false);
 
   const textRef = useRef<HTMLElement>(null);
   useImperativeHandle(innerRef, () => textRef.current!);
   const defaultSubParentRef = useRef<any>(null);
   const subParentRef = tooltipProps?.triggerRef || defaultSubParentRef;
+  const observer = useRef(null);
 
   if (maxCharsDisplayed <= 0) {
     // eslint-disable-next-line no-console
     console.warn('Truncate: the maxCharsDisplayed must be greater than 0, otherwise no content will be visible.');
   }
 
-  useEffect(() => {
-    if (shouldRenderByMaxChars) {
-      setIsTruncated(content.length > maxCharsDisplayed);
-    }
-  }, [shouldRenderByMaxChars, content.length, maxCharsDisplayed]);
+  const getActualWidth = (element: Element) => {
+    const computedStyle = getComputedStyle(element);
 
-  useEffect(() => {
-    setShouldRenderByMaxChars(maxCharsDisplayed > 0);
-  }, [maxCharsDisplayed]);
+    return (
+      parseFloat(computedStyle.width) -
+      parseFloat(computedStyle.paddingLeft) -
+      parseFloat(computedStyle.paddingRight) -
+      parseFloat(computedStyle.borderRight) -
+      parseFloat(computedStyle.borderLeft)
+    );
+  };
 
-  // Check truncation on mount for without maxChars
-  useEffect(() => {
-    if (!shouldRenderByMaxChars && textRef.current) {
-      setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth);
-    }
-  }, [shouldRenderByMaxChars, content]);
+  const calculateTotalTextWidth = (element: Element, trailingNumChars: number, content: string) => {
+    const firstTextWidth = element.scrollWidth;
+    const firstTextLength = content.length;
+    return (firstTextWidth / firstTextLength) * trailingNumChars + firstTextWidth;
+  };
 
-  const debouncedHandleResize = debounce(() => {
-    if (!shouldRenderByMaxChars && textRef.current) {
-      const isCurrentlyTruncated = textRef.current.scrollWidth > textRef.current.clientWidth;
-      setIsTruncated(isCurrentlyTruncated);
+  useEffect(() => {
+    if (textRef && textRef.current && !textElement) {
+      setTextElement(textRef.current);
     }
-  }, 500);
+  }, [textRef, textElement]);
 
-  // Set up ResizeObserver for non-maxChars truncation
   useEffect(() => {
-    if (!shouldRenderByMaxChars && textRef.current) {
-      const observer = getResizeObserver(textRef.current, debouncedHandleResize, false);
-      return observer;
+    const refElement = getReferenceElement(subParentRef);
+    if (refElement?.parentElement && !parentElement) {
+      setParentElement(refElement.parentElement);
     }
-  }, [shouldRenderByMaxChars, debouncedHandleResize]);
+  }, [subParentRef, parentElement]);
 
-  // Check if content is truncated (called on hover/focus)
-  const checkTruncation = (): boolean => {
-    if (shouldRenderByMaxChars) {
-      return isTruncated;
-    }
+  useEffect(() => {
+    if (textElement && parentElement && !observer.current && !shouldRenderByMaxChars) {
+      const totalTextWidth = calculateTotalTextWidth(textElement, trailingNumChars, content);
+      const textWidth = position === 'middle' ? totalTextWidth : textElement.scrollWidth;
 
-    if (!textRef.current) {
-      return false;
-    }
+      const debouncedHandleResize = debounce(() => {
+        const parentWidth = getActualWidth(parentElement);
+        setIsTruncated(textWidth >= parentWidth);
+      }, 500);
 
-    return textRef.current.scrollWidth > textRef.current.clientWidth;
-  };
+      const observer = getResizeObserver(parentElement, debouncedHandleResize);
 
-  const handleMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
-    if (checkTruncation()) {
-      setShowTooltip(true);
+      return () => {
+        observer();
+      };
     }
-    onMouseEnter?.(e);
-  };
-
-  const handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
-    setShowTooltip(false);
-    onMouseLeave?.(e);
-  };
+  }, [textElement, parentElement, trailingNumChars, content, position, shouldRenderByMaxChars]);
 
-  const handleFocus = (e: React.FocusEvent<HTMLElement>) => {
-    if (checkTruncation()) {
-      setShowTooltip(true);
+  useEffect(() => {
+    if (shouldRenderByMaxChars) {
+      setIsTruncated(content.length > maxCharsDisplayed);
     }
-    onFocus?.(e);
-  };
+  }, [shouldRenderByMaxChars, content.length, maxCharsDisplayed]);
 
-  const handleBlur = (e: React.FocusEvent<HTMLElement>) => {
-    setShowTooltip(false);
-    onBlur?.(e);
-  };
+  useEffect(() => {
+    setShouldRenderByMaxChars(maxCharsDisplayed > 0);
+  }, [maxCharsDisplayed]);
 
   const lrmEntity = <Fragment>&lrm;</Fragment>;
   const isStartPosition = position === TruncatePosition.start;
@@ -252,10 +241,6 @@ 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()}
@@ -264,14 +249,15 @@ const TruncateBase: React.FunctionComponent<TruncateProps> = ({
 
   return (
     <>
-      <Tooltip
-        position={tooltipPosition}
-        content={content}
-        triggerRef={subParentRef}
-        trigger="manual"
-        isVisible={showTooltip}
-        {...tooltipProps}
-      />
+      {isTruncated && (
+        <Tooltip
+          hidden={!isTruncated}
+          position={tooltipPosition}
+          content={content}
+          triggerRef={subParentRef}
+          {...tooltipProps}
+        />
+      )}
       {truncateBody}
     </>
   );

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

@@ -1,11 +1,11 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } 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, trigger, isVisible, ...props }) => (
-    <div data-testid="Tooltip-mock" {...props}>
+    <div data-testid="Tooltip-mock" data-trigger-ref={triggerRef ? 'true' : 'false'} {...props}>
       <div data-testid="Tooltip-mock-content-container">Test {content}</div>
       <p>{`position: ${position}`}</p>
       {children}
@@ -242,3 +242,22 @@ describe('Truncation with maxCharsDisplayed', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+test('Tooltip appears on keyboard focus when external triggerRef is provided (ClipboardCopy regression test)', () => {
+  const mockTriggerRef = { current: document.createElement('div') };
+
+  render(
+    <Truncate
+      content="This is a very long piece of content that should be truncated when the container is too small"
+      tooltipProps={{ triggerRef: mockTriggerRef }}
+      data-testid="truncate-element"
+    />
+  );
+
+  // Simulate keyboard focus on the external trigger element
+  fireEvent.focus(mockTriggerRef.current);
+
+  // The tooltip should be present and visible
+  const tooltip = screen.getByTestId('Tooltip-mock');
+  expect(tooltip).toBeInTheDocument();
+});

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

@@ -4,6 +4,7 @@ exports[`Truncation with maxCharsDisplayed Matches snapshot with default positio
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
+    data-trigger-ref="true"
   >
     <div
       data-testid="Tooltip-mock-content-container"
@@ -42,6 +43,7 @@ exports[`renders default truncation 1`] = `
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
+    data-trigger-ref="true"
   >
     <div
       data-testid="Tooltip-mock-content-container"
@@ -54,6 +56,7 @@ exports[`renders default truncation 1`] = `
   </div>
   <span
     class="pf-v6-c-truncate"
+    tabindex="0"
   >
     <span
       class="pf-v6-c-truncate__start"
@@ -68,6 +71,7 @@ exports[`renders start truncation with &lrm; at start and end 1`] = `
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
+    data-trigger-ref="true"
   >
     <div
       data-testid="Tooltip-mock-content-container"
@@ -80,6 +84,7 @@ exports[`renders start truncation with &lrm; at start and end 1`] = `
   </div>
   <span
     class="pf-v6-c-truncate"
+    tabindex="0"
   >
     <span
       class="pf-v6-c-truncate__end"