fix: prevent duplicate force-rendered content in virtual tables

Author: nikzanda

README.md

@@ -82,7 +82,7 @@ Then open `http://localhost:8000`.
 | expandable.defaultExpandedRowKeys | String[] | [] | initial expanded rows keys |
 | expandable.expandedRowKeys | String[] |  | current expanded rows keys |
 | expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode |  | Content render to expanded row |
-| expandable.forceRender | Boolean | false | Force render expanded row content before expansion |
+| expandable.forceRender | Boolean | false | Force render expanded row content before expansion. In virtual mode, only rows currently mounted by the virtual list are force-rendered; off-screen rows may still be unmounted |
 | expandable.expandedRowClassName | `string` \| `(recode, index, indent) => string` |  | get expanded row's className |
 | expandable.expandRowByClick | boolean |  | Support expand by click row |
 | expandable.expandIconColumnIndex | Number | 0 | The index of expandIcon which column will be inserted when expandIconAsCell is false |

README.zh-CN.md

@@ -82,7 +82,7 @@ npm start
 | expandable.defaultExpandedRowKeys | String[] | [] | 初始扩展行键 |
 | expandable.expandedRowKeys | String[] |  | 当前扩展行键 |
 | expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode |  | 内容渲染到扩展行 |
-| expandable.forceRender | Boolean | false | 在展开前强制渲染展开行内容 |
+| expandable.forceRender | Boolean | false | 在展开前强制渲染展开行内容。虚拟模式下，仅强制渲染虚拟列表当前挂载的行；屏幕外的行仍可能被卸载 |
 | expandable.expandedRowClassName | `string` \| `(recode, index, indent) => string` |  | 获取扩展行的 className |
 | expandable.expandRowByClick | boolean |  | 支持点击行展开 |
 | expandable.expandIconColumnIndex | Number | 0 | ExpandIconAsCell 为 false 时将插入哪一列的 ExpandIcon 索引 |

src/Table.tsx

@@ -910,7 +910,7 @@ const Table = <RecordType extends DefaultRecordType>(
       expandableType,
       expandRowByClick: expandableConfig.expandRowByClick,
       expandedRowRender: expandableConfig.expandedRowRender,
-      forceRender: expandableConfig.forceRender,
+      forceRender: expandableConfig.forceRender ?? false,
       expandedRowOffset: expandableConfig.expandedRowOffset,
       onTriggerExpand,
       expandIconColumnIndex: expandableConfig.expandIconColumnIndex,

src/VirtualTable/BodyLine.tsx

@@ -55,7 +55,7 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
   const expandedClsName = computedExpandedClassName(expandedRowClassName, record, index, indent);
 
   let expandRowNode: React.ReactElement<any>;
-  if (rowSupportExpand && (forceRender || expanded)) {
+  if (!extra && rowSupportExpand && (forceRender || expanded)) {
     const expandContent = expandedRowRender(record, index, indent + 1, expanded);
 
     let additionalProps: React.TdHTMLAttributes<HTMLElement> = {};

tests/ExpandRow.spec.jsx

@@ -70,6 +70,65 @@ describe('Table.Expand', () => {
     expect(expandedRows[1]).toHaveStyle({ display: 'none' });
   });
 
+  it('keeps force-rendered expanded content mounted across expand and collapse', () => {
+    const onMount = vi.fn();
+    const onUnmount = vi.fn();
+
+    class StatefulContent extends React.Component {
+      state = { count: 0 };
+
+      componentDidMount() {
+        onMount();
+      }
+
+      componentWillUnmount() {
+        onUnmount();
+      }
+
+      render() {
+        return (
+          <button
+            type="button"
+            className="stateful-expanded-content"
+            onClick={() => this.setState(({ count }) => ({ count: count + 1 }))}
+          >
+            {this.state.count}
+          </button>
+        );
+      }
+    }
+
+    const { container } = render(
+      createTable({
+        data: [sampleData[0]],
+        expandable: {
+          expandedRowRender: () => <StatefulContent />,
+          forceRender: true,
+        },
+      }),
+    );
+
+    const expandIcon = container.querySelector('.rc-table-row-expand-icon');
+    const content = container.querySelector('.stateful-expanded-content');
+
+    expect(onMount).toHaveBeenCalledTimes(1);
+    expect(onUnmount).not.toHaveBeenCalled();
+
+    fireEvent.click(expandIcon);
+    fireEvent.click(content);
+    expect(content).toHaveTextContent('1');
+
+    fireEvent.click(expandIcon);
+    expect(container.querySelector('.stateful-expanded-content')).toBe(content);
+    expect(onUnmount).not.toHaveBeenCalled();
+
+    fireEvent.click(expandIcon);
+    expect(container.querySelector('.stateful-expanded-content')).toBe(content);
+    expect(content).toHaveTextContent('1');
+    expect(onMount).toHaveBeenCalledTimes(1);
+    expect(onUnmount).not.toHaveBeenCalled();
+  });
+
   it('renders tree row correctly', () => {
     const data = [
       {

tests/Virtual.spec.tsx

@@ -211,6 +211,95 @@ describe('Table.Virtual', () => {
       });
     });
 
+    it('keeps force-rendered expanded content mounted across expand and collapse', () => {
+      const onMount = vi.fn();
+      const onUnmount = vi.fn();
+
+      class StatefulContent extends React.Component<unknown, { count: number }> {
+        state = { count: 0 };
+
+        componentDidMount() {
+          onMount();
+        }
+
+        componentWillUnmount() {
+          onUnmount();
+        }
+
+        render() {
+          return (
+            <button
+              type="button"
+              className="stateful-expanded-content"
+              onClick={() => this.setState(({ count }) => ({ count: count + 1 }))}
+            >
+              {this.state.count}
+            </button>
+          );
+        }
+      }
+
+      const { container } = getTable({
+        data: [{ name: 'name0', age: 0, address: 'address0' }],
+        expandable: {
+          expandedRowRender: () => <StatefulContent />,
+          forceRender: true,
+        },
+      });
+
+      const expandIcon = container.querySelector('.rc-table-row-expand-icon')!;
+      const content = container.querySelector('.stateful-expanded-content')!;
+
+      expect(onMount).toHaveBeenCalledTimes(1);
+      expect(onUnmount).not.toHaveBeenCalled();
+
+      fireEvent.click(expandIcon);
+      fireEvent.click(content);
+      expect(content).toHaveTextContent('1');
+
+      fireEvent.click(expandIcon);
+      expect(container.querySelector('.stateful-expanded-content')).toBe(content);
+      expect(onUnmount).not.toHaveBeenCalled();
+
+      fireEvent.click(expandIcon);
+      expect(container.querySelector('.stateful-expanded-content')).toBe(content);
+      expect(content).toHaveTextContent('1');
+      expect(onMount).toHaveBeenCalledTimes(1);
+      expect(onUnmount).not.toHaveBeenCalled();
+    });
+
+    it('does not duplicate force-rendered content for rowSpan overlay lines', () => {
+      const expandedRowRender = vi.fn((record: { name: string }) => (
+        <span data-expanded-record={record.name}>{record.name}</span>
+      ));
+      const data = [
+        { name: 'name0', age: 0, address: 'address0' },
+        { name: 'name1', age: 1, address: 'address1' },
+      ];
+      const { container } = getTable({
+        data,
+        columns: [
+          {
+            dataIndex: 'name',
+            onCell: (_, index) => ({
+              rowSpan: index === 0 ? 2 : 0,
+            }),
+          },
+        ],
+        expandable: {
+          expandedRowRender,
+          forceRender: true,
+        },
+      });
+
+      expect(container.querySelector('.rc-table-row-extra')).toBeTruthy();
+      expect(expandedRowRender).toHaveBeenCalledTimes(2);
+      expect(expandedRowRender).toHaveBeenNthCalledWith(1, data[0], 0, 1, false);
+      expect(expandedRowRender).toHaveBeenNthCalledWith(2, data[1], 1, 1, false);
+      expect(container.querySelectorAll('[data-expanded-record="name0"]')).toHaveLength(1);
+      expect(container.querySelectorAll('[data-expanded-record="name1"]')).toHaveLength(1);
+    });
+
     it('applies expanded row class to tree rows', () => {
       const { container } = getTable({
         data: [