theKashey/react-remove-scroll

Ignored attempt to cancel a touchmove event with cancelable=false

StarpTech opened this issue · 15 comments

StarpTech commented

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 commented

Is there an easy way to reproduce this problem?

StarpTech commented

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

bmcmahen commented

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

theKashey commented

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 commented

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 commented

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 :)

  • 👍1
adrianparr commented

What is the latest on this?

  • 👍1
Tumetsu commented

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

  • 👍1
theKashey commented

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

tschleuss commented

Any news on this?

theKashey commented

Oof, time flies.

thexpand commented

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.

  • 👍1
thexpand commented

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

sabeenski commented

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 ?

  • 👍3
csantos1113 commented

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