mirror of
https://github.com/plankanban/planka.git
synced 2025-07-19 13:19:44 +02:00
fix: Disable text selection when drag-scrolling
This commit is contained in:
parent
d0a8c8b61a
commit
54a969ec31
3 changed files with 25 additions and 6 deletions
|
@ -76,13 +76,16 @@ const Board = React.memo(
|
||||||
}
|
}
|
||||||
|
|
||||||
prevPosition.current = event.clientX;
|
prevPosition.current = event.clientX;
|
||||||
|
|
||||||
|
window.getSelection().removeAllRanges();
|
||||||
|
document.body.classList.add(globalStyles.dragScrolling);
|
||||||
},
|
},
|
||||||
[wrapper],
|
[wrapper],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleWindowMouseMove = useCallback(
|
const handleWindowMouseMove = useCallback(
|
||||||
(event) => {
|
(event) => {
|
||||||
if (!prevPosition.current) {
|
if (prevPosition.current === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -97,8 +100,13 @@ const Board = React.memo(
|
||||||
[prevPosition],
|
[prevPosition],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleWindowMouseUp = useCallback(() => {
|
const handleWindowMouseRelease = useCallback(() => {
|
||||||
|
if (prevPosition.current === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
prevPosition.current = null;
|
prevPosition.current = null;
|
||||||
|
document.body.classList.remove(globalStyles.dragScrolling);
|
||||||
}, [prevPosition]);
|
}, [prevPosition]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -116,14 +124,20 @@ const Board = React.memo(
|
||||||
}, [listIds, isListAddOpened]);
|
}, [listIds, isListAddOpened]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
window.addEventListener('mouseup', handleWindowMouseUp);
|
|
||||||
window.addEventListener('mousemove', handleWindowMouseMove);
|
window.addEventListener('mousemove', handleWindowMouseMove);
|
||||||
|
|
||||||
|
window.addEventListener('mouseup', handleWindowMouseRelease);
|
||||||
|
window.addEventListener('blur', handleWindowMouseRelease);
|
||||||
|
window.addEventListener('contextmenu', handleWindowMouseRelease);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('mouseup', handleWindowMouseUp);
|
|
||||||
window.removeEventListener('mousemove', handleWindowMouseMove);
|
window.removeEventListener('mousemove', handleWindowMouseMove);
|
||||||
|
|
||||||
|
window.removeEventListener('mouseup', handleWindowMouseRelease);
|
||||||
|
window.removeEventListener('blur', handleWindowMouseRelease);
|
||||||
|
window.removeEventListener('contextmenu', handleWindowMouseRelease);
|
||||||
};
|
};
|
||||||
}, [handleWindowMouseUp, handleWindowMouseMove]);
|
}, [handleWindowMouseMove, handleWindowMouseRelease]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -44,7 +44,7 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleChildrenClick = useCallback(() => {
|
const handleChildrenClick = useCallback(() => {
|
||||||
if (!getSelection().toString()) {
|
if (!window.getSelection().toString()) {
|
||||||
open();
|
open();
|
||||||
}
|
}
|
||||||
}, [open]);
|
}, [open]);
|
||||||
|
|
|
@ -146,6 +146,11 @@
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.dragScrolling>* {
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Backgrounds */
|
/* Backgrounds */
|
||||||
|
|
||||||
.backgroundBerryRed {
|
.backgroundBerryRed {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue