🐛[BUG] DragSortTable 在表格滚动时结束拖拽会导致页面持续滚动

[JasonYanHJ]

🐛 bug 描述

• 描述：在特定条件(见下一项)下，拖拽排序表格后会导致页面持续向下/向上滚动。
• 特定条件：
  1. 拖拽过程中，页面正在滚动（当页面长度较长时，将拖拽内容移动至靠近页面顶部或底部可以使页面处于滚动状态）
  2. 拖拽结束后，确实发生了排序变化，导致表格需要重新渲染

目前找到了一种临时绕过的方案：考虑到特定条件ii，将onDragSortEnd方法中导致表格需要重新渲染的操作（例如各种setState操作）包裹在setTimeout中放至下一个tick执行，可以暂时解决该问题。

📷 复现步骤

官方示例中的第一个示例就可以复现该问题：拖拽表格中第一项或第二项靠近页面底端，在页面滚动时松开鼠标结束拖拽，即可看到页面持续向下滚动。（不能是最后一项，因为不满足特定条件ii）

当表格中条目数量较多时，更容易复现该问题。我从官网第一个示例的sandbox中fork了一个，并将表格中的条目添加至100项，更容易复现问题，可以在condesanbox中查看。

🏞 期望结果

不出现持续滚动的情况。

💻 复现代码

详见condesanbox。

贴一段临时解决方案的实现：

const handleDragSortEnd = (
    beforeIndex: number,
    afterIndex: number,
    newDataSource: any
  ) => {
    console.log("排序后的数据", newDataSource);

    // 问题：当拖拽某一行靠近页面底部，页面会开始向下滚动，在页面向下滚动的过程中释放时，会导致页面持续向下滚动。类似的，也会出现持续向上滚动的情况。（当表格较长时，更容易出现在滚动过程中释放的情况，因而更容易复现该问题）
    // 临时绕过该问题的解决方案：把会导致表格重新渲染的代码放到下一个tick再运行

    // 不会导致持续滚动
    // setTimeout(() => {
    //   setDataSource(newDataSource);
    // });

    // 会导致持续滚动
    setDataSource(newDataSource);

    message.success("修改列表排序成功");
  };

© 版本信息

• ProComponents 版本: "@ant-design/pro-components": "2.7.16"或"@ant-design/pro-table": "3.18.3"

🚑 其他信息