-
Notifications
You must be signed in to change notification settings - Fork 165
fix: after selecting and dragging text, the table still scrolls even after releasing the mouse. #328
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
fix: after selecting and dragging text, the table still scrolls even after releasing the mouse. #328
Changes from all commits
f23c381
2aa59f5
0ce568c
bae7ddc
2a1f1b0
24b7327
1fcd09d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -731,4 +731,85 @@ describe('List.Scroll', () => { | |||||||||||||||
|
||||||||||||||||
jest.useRealTimers(); | ||||||||||||||||
}); | ||||||||||||||||
|
||||||||||||||||
it('should not scroll after drop table text', () => { | ||||||||||||||||
|
||||||||||||||||
const onScroll = jest.fn(); | ||||||||||||||||
// 这两个事件绑定在 document | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The comment contains Chinese text. Consider using English for consistency with the rest of the codebase: '// These two events are bound to document'.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
const onDragStart = jest.fn(); | ||||||||||||||||
const onDragEnd = jest.fn(); | ||||||||||||||||
document.addEventListener('dragstart', onDragStart); | ||||||||||||||||
document.addEventListener('dragend', onDragEnd); | ||||||||||||||||
|
||||||||||||||||
const { container } = render( | ||||||||||||||||
<List | ||||||||||||||||
component="ul" | ||||||||||||||||
itemKey="id" | ||||||||||||||||
itemHeight={20} | ||||||||||||||||
height={100} | ||||||||||||||||
data={genData(200)} | ||||||||||||||||
onScroll={onScroll} | ||||||||||||||||
> | ||||||||||||||||
{({ id }) => <li className="fixed-item">{id}</li>} | ||||||||||||||||
</List>, | ||||||||||||||||
); | ||||||||||||||||
// 选择第一个可见的 fixed-item 的文本内容 | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The comment contains Chinese text. Consider using English for consistency: '// Select the text content of the first visible fixed-item'.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
const fixedItems = container.querySelectorAll('.fixed-item'); | ||||||||||||||||
const targetItem = fixedItems[0]; // 使用第一个可见元素 | ||||||||||||||||
if (targetItem) { | ||||||||||||||||
const range = document.createRange(); | ||||||||||||||||
range.selectNodeContents(targetItem); | ||||||||||||||||
const selection = window.getSelection(); | ||||||||||||||||
selection.removeAllRanges(); | ||||||||||||||||
selection.addRange(range); | ||||||||||||||||
} | ||||||||||||||||
// 选中 fixed-item 里的文本并拖拽文本到列表底部 | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The comment contains Chinese text. Consider using English for consistency: '// Select text in fixed-item and drag it to the bottom of the list'.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
const listHolder = container.querySelector('.rc-virtual-list-holder'); | ||||||||||||||||
if (targetItem && listHolder) { | ||||||||||||||||
// 创建选区,选中 fixed-item 的文本 | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The comment contains Chinese text. Consider using English for consistency: '// Create selection range for fixed-item text'.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
const range = document.createRange(); | ||||||||||||||||
range.selectNodeContents(targetItem); | ||||||||||||||||
const selection = window.getSelection(); | ||||||||||||||||
selection.removeAllRanges(); | ||||||||||||||||
selection.addRange(range); | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The text selection logic is duplicated at lines 759-765 and 769-774. Consider extracting this into a helper function to reduce code duplication.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
|
||||||||||||||||
// 模拟拖拽文本 | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The comment contains Chinese text. Consider using English for consistency: '// Simulate text dragging'.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
fireEvent.dragStart(targetItem, { bubbles: true }); | ||||||||||||||||
|
||||||||||||||||
// 拖拽到列表底部 | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The comment contains Chinese text. Consider using English for consistency: '// Drag to bottom of list'.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
const rect = listHolder.getBoundingClientRect(); | ||||||||||||||||
fireEvent.dragOver(listHolder, { | ||||||||||||||||
clientY: rect.bottom + 10, | ||||||||||||||||
bubbles: true, | ||||||||||||||||
}); | ||||||||||||||||
|
||||||||||||||||
// 松开鼠标 | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The comment contains Chinese text. Consider using English for consistency: '// Release mouse'.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
fireEvent.drop(listHolder, { | ||||||||||||||||
clientY: rect.bottom + 10, | ||||||||||||||||
bubbles: true, | ||||||||||||||||
}); | ||||||||||||||||
|
||||||||||||||||
fireEvent.dragEnd(targetItem, { bubbles: true }); | ||||||||||||||||
} | ||||||||||||||||
// 检查 onScroll 没有被触发 | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The comment contains Chinese text. Consider using English for consistency: '// Check that onScroll was not triggered'.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
expect(onScroll).not.toHaveBeenCalled(); | ||||||||||||||||
expect(onDragStart).toHaveBeenCalled(); | ||||||||||||||||
expect(onDragEnd).toHaveBeenCalled(); | ||||||||||||||||
|
||||||||||||||||
// 模拟鼠标移动到列表顶部 | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The comment contains Chinese text. Consider using English for consistency: '// Simulate mouse movement to top of list'.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
if (listHolder) { | ||||||||||||||||
const rect = listHolder.getBoundingClientRect(); | ||||||||||||||||
const mouseMoveEvent = new MouseEvent('mousemove', { | ||||||||||||||||
bubbles: true, | ||||||||||||||||
clientY: rect.top - 10, | ||||||||||||||||
}); | ||||||||||||||||
listHolder.dispatchEvent(mouseMoveEvent); | ||||||||||||||||
} | ||||||||||||||||
// 检查 onScroll 没有被触发 | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The comment contains Chinese text. Consider using English for consistency: '// Check that onScroll was not triggered'.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
expect(onScroll).not.toHaveBeenCalled(); | ||||||||||||||||
|
||||||||||||||||
// 清理事件监听器 | ||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. [nitpick] The comment contains Chinese text. Consider using English for consistency: '// Clean up event listeners'.
Suggested change
Copilot uses AI. Check for mistakes. Positive FeedbackNegative Feedback |
||||||||||||||||
document.removeEventListener('dragstart', onDragStart); | ||||||||||||||||
document.removeEventListener('dragend', onDragEnd); | ||||||||||||||||
}); | ||||||||||||||||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[nitpick] The comment contains Chinese text. Consider using English for consistency: '// Unified function to clear drag state'.
Copilot uses AI. Check for mistakes.