From f23c3816f6a66a3d80244d20cadb5c5f4b60ec48 Mon Sep 17 00:00:00 2001 From: zhengjihao <2714499297@qq.com> Date: Wed, 16 Jul 2025 19:11:14 +0800 Subject: [PATCH 01/11] fix: enhance useScrollDrag with unified drag state cleanup --- src/hooks/useScrollDrag.ts | 38 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/src/hooks/useScrollDrag.ts b/src/hooks/useScrollDrag.ts index 36dfaab..676ee14 100644 --- a/src/hooks/useScrollDrag.ts +++ b/src/hooks/useScrollDrag.ts @@ -38,6 +38,12 @@ export default function useScrollDrag( }); }; + // 清理拖拽状态的统一函数 + const clearDragState = () => { + mouseDownLock = false; + stopScroll(); + }; + const onMouseDown = (e: MouseEvent) => { // Skip if element set draggable if ((e.target as HTMLElement).draggable || e.button !== 0) { @@ -52,10 +58,28 @@ export default function useScrollDrag( mouseDownLock = true; } }; + const onMouseUp = () => { - mouseDownLock = false; - stopScroll(); + clearDragState(); }; + + // 当开始原生拖拽时清理状态 + const onDragStart = () => { + clearDragState(); + }; + + // 当失去焦点时清理状态 + const onBlur = () => { + clearDragState(); + }; + + // 当页面不可见时清理状态 + const onVisibilityChange = () => { + if (document.hidden) { + clearDragState(); + } + }; + const onMouseMove = (e: MouseEvent) => { if (mouseDownLock) { const mouseY = getPageXY(e, false); @@ -78,11 +102,21 @@ export default function useScrollDrag( ele.addEventListener('mousedown', onMouseDown); ele.ownerDocument.addEventListener('mouseup', onMouseUp); ele.ownerDocument.addEventListener('mousemove', onMouseMove); + + // 添加额外的状态清理事件监听器 + ele.ownerDocument.addEventListener('dragstart', onDragStart); + ele.ownerDocument.addEventListener('dragend', clearDragState); + window.addEventListener('blur', onBlur); + document.addEventListener('visibilitychange', onVisibilityChange); return () => { ele.removeEventListener('mousedown', onMouseDown); ele.ownerDocument.removeEventListener('mouseup', onMouseUp); ele.ownerDocument.removeEventListener('mousemove', onMouseMove); + ele.ownerDocument.removeEventListener('dragstart', onDragStart); + ele.ownerDocument.removeEventListener('dragend', clearDragState); + window.removeEventListener('blur', onBlur); + document.removeEventListener('visibilitychange', onVisibilityChange); stopScroll(); }; } From 2aa59f565302bcf5c958aefef0316d1208694988 Mon Sep 17 00:00:00 2001 From: zhengjihao <2714499297@qq.com> Date: Wed, 16 Jul 2025 20:42:48 +0800 Subject: [PATCH 02/11] 3.19.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dc79dbf..4c0bc60 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-virtual-list", - "version": "3.19.1", + "version": "3.19.2", "description": "React Virtual List Component", "engines": { "node": ">=8.x" From 0ce568cf0ec3cc4c01cf0468da0dcf742d2eaae2 Mon Sep 17 00:00:00 2001 From: zhengjihao <2714499297@qq.com> Date: Wed, 16 Jul 2025 21:02:08 +0800 Subject: [PATCH 03/11] fix: revert version to 3.19.1 in package.json The package version was changed from 3.19.2 to 3.19.1, possibly to correct a versioning error or revert a previous update. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4c0bc60..dc79dbf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-virtual-list", - "version": "3.19.2", + "version": "3.19.1", "description": "React Virtual List Component", "engines": { "node": ">=8.x" From bae7ddc8bfb3625d4e9121c6b5e3c008c5339fb6 Mon Sep 17 00:00:00 2001 From: zhengjihao <2714499297@qq.com> Date: Thu, 17 Jul 2025 11:03:57 +0800 Subject: [PATCH 04/11] test: add test to prevent scroll after text drop 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. --- tests/scroll.test.js | 66 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/tests/scroll.test.js b/tests/scroll.test.js index e3a7e04..ad1bdd9 100644 --- a/tests/scroll.test.js +++ b/tests/scroll.test.js @@ -731,4 +731,70 @@ describe('List.Scroll', () => { jest.useRealTimers(); }); + + it('should not scroll after drop table text', () => { + + const onScroll = jest.fn(); + const { container } = render( + + {({ id }) =>
  • {id}
    • } +     , + ); + // 选中第99个 fixed-item 的文本内容 + const fixedItems = container.querySelectorAll('.fixed-item'); + const targetItem = fixedItems[99]; + if (targetItem) { + const range = document.createRange(); + range.selectNodeContents(targetItem); + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + } + // 模拟将选中的文本拖拽到列表最底部 + const listHolder = container.querySelector('.rc-virtual-list-holder'); + if (targetItem && listHolder) { + // 创建拖拽事件 + const dragStartEvent = new DragEvent('dragstart', { bubbles: true }); + targetItem.dispatchEvent(dragStartEvent); + + // 拖拽到最底部 + const rect = listHolder.getBoundingClientRect(); + const dragOverEvent = new DragEvent('dragover', { + bubbles: true, + clientY: rect.bottom + 10, + }); + listHolder.dispatchEvent(dragOverEvent); + + // 松开鼠标 + const dropEvent = new DragEvent('drop', { + bubbles: true, + clientY: rect.bottom + 10, + }); + listHolder.dispatchEvent(dropEvent); + + const dragEndEvent = new DragEvent('dragend', { bubbles: true }); + targetItem.dispatchEvent(dragEndEvent); + } + // 检查 onScroll 没有被触发 + expect(onScroll).not.toHaveBeenCalled(); + + // 模拟将鼠标移动到列表最顶部 + if (listHolder) { + const rect = listHolder.getBoundingClientRect(); + const mouseMoveEvent = new MouseEvent('mousemove', { + bubbles: true, + clientY: rect.top - 10, + }); + listHolder.dispatchEvent(mouseMoveEvent); + } + // 检查 onScroll 没有被触发 + expect(onScroll).not.toHaveBeenCalled(); + }); }); From 2a1f1b06848df7d830daa96ff7bb150d4e41f371 Mon Sep 17 00:00:00 2001 From: zhengjihao <2714499297@qq.com> Date: Thu, 17 Jul 2025 11:11:12 +0800 Subject: [PATCH 05/11] chore: translate comments in scroll test to English --- tests/scroll.test.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/tests/scroll.test.js b/tests/scroll.test.js index ad1bdd9..1cc0ffe 100644 --- a/tests/scroll.test.js +++ b/tests/scroll.test.js @@ -747,7 +747,7 @@ describe('List.Scroll', () => { {({ id }) =>
  • {id}
    • } , ); - // 选中第99个 fixed-item 的文本内容 + // Select the text content of the 99th fixed-item const fixedItems = container.querySelectorAll('.fixed-item'); const targetItem = fixedItems[99]; if (targetItem) { @@ -757,14 +757,14 @@ describe('List.Scroll', () => { selection.removeAllRanges(); selection.addRange(range); } - // 模拟将选中的文本拖拽到列表最底部 + // Simulate dragging the selected text to the bottom of the list const listHolder = container.querySelector('.rc-virtual-list-holder'); if (targetItem && listHolder) { - // 创建拖拽事件 + // Create drag event const dragStartEvent = new DragEvent('dragstart', { bubbles: true }); targetItem.dispatchEvent(dragStartEvent); - // 拖拽到最底部 + // Drag to the bottom const rect = listHolder.getBoundingClientRect(); const dragOverEvent = new DragEvent('dragover', { bubbles: true, @@ -772,7 +772,7 @@ describe('List.Scroll', () => { }); listHolder.dispatchEvent(dragOverEvent); - // 松开鼠标 + // Release mouse const dropEvent = new DragEvent('drop', { bubbles: true, clientY: rect.bottom + 10, @@ -782,10 +782,10 @@ describe('List.Scroll', () => { const dragEndEvent = new DragEvent('dragend', { bubbles: true }); targetItem.dispatchEvent(dragEndEvent); } - // 检查 onScroll 没有被触发 + // Check that onScroll was not triggered expect(onScroll).not.toHaveBeenCalled(); - // 模拟将鼠标移动到列表最顶部 + // Simulate moving the mouse to the top of the list if (listHolder) { const rect = listHolder.getBoundingClientRect(); const mouseMoveEvent = new MouseEvent('mousemove', { @@ -794,7 +794,7 @@ describe('List.Scroll', () => { }); listHolder.dispatchEvent(mouseMoveEvent); } - // 检查 onScroll 没有被触发 + // Check that onScroll was not triggered expect(onScroll).not.toHaveBeenCalled(); }); }); From 24b7327be9ef1f33566a4a80df2f453535e7a5b4 Mon Sep 17 00:00:00 2001 From: zhengjihao <2714499297@qq.com> Date: Thu, 17 Jul 2025 11:41:48 +0800 Subject: [PATCH 06/11] fix: remove blur and visibilitychange cleanup in useScrollDrag --- src/hooks/useScrollDrag.ts | 19 +------------ tests/scroll.test.js | 55 ++++++++++++++++++++++++-------------- 2 files changed, 36 insertions(+), 38 deletions(-) diff --git a/src/hooks/useScrollDrag.ts b/src/hooks/useScrollDrag.ts index 676ee14..bc4fe94 100644 --- a/src/hooks/useScrollDrag.ts +++ b/src/hooks/useScrollDrag.ts @@ -62,24 +62,11 @@ export default function useScrollDrag( const onMouseUp = () => { clearDragState(); }; - - // 当开始原生拖拽时清理状态 + const onDragStart = () => { clearDragState(); }; - // 当失去焦点时清理状态 - const onBlur = () => { - clearDragState(); - }; - - // 当页面不可见时清理状态 - const onVisibilityChange = () => { - if (document.hidden) { - clearDragState(); - } - }; - const onMouseMove = (e: MouseEvent) => { if (mouseDownLock) { const mouseY = getPageXY(e, false); @@ -106,8 +93,6 @@ export default function useScrollDrag( // 添加额外的状态清理事件监听器 ele.ownerDocument.addEventListener('dragstart', onDragStart); ele.ownerDocument.addEventListener('dragend', clearDragState); - window.addEventListener('blur', onBlur); - document.addEventListener('visibilitychange', onVisibilityChange); return () => { ele.removeEventListener('mousedown', onMouseDown); @@ -115,8 +100,6 @@ export default function useScrollDrag( ele.ownerDocument.removeEventListener('mousemove', onMouseMove); ele.ownerDocument.removeEventListener('dragstart', onDragStart); ele.ownerDocument.removeEventListener('dragend', clearDragState); - window.removeEventListener('blur', onBlur); - document.removeEventListener('visibilitychange', onVisibilityChange); stopScroll(); }; } diff --git a/tests/scroll.test.js b/tests/scroll.test.js index 1cc0ffe..48d03e7 100644 --- a/tests/scroll.test.js +++ b/tests/scroll.test.js @@ -735,6 +735,12 @@ describe('List.Scroll', () => { it('should not scroll after drop table text', () => { const onScroll = jest.fn(); + // 这两个事件绑定在 document + const onDragStart = jest.fn(); + const onDragEnd = jest.fn(); + document.addEventListener('dragstart', onDragStart); + document.addEventListener('dragend', onDragEnd); + const { container } = render( { data={genData(200)} onScroll={onScroll} > - {({ id }) =>
  • {id}
    • } + {({ id }) =>
  • {id}
    • }     , ); - // Select the text content of the 99th fixed-item + // 选择第一个可见的 fixed-item 的文本内容 const fixedItems = container.querySelectorAll('.fixed-item'); - const targetItem = fixedItems[99]; + const targetItem = fixedItems[0]; // 使用第一个可见元素 if (targetItem) { const range = document.createRange(); range.selectNodeContents(targetItem); @@ -757,35 +763,40 @@ describe('List.Scroll', () => { selection.removeAllRanges(); selection.addRange(range); } - // Simulate dragging the selected text to the bottom of the list + // 选中 fixed-item 里的文本并拖拽文本到列表底部 const listHolder = container.querySelector('.rc-virtual-list-holder'); if (targetItem && listHolder) { - // Create drag event - const dragStartEvent = new DragEvent('dragstart', { bubbles: true }); - targetItem.dispatchEvent(dragStartEvent); + // 创建选区，选中 fixed-item 的文本 + const range = document.createRange(); + range.selectNodeContents(targetItem); + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); - // Drag to the bottom + // 模拟拖拽文本 + fireEvent.dragStart(targetItem, { bubbles: true }); + + // 拖拽到列表底部 const rect = listHolder.getBoundingClientRect(); - const dragOverEvent = new DragEvent('dragover', { - bubbles: true, + fireEvent.dragOver(listHolder, { clientY: rect.bottom + 10, + bubbles: true, }); - listHolder.dispatchEvent(dragOverEvent); - // Release mouse - const dropEvent = new DragEvent('drop', { - bubbles: true, + // 松开鼠标 + fireEvent.drop(listHolder, { clientY: rect.bottom + 10, + bubbles: true, }); - listHolder.dispatchEvent(dropEvent); - const dragEndEvent = new DragEvent('dragend', { bubbles: true }); - targetItem.dispatchEvent(dragEndEvent); + fireEvent.dragEnd(targetItem, { bubbles: true }); } - // Check that onScroll was not triggered + // 检查 onScroll 没有被触发 expect(onScroll).not.toHaveBeenCalled(); + expect(onDragStart).toHaveBeenCalled(); + expect(onDragEnd).toHaveBeenCalled(); - // Simulate moving the mouse to the top of the list + // 模拟鼠标移动到列表顶部 if (listHolder) { const rect = listHolder.getBoundingClientRect(); const mouseMoveEvent = new MouseEvent('mousemove', { @@ -794,7 +805,11 @@ describe('List.Scroll', () => { }); listHolder.dispatchEvent(mouseMoveEvent); } - // Check that onScroll was not triggered + // 检查 onScroll 没有被触发 expect(onScroll).not.toHaveBeenCalled(); + + // 清理事件监听器 + document.removeEventListener('dragstart', onDragStart); + document.removeEventListener('dragend', onDragEnd); }); }); From 1fcd09dba7e27e5004ec5522e85dcc626a227632 Mon Sep 17 00:00:00 2001 From: zhengjihao <2714499297@qq.com> Date: Thu, 17 Jul 2025 11:42:30 +0800 Subject: [PATCH 07/11] chore: remote comment --- src/hooks/useScrollDrag.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/useScrollDrag.ts b/src/hooks/useScrollDrag.ts index bc4fe94..22b14aa 100644 --- a/src/hooks/useScrollDrag.ts +++ b/src/hooks/useScrollDrag.ts @@ -90,7 +90,6 @@ export default function useScrollDrag( ele.ownerDocument.addEventListener('mouseup', onMouseUp); ele.ownerDocument.addEventListener('mousemove', onMouseMove); - // 添加额外的状态清理事件监听器 ele.ownerDocument.addEventListener('dragstart', onDragStart); ele.ownerDocument.addEventListener('dragend', clearDragState); From dc9f00e14d8a04978ae1199101a02cc96e56f551 Mon Sep 17 00:00:00 2001 From: zhengjihao <2714499297@qq.com> Date: Tue, 19 Aug 2025 21:29:57 +0800 Subject: [PATCH 08/11] chore: remove comments from scroll drag code and tests --- src/hooks/useScrollDrag.ts | 1 - tests/scroll.test.js | 13 +------------ 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/src/hooks/useScrollDrag.ts b/src/hooks/useScrollDrag.ts index 22b14aa..fde7a4a 100644 --- a/src/hooks/useScrollDrag.ts +++ b/src/hooks/useScrollDrag.ts @@ -38,7 +38,6 @@ export default function useScrollDrag( }); }; - // 清理拖拽状态的统一函数 const clearDragState = () => { mouseDownLock = false; stopScroll(); diff --git a/tests/scroll.test.js b/tests/scroll.test.js index 48d03e7..2ed49f0 100644 --- a/tests/scroll.test.js +++ b/tests/scroll.test.js @@ -735,7 +735,6 @@ describe('List.Scroll', () => { it('should not scroll after drop table text', () => { const onScroll = jest.fn(); - // 这两个事件绑定在 document const onDragStart = jest.fn(); const onDragEnd = jest.fn(); document.addEventListener('dragstart', onDragStart); @@ -753,9 +752,8 @@ describe('List.Scroll', () => { {({ id }) =>
  • {id}
    • } , ); - // 选择第一个可见的 fixed-item 的文本内容 const fixedItems = container.querySelectorAll('.fixed-item'); - const targetItem = fixedItems[0]; // 使用第一个可见元素 + const targetItem = fixedItems[0]; if (targetItem) { const range = document.createRange(); range.selectNodeContents(targetItem); @@ -763,27 +761,22 @@ describe('List.Scroll', () => { selection.removeAllRanges(); selection.addRange(range); } - // 选中 fixed-item 里的文本并拖拽文本到列表底部 const listHolder = container.querySelector('.rc-virtual-list-holder'); if (targetItem && listHolder) { - // 创建选区，选中 fixed-item 的文本 const range = document.createRange(); range.selectNodeContents(targetItem); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); - // 模拟拖拽文本 fireEvent.dragStart(targetItem, { bubbles: true }); - // 拖拽到列表底部 const rect = listHolder.getBoundingClientRect(); fireEvent.dragOver(listHolder, { clientY: rect.bottom + 10, bubbles: true, }); - // 松开鼠标 fireEvent.drop(listHolder, { clientY: rect.bottom + 10, bubbles: true, @@ -791,12 +784,10 @@ describe('List.Scroll', () => { fireEvent.dragEnd(targetItem, { bubbles: true }); } - // 检查 onScroll 没有被触发 expect(onScroll).not.toHaveBeenCalled(); expect(onDragStart).toHaveBeenCalled(); expect(onDragEnd).toHaveBeenCalled(); - // 模拟鼠标移动到列表顶部 if (listHolder) { const rect = listHolder.getBoundingClientRect(); const mouseMoveEvent = new MouseEvent('mousemove', { @@ -805,10 +796,8 @@ describe('List.Scroll', () => { }); listHolder.dispatchEvent(mouseMoveEvent); } - // 检查 onScroll 没有被触发 expect(onScroll).not.toHaveBeenCalled(); - // 清理事件监听器 document.removeEventListener('dragstart', onDragStart); document.removeEventListener('dragend', onDragEnd); }); From a820beb90cf8d11b96dd4529bd4ada74bf10d5dc Mon Sep 17 00:00:00 2001 From: zhengjihao <2714499297@qq.com> Date: Tue, 19 Aug 2025 21:40:34 +0800 Subject: [PATCH 09/11] fix: refactor scroll drag event handling and test helper --- src/hooks/useScrollDrag.ts | 17 ++--------------- tests/scroll.test.js | 21 +++++++++++---------- 2 files changed, 13 insertions(+), 25 deletions(-) diff --git a/src/hooks/useScrollDrag.ts b/src/hooks/useScrollDrag.ts index fde7a4a..31928c4 100644 --- a/src/hooks/useScrollDrag.ts +++ b/src/hooks/useScrollDrag.ts @@ -58,14 +58,6 @@ export default function useScrollDrag( } }; - const onMouseUp = () => { - clearDragState(); - }; - - const onDragStart = () => { - clearDragState(); - }; - const onMouseMove = (e: MouseEvent) => { if (mouseDownLock) { const mouseY = getPageXY(e, false); @@ -86,18 +78,13 @@ export default function useScrollDrag( }; ele.addEventListener('mousedown', onMouseDown); - ele.ownerDocument.addEventListener('mouseup', onMouseUp); + ele.ownerDocument.addEventListener('mouseup', clearDragState); ele.ownerDocument.addEventListener('mousemove', onMouseMove); - - ele.ownerDocument.addEventListener('dragstart', onDragStart); - ele.ownerDocument.addEventListener('dragend', clearDragState); return () => { ele.removeEventListener('mousedown', onMouseDown); - ele.ownerDocument.removeEventListener('mouseup', onMouseUp); + ele.ownerDocument.removeEventListener('mouseup', clearDragState); ele.ownerDocument.removeEventListener('mousemove', onMouseMove); - ele.ownerDocument.removeEventListener('dragstart', onDragStart); - ele.ownerDocument.removeEventListener('dragend', clearDragState); stopScroll(); }; } diff --git a/tests/scroll.test.js b/tests/scroll.test.js index 2ed49f0..6962f79 100644 --- a/tests/scroll.test.js +++ b/tests/scroll.test.js @@ -734,6 +734,15 @@ describe('List.Scroll', () => { it('should not scroll after drop table text', () => { + // Helper function to select text content of an element + const selectElementText = (element) => { + const range = document.createRange(); + range.selectNodeContents(element); + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(range); + }; + const onScroll = jest.fn(); const onDragStart = jest.fn(); const onDragEnd = jest.fn(); @@ -755,19 +764,11 @@ describe('List.Scroll', () => { 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); + selectElementText(targetItem); } const listHolder = container.querySelector('.rc-virtual-list-holder'); if (targetItem && listHolder) { - const range = document.createRange(); - range.selectNodeContents(targetItem); - const selection = window.getSelection(); - selection.removeAllRanges(); - selection.addRange(range); + selectElementText(targetItem); fireEvent.dragStart(targetItem, { bubbles: true }); From b77332d4b14de6281e05d08e29b8230905cebffd Mon Sep 17 00:00:00 2001 From: zhengjihao <2714499297@qq.com> Date: Tue, 19 Aug 2025 22:17:16 +0800 Subject: [PATCH 10/11] fix: handle drag events in useScrollDrag hook --- src/hooks/useScrollDrag.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/hooks/useScrollDrag.ts b/src/hooks/useScrollDrag.ts index 31928c4..3dedcce 100644 --- a/src/hooks/useScrollDrag.ts +++ b/src/hooks/useScrollDrag.ts @@ -80,11 +80,16 @@ export default function useScrollDrag( ele.addEventListener('mousedown', onMouseDown); ele.ownerDocument.addEventListener('mouseup', clearDragState); ele.ownerDocument.addEventListener('mousemove', onMouseMove); + + ele.ownerDocument.addEventListener('dragstart', clearDragState); + ele.ownerDocument.addEventListener('dragend', clearDragState); return () => { ele.removeEventListener('mousedown', onMouseDown); ele.ownerDocument.removeEventListener('mouseup', clearDragState); ele.ownerDocument.removeEventListener('mousemove', onMouseMove); + ele.ownerDocument.removeEventListener('dragstart', clearDragState); + ele.ownerDocument.removeEventListener('dragend', clearDragState); stopScroll(); }; } From 294ab972a7306d0b95f3c0aa4e7c7b629a1c81ac Mon Sep 17 00:00:00 2001 From: zhengjihao <2714499297@qq.com> Date: Thu, 21 Aug 2025 17:24:08 +0800 Subject: [PATCH 11/11] chore: refactor scroll test for drag-and-drop behavior --- tests/scroll.test.js | 33 ++++++++++++++++++++------------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/tests/scroll.test.js b/tests/scroll.test.js index 6962f79..2e30f46 100644 --- a/tests/scroll.test.js +++ b/tests/scroll.test.js @@ -732,9 +732,7 @@ describe('List.Scroll', () => { jest.useRealTimers(); }); - it('should not scroll after drop table text', () => { - - // Helper function to select text content of an element + it('should not scroll after dropping selected list text', () => { const selectElementText = (element) => { const range = document.createRange(); range.selectNodeContents(element); @@ -769,8 +767,13 @@ describe('List.Scroll', () => { const listHolder = container.querySelector('.rc-virtual-list-holder'); if (targetItem && listHolder) { selectElementText(targetItem); + + fireEvent.scroll(listHolder, { target: { scrollTop: 100 } }); + expect(onScroll).toHaveBeenCalled(); + const scrollCallCountBeforeDrop = onScroll.mock.calls.length; - fireEvent.dragStart(targetItem, { bubbles: true }); + const dragStartEvent = new Event('dragstart', { bubbles: true, cancelable: true }); + targetItem.ownerDocument.dispatchEvent(dragStartEvent); const rect = listHolder.getBoundingClientRect(); fireEvent.dragOver(listHolder, { @@ -783,21 +786,25 @@ describe('List.Scroll', () => { bubbles: true, }); - fireEvent.dragEnd(targetItem, { bubbles: true }); - } - expect(onScroll).not.toHaveBeenCalled(); - expect(onDragStart).toHaveBeenCalled(); - expect(onDragEnd).toHaveBeenCalled(); + const dragEndEvent = new Event('dragend', { bubbles: true, cancelable: true }); + targetItem.ownerDocument.dispatchEvent(dragEndEvent); - if (listHolder) { - const rect = listHolder.getBoundingClientRect(); + const afterRect = listHolder.getBoundingClientRect(); const mouseMoveEvent = new MouseEvent('mousemove', { bubbles: true, - clientY: rect.top - 10, + clientY: afterRect.top - 10, }); listHolder.dispatchEvent(mouseMoveEvent); + act(() => { + jest.advanceTimersByTime(100); + }); + expect(onScroll.mock.calls.length).toBe(scrollCallCountBeforeDrop); } - expect(onScroll).not.toHaveBeenCalled(); + expect(onDragStart).toHaveBeenCalled(); + expect(onDragEnd).toHaveBeenCalled(); + + const sel = window.getSelection(); + sel && sel.removeAllRanges(); document.removeEventListener('dragstart', onDragStart); document.removeEventListener('dragend', onDragEnd);