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\n并触发滚动
User->>Document: dragstart (原生)
Document->>Hook: dragstart (不改动 onMouseDown)
Note right of Hook #FCE8D6: text selection + drag begins
Document->>Hook: dragend -> clearDragState()
Document->>Hook: mouseup -> clearDragState()
Note right of Hook #FCE8D6: clearDragState 停止滚动并重置锁\ndocument 级别 cleanup 移除监听器
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Pre-merge checks (2 passed, 1 warning)❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Poem
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 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. Comment |
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%
=======================================
Files 19 19
Lines 794 796 +2
Branches 193 191 -2
=======================================
+ Hits 777 779 +2
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
| mouseDownLock = false; | ||
| stopScroll(); | ||
| }; | ||
|
|
src/hooks/useScrollDrag.ts
Outdated
| ele.ownerDocument.removeEventListener('mouseup', onMouseUp); | ||
| ele.ownerDocument.removeEventListener('mouseup', clearDragState); | ||
| ele.ownerDocument.removeEventListener('mousemove', onMouseMove); | ||
| ele.ownerDocument.removeEventListener('dragstart', clearDragState); |
3 participants
🤔 This is a ...
🔗 Related Issues
fix ant-design/ant-design#53924
fix 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