fix: after selecting and dragging text, the table still scrolls even after releasing the mouse. #328
Conversation
The package version was changed from 3.19.2 to 3.19.1, possibly to correct a versioning error or revert a previous update.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Walkthrough在 Changes
Sequence Diagram(s)sequenceDiagram
participant User as 用户
participant Document as Document
participant Hook as useScrollDrag
User->>Document: mousedown (可能选中文本)
Document->>Hook: onMouseDown / onMouseMove (原有行为)
Note right of Hook #DFF2E1: mouseDownLock 可能为 true\n滚动可能正在进行
User->>Document: dragstart (原生)
Document->>Hook: dragstart -> clearDragState()
Note right of Hook #FCE8D6: clearDragState 停止滚动并重置锁
User->>Document: drop / dragend / mouseup
Document->>Hook: dragend / mouseup -> clearDragState()
Note right of Hook #FCE8D6: cleanup 在必要时移除监听器
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #328 +/- ##
==========================================
+ Coverage 97.85% 97.86% +0.01%
==========================================
Files 19 19
Lines 794 798 +4
Branches 193 193
==========================================
+ Hits 777 781 +4
Misses 17 17 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Introduces a test to verify that the list does not scroll when table text is dragged and dropped, ensuring onScroll is not triggered during drag-and-drop interactions.
|
有没有大佬review呀 |
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a bug where text dragging in a table continues to trigger scrolling after the mouse is released. The issue occurred when users selected text, dragged it outside the table, and released the mouse - subsequent mouse movements would still cause unwanted table scrolling.
- Adds native drag event listeners to properly reset drag state during native drag operations
- Introduces a centralized
clearDragStatefunction to handle state cleanup consistently - Adds comprehensive test coverage for the text dragging scenario
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 13 comments.
| File | Description |
|---|---|
| src/hooks/useScrollDrag.ts | Implements drag event handlers and centralizes state cleanup logic |
| tests/scroll.test.js | Adds test case to verify scrolling doesn't occur after text drag operations |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
tests/scroll.test.js (3)
767-772: 重复调用 selectElementText，无实际意义selectElementText 在进入 if 分支前已执行一次，分支内再次调用并不改变行为，建议去除以避免混淆。
- if (targetItem && listHolder) { - selectElementText(targetItem); + if (targetItem && listHolder) {
735-735: 用例标题建议从“table”改为“list”本仓库场景是虚拟列表，标题中的 “table” 容易引起误解，建议更准确表达。
-it('should not scroll after drop table text', () => { +it('should not scroll after dropping selected list text', () => {
761-761: 选择器与渲染结构的耦合建议降低为了选择目标元素，这里给 li 人为加上了 fixed-item 类。虽然能工作，但会让测试对类名有依赖。也可以直接选择第一个 li 元素，贴近真实渲染结构，降低耦合。
- {({ id }) => <li className="fixed-item">{id}</li>} + {({ id }) => <li>{id}</li>}同时把后续查询改为：
- const fixedItems = container.querySelectorAll('.fixed-item'); + const fixedItems = container.querySelectorAll('li');
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/hooks/useScrollDrag.ts(3 hunks)tests/scroll.test.js(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/hooks/useScrollDrag.ts
🤔 This is a ...
🔗 Related Issues
ant-design/ant-design#53924
ant-design/ant-design#54548
💡 Background and Solution
选择文本，鼠标按住文本拖拽到表格外边，松开鼠标，鼠标上下移动会触发表格滚动
467032935-9bec2f1c-866f-40d0-be9e-b6e19b6c0be8.mov
rc-virtual-list 的 useScrollDrag hook 监听 mouseup
📝 Change Log
Summary by CodeRabbit
Bug Fixes
Tests