fix: Correct the size of resize observer (#404)

Author: zombieJ

src/Table.tsx

@@ -313,6 +313,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
   };
 
   // ====================== Scroll ======================
+  const fullTableRef = React.useRef<HTMLDivElement>();
   const scrollHeaderRef = React.useRef<HTMLDivElement>();
   const scrollBodyRef = React.useRef<HTMLDivElement>();
   const [pingedLeft, setPingedLeft] = React.useState(false);
@@ -388,7 +389,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
 
   const onFullTableResize = ({ width }) => {
     triggerOnScroll();
-    setComponentWidth(width);
+    setComponentWidth(fullTableRef.current ? fullTableRef.current.offsetWidth : width);
   };
 
   // Sync scroll bar when init or `fixColumn` changed
@@ -586,6 +587,7 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
       })}
       style={style}
       id={id}
+      ref={fullTableRef}
       {...ariaProps}
     >
       {title && <Panel className={`${prefixCls}-title`}>{title(mergedData)}</Panel>}

tests/ExpandRow.spec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import { resetWarned } from 'rc-util/lib/warning';
+import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 import Table from '../src';
 
 describe('Table.Expand', () => {
@@ -87,33 +88,47 @@ describe('Table.Expand', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
-  it('renders fixed column correctly', () => {
-    const columns = [
-      { title: 'Name', dataIndex: 'name', key: 'name', fixed: true },
-      { title: 'Age', dataIndex: 'age', key: 'age' },
-      { title: 'Gender', dataIndex: 'gender', key: 'gender', fixed: 'right' },
-    ];
-    const data = [
-      { key: 0, name: 'Lucy', age: 27, gender: 'F' },
-      { key: 1, name: 'Jack', age: 28, gender: 'M' },
-    ];
-    const wrapper = mount(
-      createTable({
-        columns,
-        data,
-        scroll: { x: 903 },
-        expandable: { expandedRowRender, defaultExpandAllRows: true },
-      }),
-    );
-    act(() => {
-      wrapper
-        .find('ResizeObserver')
-        .first()
-        .props()
-        .onResize({ width: 1128 });
+  describe('renders fixed column correctly', () => {
+    let domSpy;
+
+    beforeAll(() => {
+      domSpy = spyElementPrototype(HTMLDivElement, 'offsetWidth', {
+        get: () => 1128,
+      });
+    });
+
+    afterAll(() => {
+      domSpy.mockRestore();
+    });
+
+    it('work', () => {
+      const columns = [
+        { title: 'Name', dataIndex: 'name', key: 'name', fixed: true },
+        { title: 'Age', dataIndex: 'age', key: 'age' },
+        { title: 'Gender', dataIndex: 'gender', key: 'gender', fixed: 'right' },
+      ];
+      const data = [
+        { key: 0, name: 'Lucy', age: 27, gender: 'F' },
+        { key: 1, name: 'Jack', age: 28, gender: 'M' },
+      ];
+      const wrapper = mount(
+        createTable({
+          columns,
+          data,
+          scroll: { x: 903 },
+          expandable: { expandedRowRender, defaultExpandAllRows: true },
+        }),
+      );
+      act(() => {
+        wrapper
+          .find('ResizeObserver')
+          .first()
+          .props()
+          .onResize({ width: 1128 });
+      });
+      wrapper.update();
+      expect(wrapper.render()).toMatchSnapshot();
     });
-    wrapper.update();
-    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('renders expand icon to the specify column', () => {

tests/__snapshots__/ExpandRow.spec.js.snap

@@ -101,7 +101,7 @@ exports[`Table.Expand childrenColumnName 1`] = `
 </div>
 `;
 
-exports[`Table.Expand renders fixed column correctly 1`] = `
+exports[`Table.Expand renders fixed column correctly work 1`] = `
 <div
   class="rc-table rc-table-fixed-column rc-table-has-fix-left rc-table-has-fix-right"
 >