Skip to content

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

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open
19 changes: 13 additions & 6 deletions src/hooks/useScrollDrag.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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);
Expand All @@ -76,13 +78,18 @@ 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', clearDragState);
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', clearDragState);
ele.ownerDocument.removeEventListener('dragend', clearDragState);
stopScroll();
};
}
Expand Down
78 changes: 78 additions & 0 deletions tests/scroll.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});