Ignored attempt to cancel a touchmove event with cancelable=false

[StarpTech]

hello, I see the error

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

in the console when I use touch events on the scrollable area.

This issue happens because https://github.com/theKashey/react-remove-scroll/blob/master/src/component.tsx#L101 can't be canceled!

A possible solution is described here

[theKashey]

Is there an easy way to reproduce this problem?

[StarpTech]

Yes, use the chrome emulator in e.g iPad mode and scroll on the wrapped element.

[bmcmahen]

I've just noticed the same problem. FWIW, it doesn't actually seem to manifest in any bugs.

[theKashey]

And it's not reproducible for me (OSX, Chrome 74), including real mobile devices (testing iOS only, sorry).
I would say - don't trust Chrome Emulator here.

I'll use .cancelable in any case, but it's still open question how real is the problem.

[StarpTech]

And it's not reproducible for me (OSX, Chrome 74), including real mobile devices (testing iOS only, sorry).
I would say - don't trust Chrome Emulator here.

It does not result in any bug but in lots of errors in the console.

I think to rely on cancelable is the best solution for now.

[theKashey]

I saw many warning around canceling touch/scroll events, which are cancelable, but canceling them would lead to a bad used experience, bla, bla, bla. But that's what we are doing here :)

[adrianparr]

What is the latest on this?

[Tumetsu]

I'm getting this same error when I have a dialog with horizontally scrollable element in it. The element seems to work fine on my Android phone but the console is filled with error on Chrome simulator.

Is there anything I could do on my app's side to avoid this or should I just shrug it off? I'm using this library as a dependency of reach ui's dialog component: https://github.com/reach/reach-ui

[theKashey]

I'll check cancelable=false events once again. It's more about - why they are not cancelable, that's the question.

[tschleuss]

Any news on this?

[theKashey]

Oof, time flies.

[thexpand]

Still occurs. Is there any resolution on this?

UPDATE: I actually figured out when it happens exactly. If I scrolled all the way down and released my finger from the screen and try to scroll down more - it's not showing any errors/warnings. But if I drag my finger up or down the screen and reach the end of the scrollable area, but continue the dragging - only then it shows this error in the console.

[thexpand]

I have updated my previous comment to include more insight on when it happens (at least for me).

[sabeenski]

Hello!
I am running into similar errors in my DataDog real user monitoring. The error is:

IgnoredEventCancel: intervention: Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Seems to be coming from react-remove-scroll/dist/es2015/SideEffect.js at line 89.

 if (sourceEvent && sourceEvent.should) {
            event.preventDefault();
            return;
        }

should we add a check here as well with event. cancelable ?

[csantos1113]

I'm facing the same issue. As @thexpand mentioned I'm able to reproduce this error with the same steps:

• Scroll all the way down and release the finger from the screen, then try to scroll down more: no error/warning

  Screen.Recording.2022-06-07.at.4.10.22.PM.mov

• Scroll up or down the screen and reach the end of the scrollable area, but continue dragging: error appear in the console

  Screen.Recording.2022-06-07.at.4.10.40.PM.mov