ant-design / ant-design/pro-components
🐛[BUG] DragSortTable 在表格滚动时结束拖拽会导致页面持续滚动
- 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
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