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(); | ||
| }; | ||
|
|
There was a problem hiding this comment.
ๅฏๅฆ็งปๅจๅฐ onMouseUp ็ไฝ็ฝฎ๏ผๅๅฐdiff?
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); |
There was a problem hiding this comment.
ๅ ถๅฎๅฎ็ฐๅฐฑๆฏไธบไบ่ฎฉ drag ็ๆถๅๅฏไปฅๆปๅจๆ่ฟไนๅ็โฆโฆ
๐ค 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