react-draggable icon indicating copy to clipboard operation
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.

Open Ann2827 opened this issue 4 years ago • 2 comments
trafficstars

I get an error on touch events (however, the app doesn't break).

Снимок экрана 2021-04-09 в 15 20 00 Снимок экрана 2021-04-09 в 15 20 11

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

Ann2827 avatar Apr 09 '21 12:04 Ann2827

It looks like a working small change, any chance to merge a PR for this?

Hamcker avatar Oct 05 '22 15:10 Hamcker

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:

  1. android, phone
  2. if non-cancelable touchstart goes further, the drag logic starts (after scrolling on a page)
  3. the scrolling and dragging happen simultaneously
  4. touchmove events on target element for dragging happens each 200ms

I can get that bug on the emulator during performance profiling and real-device

image (1)

https://github.com/user-attachments/assets/d3652beb-ff23-4125-be78-4956b19469e3

mallchel avatar Jul 12 '24 13:07 mallchel