ant-design / ant-design/pro-components

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

Open
#8,985 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🐛 bug 描述

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

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

### 📷 复现步骤

[官方示例](https://procomponents.ant.design/components/drag-sort-table)中的第一个示例就可以复现该问题:拖拽表格中第一项或第二项靠近页面底端,在页面滚动时松开鼠标结束拖拽,即可看到页面持续向下滚动。(不能是最后一项,因为不满足`特定条件ii`)

当表格中条目数量较多时,更容易复现该问题。我从官网第一个示例的sandbox中fork了一个,并将表格中的条目添加至100项,更容易复现问题,可以在[condesanbox](https://codesandbox.io/p/sandbox/tuo-zhuai-pai-xu-forked-9hys8p)中查看。

### 🏞 期望结果

不出现持续滚动的情况。

### 💻 复现代码

详见[condesanbox](https://codesandbox.io/p/sandbox/tuo-zhuai-pai-xu-forked-9hys8p)。

贴一段临时解决方案的实现:
```typescript
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"

### 🚑 其他信息

Contributor guide

Open the contributing guide

Research direction

Start with the DragSortTable first official example and the linked CodeSandbox reproduction, using the reported @ant-design/pro-components 2.7.16 or @ant-design/pro-table 3.18.3 versions. Reproduce a reorder while the page is auto-scrolling, then verify that releasing the drag no longer causes continued scrolling when the table rerenders.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.