fix: 🐛 forceScroll error (#863)

* fix: dynamic columns, forcescroll error

* chore: patch of scroll sync

* chore: patch for types

Co-authored-by: 二货机器人 <[email protected]>

Author: berber1016

package.json

@@ -64,6 +64,7 @@
     "@types/jest": "^28.1.2",
     "@types/react": "^17.0.35",
     "@types/react-dom": "^18.0.5",
+    "@types/responselike": "^1.0.0",
     "@types/shallowequal": "^1.1.1",
     "@umijs/fabric": "^3.0.0",
     "cross-env": "^7.0.0",

src/Table.tsx

@@ -24,60 +24,60 @@
  *  - All expanded props, move into expandable
  */
 
-import * as React from 'react';
-import isVisible from 'rc-util/lib/Dom/isVisible';
-import pickAttrs from 'rc-util/lib/pickAttrs';
-import { isStyleSupport } from 'rc-util/lib/Dom/styleChecker';
 import classNames from 'classnames';
-import shallowEqual from 'shallowequal';
-import warning from 'rc-util/lib/warning';
 import ResizeObserver from 'rc-resize-observer';
+import isVisible from 'rc-util/lib/Dom/isVisible';
+import { isStyleSupport } from 'rc-util/lib/Dom/styleChecker';
 import { getTargetScrollBarSize } from 'rc-util/lib/getScrollBarSize';
-import ColumnGroup from './sugar/ColumnGroup';
-import Column from './sugar/Column';
+import pickAttrs from 'rc-util/lib/pickAttrs';
+import warning from 'rc-util/lib/warning';
+import * as React from 'react';
+import shallowEqual from 'shallowequal';
+import Body from './Body';
+import ColGroup from './ColGroup';
+import { EXPAND_COLUMN } from './constant';
+import BodyContext from './context/BodyContext';
+import ExpandedRowContext from './context/ExpandedRowContext';
+import ResizeContext from './context/ResizeContext';
+import StickyContext from './context/StickyContext';
+import TableContext from './context/TableContext';
+import FixedHolder from './FixedHolder';
+import Footer, { FooterComponents } from './Footer';
+import type { SummaryProps } from './Footer/Summary';
+import Summary from './Footer/Summary';
 import Header from './Header/Header';
+import useColumns from './hooks/useColumns';
+import { useLayoutState, useTimeoutLock } from './hooks/useFrame';
+import useSticky from './hooks/useSticky';
+import useStickyOffsets from './hooks/useStickyOffsets';
 import type {
-  GetRowKey,
   ColumnsType,
-  TableComponents,
-  Key,
+  ColumnType,
+  CustomizeComponent,
+  CustomizeScrollBody,
   DefaultRecordType,
-  TriggerEventHandler,
-  GetComponentProps,
   ExpandableConfig,
-  LegacyExpandableProps,
+  ExpandableType,
   GetComponent,
+  GetComponentProps,
+  GetRowKey,
+  Key,
+  LegacyExpandableProps,
   PanelRender,
-  TableLayout,
-  ExpandableType,
   RowClassName,
-  CustomizeComponent,
-  ColumnType,
-  CustomizeScrollBody,
+  TableComponents,
+  TableLayout,
   TableSticky,
+  TriggerEventHandler,
 } from './interface';
-import TableContext from './context/TableContext';
-import BodyContext from './context/BodyContext';
-import Body from './Body';
-import useColumns from './hooks/useColumns';
-import { useLayoutState, useTimeoutLock } from './hooks/useFrame';
-import { getPathValue, validateValue, getColumnsKey } from './utils/valueUtil';
-import ResizeContext from './context/ResizeContext';
-import useStickyOffsets from './hooks/useStickyOffsets';
-import ColGroup from './ColGroup';
-import { getExpandableProps } from './utils/legacyUtil';
 import Panel from './Panel';
-import Footer, { FooterComponents } from './Footer';
+import StickyScrollBar from './stickyScrollBar';
+import Column from './sugar/Column';
+import ColumnGroup from './sugar/ColumnGroup';
 import { findAllChildrenKeys, renderExpandIcon } from './utils/expandUtil';
 import { getCellFixedInfo } from './utils/fixUtil';
-import StickyScrollBar from './stickyScrollBar';
-import useSticky from './hooks/useSticky';
-import FixedHolder from './FixedHolder';
-import type { SummaryProps } from './Footer/Summary';
-import Summary from './Footer/Summary';
-import StickyContext from './context/StickyContext';
-import ExpandedRowContext from './context/ExpandedRowContext';
-import { EXPAND_COLUMN } from './constant';
+import { getExpandableProps } from './utils/legacyUtil';
+import { getColumnsKey, getPathValue, validateValue } from './utils/valueUtil';
 
 // Used for conditions cache
 const EMPTY_DATA = [];
@@ -458,8 +458,15 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     if (typeof target === 'function') {
       target(scrollLeft);
     } else if (target.scrollLeft !== scrollLeft) {
-      // eslint-disable-next-line no-param-reassign
       target.scrollLeft = scrollLeft;
+
+      // Delay to force scroll position if not sync
+      // ref: https://github.com/ant-design/ant-design/issues/37179
+      if (target.scrollLeft !== scrollLeft) {
+        setTimeout(() => {
+          target.scrollLeft = scrollLeft;
+        }, 0);
+      }
     }
   }
 
@@ -613,7 +620,9 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
   );
 
   const captionElement =
-    caption !== null && caption !== undefined ? <caption className={`${prefixCls}-caption`}>{caption}</caption> : undefined;
+    caption !== null && caption !== undefined ? (
+      <caption className={`${prefixCls}-caption`}>{caption}</caption>
+    ) : undefined;
 
   const customizeScrollBody = getComponent(['body']) as CustomizeScrollBody<RecordType>;
 

tests/Scroll.spec.js

@@ -114,6 +114,7 @@ describe('Table.Scroll', () => {
           },
         });
     });
+    jest.runAllTimers();
     expect(setScrollLeft).toHaveBeenCalledWith(undefined, 33);
     setScrollLeft.mockReset();