react-draggable
react-draggable copied to clipboard
[Intervention] Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
trafficstars
I get an error on touch events (however, the app doesn't break).
This problem can be solved by using:
if (e.type === 'touchstart' && e.cancelable) e.preventDefault();
https://alexandrerosseto.medium.com/solving-issue-intervention-ignored-attempt-to-cancel-a-touchmove-event-with-cancelable-false-62014ef15742
It looks like a working small change, any chance to merge a PR for this?
I would like to suggest adding
// Short circuit if handle or cancel prop was provided and selector doesn't match.
if (
// 1. we can't cancel the non-cancelable events
// 2. so, we shouldn't start the dragging logic to avoid unpredictable behavior
// 3. otherwise, we might fall into the situation e.g. when the scrolling is happening and touchmove is firing,
// but the touchmove event will be fired on android in chrome once per 200ms
!e.cancelable ||
// .... other conditions
return;
}
the main problem I came across:
- android, phone
- if non-cancelable
touchstartgoes further, the drag logic starts (after scrolling on a page) - the scrolling and dragging happen simultaneously
touchmoveevents on target element for dragging happens each 200ms
I can get that bug on the emulator during performance profiling and real-device
https://github.com/user-attachments/assets/d3652beb-ff23-4125-be78-4956b19469e3