fix: after selecting and dragging text, the table still scrolls even after releasing the mouse. (#328)

* fix: enhance useScrollDrag with unified drag state cleanup

* 3.19.2

* 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.

* 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.

* chore: translate comments in scroll test to English

* fix: remove blur and visibilitychange cleanup in useScrollDrag

* chore: remote comment

* chore: remove comments from scroll drag code and tests

* fix: refactor scroll drag event handling and test helper

* fix: handle drag events in useScrollDrag hook

* chore: refactor scroll test for drag-and-drop behavior

* chore: not block dragstart

---------

Co-authored-by: 二货机器人 <[email protected]>

Author: QdabuliuQ

src/hooks/useScrollDrag.ts

@@ -38,6 +38,11 @@ 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 +57,7 @@ export default function useScrollDrag(
           mouseDownLock = true;
         }
       };
-      const onMouseUp = () => {
-        mouseDownLock = false;
-        stopScroll();
-      };
+
       const onMouseMove = (e: MouseEvent) => {
         if (mouseDownLock) {
           const mouseY = getPageXY(e, false);
@@ -76,13 +78,17 @@ 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('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('dragend', clearDragState);
         stopScroll();
       };
     }

tests/scroll.test.js

@@ -731,4 +731,82 @@ describe('List.Scroll', () => {
 
     jest.useRealTimers();
   });
+
+  it('should not scroll after dropping selected list text', () => {
+    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();
+    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>,
+    );
+    const fixedItems = container.querySelectorAll('.fixed-item');
+    const targetItem = fixedItems[0];
+    if (targetItem) {
+      selectElementText(targetItem);
+    }
+    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;
+
+      const dragStartEvent = new Event('dragstart', { bubbles: true, cancelable: true });
+      targetItem.ownerDocument.dispatchEvent(dragStartEvent);
+
+      const rect = listHolder.getBoundingClientRect();
+      fireEvent.dragOver(listHolder, {
+        clientY: rect.bottom + 10,
+        bubbles: true,
+      });
+
+      fireEvent.drop(listHolder, {
+        clientY: rect.bottom + 10,
+        bubbles: true,
+      });
+
+      const dragEndEvent = new Event('dragend', { bubbles: true, cancelable: true });
+      targetItem.ownerDocument.dispatchEvent(dragEndEvent);
+
+      const afterRect = listHolder.getBoundingClientRect();
+      const mouseMoveEvent = new MouseEvent('mousemove', {
+        bubbles: true,
+        clientY: afterRect.top - 10,
+      });
+      listHolder.dispatchEvent(mouseMoveEvent);
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+      expect(onScroll.mock.calls.length).toBe(scrollCallCountBeforeDrop);
+    }
+    expect(onDragStart).toHaveBeenCalled();
+    expect(onDragEnd).toHaveBeenCalled();
+
+    const sel = window.getSelection();
+    sel && sel.removeAllRanges();
+    
+    document.removeEventListener('dragstart', onDragStart);
+    document.removeEventListener('dragend', onDragEnd);
+  });
 });