From 89f55f2985ae598b2b114bce51d97d6126a16ea7 Mon Sep 17 00:00:00 2001
From: huiliangShen <alal2al@hotmail.com>
Date: Fri, 6 Sep 2024 15:46:39 +0800
Subject: [PATCH] fix: virtual table display error (#50737)

---
 .../table/__tests__/Table.virtual.test.tsx    | 107 ++++++++++++++++++
 components/table/style/virtual.ts             |  13 ++-
 2 files changed, 116 insertions(+), 4 deletions(-)

diff --git a/components/table/__tests__/Table.virtual.test.tsx b/components/table/__tests__/Table.virtual.test.tsx
index a9404d13b5..251bae09a0 100644
--- a/components/table/__tests__/Table.virtual.test.tsx
+++ b/components/table/__tests__/Table.virtual.test.tsx
@@ -43,4 +43,111 @@ describe('Table.Virtual', () => {
     expect(errSpy).toHaveBeenCalledWith('Warning: `scroll.y` in virtual table must be number.');
     errSpy.mockRestore();
   });
+
+  it('should work with edit cell', () => {
+    const EditableRow: React.FC = ({ ...props }) => <tr {...props} />;
+
+    const EditableCell: React.FC<React.PropsWithChildren<any>> = ({ children, ...restProps }) => (
+      <td {...restProps}>{children}</td>
+    );
+
+    const components = {
+      body: {
+        row: EditableRow,
+        cell: EditableCell,
+      },
+    };
+
+    const { container } = render(
+      <Table
+        virtual
+        components={components}
+        scroll={{ y: 100 }}
+        columns={[
+          {
+            dataIndex: 'key',
+          },
+        ]}
+        dataSource={[
+          {
+            key: 'bamboo',
+          },
+        ]}
+      />,
+    );
+
+    expect(
+      container.querySelectorAll('.ant-table-wrapper .ant-table-tbody-virtual .ant-table-row'),
+    ).toHaveLength(1);
+    expect(
+      container.querySelectorAll('.ant-table-tbody-virtual-holder .ant-table-cell'),
+    ).toHaveLength(1);
+    expect(
+      container.querySelector('.ant-table-tbody-virtual-holder .ant-table-cell')?.textContent,
+    ).toEqual('bamboo');
+    const styleMap = getComputedStyle(
+      container.querySelector<HTMLElement>(
+        '.ant-table-wrapper .ant-table-tbody-virtual .ant-table-row',
+      )!,
+    );
+    expect(styleMap.display).toEqual('flex');
+  });
+
+  it('should work with sub table', () => {
+    const expandedRowRender = () => {
+      const columns = [
+        { title: 'Date', dataIndex: 'date', key: 'date' },
+        { title: 'Name', dataIndex: 'name', key: 'name' },
+        { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
+      ];
+      const data = [];
+      for (let i = 0; i < 3; ++i) {
+        data.push({
+          key: i.toString(),
+          date: '2014-12-24 23:12:00',
+          name: 'This is production name',
+          upgradeNum: 'Upgraded: 56',
+        });
+      }
+      return <Table columns={columns} dataSource={data} pagination={false} />;
+    };
+    const { container } = render(
+      <Table
+        columns={[
+          {
+            dataIndex: 'key',
+          },
+        ]}
+        expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}
+        dataSource={[
+          {
+            key: '0',
+          },
+        ]}
+        size="middle"
+        virtual
+        scroll={{ y: 200 }}
+      />,
+    );
+
+    expect(
+      container.querySelectorAll('.ant-table-tbody-virtual-holder-inner > div > .ant-table-row'),
+    ).toHaveLength(1);
+    expect(
+      container.querySelectorAll(
+        '.ant-table-tbody-virtual-holder-inner > div > .ant-table-row > .ant-table-cell',
+      )?.[1]?.textContent,
+    ).toEqual('0');
+
+    expect(
+      container.querySelectorAll('.ant-table-tbody-virtual-holder .ant-table-expanded-row'),
+    ).toHaveLength(1);
+
+    const styleMap = getComputedStyle(
+      container.querySelector<HTMLElement>(
+        '.ant-table-tbody-virtual-holder .ant-table-expanded-row .ant-table-row',
+      )!,
+    );
+    expect(styleMap.display).toEqual('table-row');
+  });
 });
diff --git a/components/table/style/virtual.ts b/components/table/style/virtual.ts
index 61c2e659d4..38978211df 100644
--- a/components/table/style/virtual.ts
+++ b/components/table/style/virtual.ts
@@ -15,10 +15,15 @@ const genVirtualStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
     [`${componentCls}-wrapper`]: {
       // ========================== Row ==========================
       [`${componentCls}-tbody-virtual`]: {
-        [`${componentCls}-row:not(tr)`]: {
-          display: 'flex',
-          boxSizing: 'border-box',
-          width: '100%',
+        [`${componentCls}-tbody-virtual-holder-inner`]: {
+          [`
+            & > ${componentCls}-row, 
+            & > div:not(${componentCls}-row) > ${componentCls}-row
+          `]: {
+            display: 'flex',
+            boxSizing: 'border-box',
+            width: '100%',
+          },
         },
 
         [`${componentCls}-cell`]: {