Measure overflow on mouseEnter

KevinVandy · Oct 30, 2024 · 5e8c6ad · 5e8c6ad
1 parent ee45661
commit 5e8c6ad
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -7,7 +7,6 @@ import {
   type RefObject,
   memo,
   useEffect,
-  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
@@ -195,16 +194,19 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   const [isCellContentOverflowing, setIsCellContentOverflowing] =
     useState(false);
 
-  useLayoutEffect(() => {
+  const onMouseEnter = () => {
+    if(!columnDef.enableCellHoverReveal) return;
     const div = cellHoverRevealDivRef.current;
     if (div) {
-      // Use setTimeout(0) to ensure DOM is fully updated before measuring overflow
-      setTimeout(() => {
         const isOverflow = div.scrollWidth > div.clientWidth;
         setIsCellContentOverflowing(isOverflow);
-      }, 0);
     }
-  }, [cell, density]);
+  }
+
+  const onMouseLeave = () => {
+    if(!columnDef.enableCellHoverReveal) return;
+    setIsCellContentOverflowing(false);
+  }
 
   const renderCellContent = () => {
     if (cell.getIsPlaceholder()) {
@@ -304,6 +306,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         ...widthStyles,
         ...parseFromValuesOrFunc(tableCellProps.style, theme),
       })}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
     >
       <>
         {tableCellProps.children ??