update Truncate with fix

Author: kmcfaul

packages/react-core/src/components/Progress/ProgressContainer.tsx

@@ -81,7 +81,7 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
   const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = useState('');
   const titleRef = useRef(null);
-  const onFocus = (event: any) => {
+  const updateTooltip = (event: any) => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(title || event.target.innerHTML);
     } else {
@@ -101,8 +101,8 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
       className={css(progressStyle.progressDescription, _isTruncatedAndString && progressStyle.modifiers.truncate)}
       id={`${parentId}-description`}
       aria-hidden={_isTruncatedAndString ? null : 'true'}
-      onMouseEnter={_isTruncatedAndString ? onFocus : null}
-      onFocus={_isTruncatedAndString ? onFocus : null}
+      onMouseEnter={_isTruncatedAndString ? updateTooltip : null}
+      onFocus={_isTruncatedAndString ? updateTooltip : null}
       {...(_isTruncatedAndString && { tabIndex: 0 })}
       ref={titleRef}
     >

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

@@ -109,11 +109,8 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
       setTextElement(textRef.current);
     }
 
-    if (
-      (refToGetParent?.current || (subParentRef?.current && subParentRef.current.parentElement.parentElement)) &&
-      !parentElement
-    ) {
-      setParentElement(refToGetParent?.current.parentElement || subParentRef?.current.parentElement.parentElement);
+    if ((refToGetParent?.current || (subParentRef?.current && subParentRef.current.parentElement)) && !parentElement) {
+      setParentElement(refToGetParent?.current.parentElement || subParentRef?.current.parentElement);
     }
   }, [textRef, subParentRef, textElement, parentElement]);
 
@@ -224,18 +221,20 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     <span
       ref={subParentRef}
       className={css(styles.truncate, shouldRenderByMaxChars && styles.modifiers.fixed, className)}
+      {...(isTruncated && { tabIndex: 0 })}
       {...props}
     >
       {!shouldRenderByMaxChars ? renderResizeObserverContent() : renderMaxDisplayContent()}
     </span>
   );
 
-  return isTruncated ? (
-    <Tooltip hidden={!isTruncated} position={tooltipPosition} content={content}>
+  return (
+    <>
+      {isTruncated && (
+        <Tooltip hidden={!isTruncated} position={tooltipPosition} content={content} triggerRef={subParentRef} />
+      )}
       {truncateBody}
-    </Tooltip>
-  ) : (
-    truncateBody
+    </>
   );
 };
 

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

@@ -41,6 +41,7 @@ exports[`renders default truncation 1`] = `
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
+    triggerref="[object Object]"
   >
     <div
       data-testid="Tooltip-mock-content-container"
@@ -50,23 +51,25 @@ exports[`renders default truncation 1`] = `
     <p>
       position: top
     </p>
+  </div>
+  <span
+    class="pf-v6-c-truncate"
+    tabindex="0"
+  >
     <span
-      class="pf-v6-c-truncate"
+      class="pf-v6-c-truncate__start"
     >
-      <span
-        class="pf-v6-c-truncate__start"
-      >
-        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
-      </span>
+      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.
     </span>
-  </div>
+  </span>
 </DocumentFragment>
 `;
 
 exports[`renders start truncation with &lrm; at end 1`] = `
 <DocumentFragment>
   <div
     data-testid="Tooltip-mock"
+    triggerref="[object Object]"
   >
     <div
       data-testid="Tooltip-mock-content-container"
@@ -76,15 +79,16 @@ exports[`renders start truncation with &lrm; at end 1`] = `
     <p>
       position: top
     </p>
+  </div>
+  <span
+    class="pf-v6-c-truncate"
+    tabindex="0"
+  >
     <span
-      class="pf-v6-c-truncate"
+      class="pf-v6-c-truncate__end"
     >
-      <span
-        class="pf-v6-c-truncate__end"
-      >
-        Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
-      </span>
+      Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.‎
     </span>
-  </div>
+  </span>
 </DocumentFragment>
 `;