fix(table): fix row hover with expanded offset rowSpan (#1488)

* fix(table): fix row hover with expanded offset rowSpan

* fix(table): preserve hover rowSpan with expanded offset

Respect legacy render rowSpan when calculating hover ranges and avoid mutating objects returned by onCell. Add regression coverage for legacy cells, stable props, StrictMode, and expanded row rerenders.

* Update tests/Hover.spec.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* refactor(table): clarify origin rowSpan

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>

Author: 3 people

src/Body/BodyRow.tsx

@@ -84,7 +84,8 @@ export function getCellProps<RecordType>(
     );
   }
 
-  const additionalCellProps = column.onCell?.(record, index) || {};
+  const additionalCellProps = { ...column.onCell?.(record, index) };
+  let originRowSpan: number | undefined;
 
   // Expandable row has offset
   if (expandedRowOffset) {
@@ -93,6 +94,7 @@ export function getCellProps<RecordType>(
     // For expandable row with rowSpan,
     // We should increase the rowSpan if the row is expanded
     if (expandable && rowSpan && colIndex < expandedRowOffset) {
+      originRowSpan = rowSpan;
       let currentRowSpan = rowSpan;
 
       for (let i = index; i < index + rowSpan; i += 1) {
@@ -110,6 +112,7 @@ export function getCellProps<RecordType>(
     fixedInfo,
     appendCellNode,
     additionalCellProps: additionalCellProps,
+    originRowSpan,
   };
 }
 
@@ -188,7 +191,7 @@ const BodyRow = <RecordType extends { children?: readonly RecordType[] }>(
       {flattenColumns.map((column: ColumnType<RecordType>, colIndex) => {
         const { render, dataIndex, className: columnClassName } = column;
 
-        const { key, fixedInfo, appendCellNode, additionalCellProps } = getCellProps(
+        const { key, fixedInfo, appendCellNode, additionalCellProps, originRowSpan } = getCellProps(
           rowInfo,
           column,
           colIndex,
@@ -217,6 +220,7 @@ const BodyRow = <RecordType extends { children?: readonly RecordType[] }>(
             {...fixedInfo}
             appendNode={appendCellNode}
             additionalProps={additionalCellProps}
+            originRowSpan={originRowSpan}
           />
         );
       })}

src/Cell/index.tsx

@@ -52,6 +52,8 @@ export interface CellProps<RecordType extends DefaultRecordType> {
   /** @private Used for `expandable` with nest tree */
   appendNode?: React.ReactNode;
   additionalProps?: React.TdHTMLAttributes<HTMLTableCellElement>;
+  /** @private Original rowSpan before patching it for expanded rows */
+  originRowSpan?: number;
 
   rowType?: 'header' | 'body' | 'footer';
 
@@ -123,6 +125,7 @@ const Cell = <RecordType,>(props: CellProps<RecordType>) => {
     // Private
     appendNode,
     additionalProps = {},
+    originRowSpan,
     isSticky,
   } = props;
 
@@ -183,13 +186,14 @@ const Cell = <RecordType,>(props: CellProps<RecordType>) => {
   // ================ RowSpan & ColSpan =================
   const mergedColSpan = legacyCellProps?.colSpan ?? additionalProps.colSpan ?? colSpan ?? 1;
   const mergedRowSpan = legacyCellProps?.rowSpan ?? additionalProps.rowSpan ?? rowSpan ?? 1;
+  const mergedHoverRowSpan = legacyCellProps?.rowSpan ?? originRowSpan ?? mergedRowSpan;
 
   // ====================== Hover =======================
-  const [hovering, onHover] = useHoverState(index, mergedRowSpan);
+  const [hovering, onHover] = useHoverState(index, mergedHoverRowSpan);
 
   const onMouseEnter: React.MouseEventHandler<HTMLTableCellElement> = useEvent(event => {
     if (record) {
-      onHover(index, index + mergedRowSpan - 1);
+      onHover(index, index + mergedHoverRowSpan - 1);
     }
 
     additionalProps?.onMouseEnter?.(event);

src/VirtualTable/VirtualCell.tsx

@@ -57,7 +57,7 @@ const VirtualCell = <RecordType,>(props: VirtualCellProps<RecordType>) => {
   const { columnsOffset } = useContext(GridContext, ['columnsOffset']);
 
   // TODO: support `expandableRowOffset`
-  const { key, fixedInfo, appendCellNode, additionalCellProps } = getCellProps(
+  const { key, fixedInfo, appendCellNode, additionalCellProps, originRowSpan } = getCellProps(
     rowInfo,
     column,
     colIndex,
@@ -128,6 +128,7 @@ const VirtualCell = <RecordType,>(props: VirtualCellProps<RecordType>) => {
       shouldCellUpdate={column.shouldCellUpdate}
       {...fixedInfo}
       appendNode={appendCellNode}
+      originRowSpan={originRowSpan}
       additionalProps={{
         ...additionalCellProps,
         style: mergedStyle,

tests/Hover.spec.tsx

@@ -5,6 +5,7 @@ import Table from '../src';
 import type { TableProps } from '../src/Table';
 
 describe('Table.Hover', () => {
+  const hoverClassName = 'rc-table-cell-row-hover';
   const data = [
     { key: 'key0', name: 'Lucy' },
     { key: 'key1', name: 'Jack' },
@@ -127,6 +128,166 @@ describe('Table.Hover', () => {
     expect(container.querySelector('.rc-table-cell-row-hover')).toBeFalsy();
   });
 
+  it('does not let expanded row offset rowSpan affect hover range', () => {
+    const { container } = render(
+      <Table
+        rowKey="key"
+        columns={[
+          {
+            dataIndex: 'group',
+            onCell: (_, index) => {
+              if (index === 0) {
+                return { rowSpan: 2 };
+              }
+              if (index === 1) {
+                return { rowSpan: 0 };
+              }
+              return {};
+            },
+          },
+          Table.EXPAND_COLUMN,
+          {
+            dataIndex: 'name',
+          },
+        ]}
+        data={[
+          { key: 'a', group: 'Group 1', name: 'Alpha' },
+          { key: 'b', group: 'Group 1', name: 'Beta' },
+          { key: 'c', group: 'Group 2', name: 'Gamma' },
+        ]}
+        expandable={{
+          expandedRowOffset: 1,
+          expandedRowKeys: ['a'],
+          expandedRowRender: record => <span>expanded {record.key}</span>,
+        }}
+      />,
+    );
+
+    const getCell = (text: string) => {
+      const cell = Array.from(container.querySelectorAll<HTMLTableCellElement>('tbody td')).find(
+        cell => cell.textContent === text,
+      );
+      expect(cell).toBeTruthy();
+      return cell!;
+    };
+
+    const groupCell = getCell('Group 1');
+    const betaCell = getCell('Beta');
+    const gammaCell = getCell('Gamma');
+
+    expect(groupCell.getAttribute('rowspan')).toBe('3');
+
+    fireEvent.mouseEnter(groupCell);
+    expect(groupCell.classList.contains(hoverClassName)).toBe(true);
+    expect(betaCell.classList.contains(hoverClassName)).toBe(true);
+    expect(gammaCell.classList.contains(hoverClassName)).toBe(false);
+
+    fireEvent.mouseEnter(gammaCell);
+    expect(groupCell.classList.contains(hoverClassName)).toBe(false);
+    expect(gammaCell.classList.contains(hoverClassName)).toBe(true);
+  });
+
+  it('keeps legacy render rowSpan priority for hover range', () => {
+    const { container } = render(
+      <Table
+        rowKey="key"
+        columns={[
+          {
+            dataIndex: 'group',
+            render: (value, _, index) => ({
+              children: value,
+              props: { rowSpan: index === 0 ? 2 : 0 },
+            }),
+          },
+          Table.EXPAND_COLUMN,
+          {
+            dataIndex: 'name',
+          },
+        ]}
+        data={[
+          { key: 'a', group: 'Group 1', name: 'Alpha' },
+          { key: 'b', group: 'Group 1', name: 'Beta' },
+          { key: 'c', group: 'Group 2', name: 'Gamma' },
+        ]}
+        expandable={{
+          expandedRowOffset: 1,
+          defaultExpandAllRows: true,
+          expandedRowRender: record => <span>expanded {record.key}</span>,
+        }}
+      />,
+    );
+
+    const getCell = (text: string) => {
+      const cell = Array.from(container.querySelectorAll<HTMLTableCellElement>('tbody td')).find(
+        item => item.textContent === text,
+      );
+      expect(cell).toBeTruthy();
+      return cell!;
+    };
+
+    const groupCell = getCell('Group 1');
+    const alphaCell = getCell('Alpha');
+    const betaCell = getCell('Beta');
+    const gammaCell = getCell('Gamma');
+
+    expect(groupCell.getAttribute('rowspan')).toBe('2');
+
+    fireEvent.mouseEnter(groupCell);
+    expect(alphaCell.classList.contains(hoverClassName)).toBe(true);
+    expect(betaCell.classList.contains(hoverClassName)).toBe(true);
+    expect(gammaCell.classList.contains(hoverClassName)).toBe(false);
+  });
+
+  it('does not mutate stable onCell props across expanded row renders', () => {
+    const rowSpanProps = [{ rowSpan: 2 }, { rowSpan: 0 }, {}];
+    const dataSource = [
+      { key: 'a', group: 'Group 1', name: 'Alpha' },
+      { key: 'b', group: 'Group 1', name: 'Beta' },
+      { key: 'c', group: 'Group 2', name: 'Gamma' },
+    ];
+
+    const createTableWithExpandedKeys = (expandedRowKeys: React.Key[]) => (
+      <React.StrictMode>
+        <Table
+          rowKey="key"
+          columns={[
+            {
+              dataIndex: 'group',
+              onCell: (_, index) => rowSpanProps[index],
+            },
+            Table.EXPAND_COLUMN,
+            {
+              dataIndex: 'name',
+            },
+          ]}
+          data={dataSource}
+          expandable={{
+            expandedRowOffset: 1,
+            expandedRowKeys,
+            expandedRowRender: record => <span>expanded {record.key}</span>,
+          }}
+        />
+      </React.StrictMode>
+    );
+
+    const { container, rerender } = render(createTableWithExpandedKeys([]));
+    const getGroupCell = () =>
+      Array.from(container.querySelectorAll<HTMLTableCellElement>('tbody td')).find(
+        cell => cell.textContent === 'Group 1',
+      )!;
+
+    expect(rowSpanProps[0].rowSpan).toBe(2);
+    expect(getGroupCell().getAttribute('rowspan')).toBe('2');
+
+    rerender(createTableWithExpandedKeys(['a']));
+    expect(rowSpanProps[0].rowSpan).toBe(2);
+    expect(getGroupCell().getAttribute('rowspan')).toBe('3');
+
+    rerender(createTableWithExpandedKeys([]));
+    expect(rowSpanProps[0].rowSpan).toBe(2);
+    expect(getGroupCell().getAttribute('rowspan')).toBe('2');
+  });
+
   describe('perf', () => {
     it('legacy mode should render every time', () => {
       let renderTimes = 0;