Apply correct styles for cell hover reveal during cell edition

KevinVandy · Oct 29, 2024 · ac34389 · ac34389
1 parent dea32fa
commit ac34389
Showing 1 changed file with 11 additions and 9 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
@@ -192,15 +192,16 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   };
 
   const cellHoverRevealDivRef = useRef<any>(null);
-  const [isCellContentOverflowing, setIsCellContentOverflowing] = useState(false);
+  const [isCellContentOverflowing, setIsCellContentOverflowing] =
+    useState(false);
 
   useLayoutEffect(() => {
     const div = cellHoverRevealDivRef.current;
     if (div) {
       const isOverflow = div.scrollWidth > div.clientWidth;
       setIsCellContentOverflowing(isOverflow);
     }
-  }, [tableCellProps.children]);
+  }, [cell]);
 
   const renderCellContent = () => {
     if (cell.getIsPlaceholder()) {
@@ -241,7 +242,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 
     return <MRT_TableBodyCellValue {...cellValueProps} />;
   };
-
   return (
     <TableTd
       data-column-pinned={isColumnPinned || undefined}
@@ -288,6 +288,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         isEditable &&
           ['cell', 'table'].includes(editDisplayMode ?? '') &&
           columnDefType !== 'display' &&
+          !isCellContentOverflowing &&
           classes['root-editable-hover'],
         columnDefType === 'data' && classes['root-data-col'],
         density === 'xs' && classes['root-nowrap'],
@@ -302,13 +303,15 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       })}
     >
       <>
-        {tableCellProps.children ?? (
-          columnDef.enableCellHoverReveal ? (
+        {tableCellProps.children ??
+          (columnDef.enableCellHoverReveal ? (
             <div
               ref={cellHoverRevealDivRef}
               className={clsx(
-                columnDef.enableCellHoverReveal && classes["cell-hover-reveal"],
-                isCellContentOverflowing && classes['overflowing']
+                columnDef.enableCellHoverReveal &&
+                  !(isCreating || isEditing) &&
+                  classes['cell-hover-reveal'],
+                isCellContentOverflowing && classes['overflowing'],
               )}
             >
               {renderCellContent()}
@@ -323,8 +326,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
                 <> ({row.subRows?.length})</>
               )}
             </>
-          )
-        )}
+          ))}
       </>
     </TableTd>
   );