Replace mousedown/touchstart/touchend with pointerdown/pointerup #878
Description
Is your feature request related to a problem? Please describe.
With the more modern events pointerdown/pointerup you can make use of pointer capture, which makes the whole drag UX better. For example you have better control over the cursor (it will not blink).
Describe the solution you'd like
Replace mousedown/touchstart/touchend with pointerdown/pointerup. But this will also not support as many browsers as the current solution. An alternative would be, to add those events on top. Just call this hook on top for example:
Describe alternatives you've considered
const useResizerEffects = (ref: RefObject<HTMLDivElement>) => {
useEffect(() => {
const element = ref.current;
if (!element) {
return;
}
const pointerIds = new Set<number>();
const handlePointerDown = (e: PointerEvent) => {
element.setPointerCapture(e.pointerId);
pointerIds.add(e.pointerId);
};
const handlePointerUp = (e: PointerEvent) => {
if (element.hasPointerCapture(e.pointerId)) {
element.releasePointerCapture(e.pointerId);
}
pointerIds.delete(e.pointerId);
};
element.addEventListener('pointerdown', handlePointerDown);
element.addEventListener('pointerup', handlePointerUp);
element.addEventListener('pointercancel', handlePointerUp);
return () => {
element.removeEventListener('pointerdown', handlePointerDown);
element.removeEventListener('pointerup', handlePointerUp);
element.removeEventListener('pointercancel', handlePointerUp);
pointerIds.forEach((pointerId) => {
if (element.hasPointerCapture(pointerId)) {
element.releasePointerCapture(pointerId);
}
});
};
}, [ref]);
};