Material-ui: SwipeableDrawer JS error when dragging it, [Intervention] canceling event

[jlascoleassi]

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would expect to not see JS errors build up in the console

Current Behavior

When dragging the SwipeableDrawer, a JS error is continuously thrown in the console:
"[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted."

Steps to Reproduce (for bugs)

1. Use SwipeableDrawer in a project
2. Open inspector console
3. Once it's open, drag it slowly, in either direction
4. You will notice a JS error for every drag movement

Context

A lot of JS errors are thrown

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.3.0 |
| React | 16.2.0 |
| browser | Chrome, iOS Simulator |
| etc | |

Potential Solution

After searching a bit online, others who have had similar errors have suggested checking to see if the event is cancelable before trying to cancel it. I modified the local code to test this out and the solution seems to work without any side effects. This solution would be:

Around line 155, add the && to check if the event is cancelable before preventing default:
if (dx > dy && event.cancelable) {
event.preventDefault();
}

And around line 188, do the same here:
if (event.cancelable) {
event.preventDefault();
}

[oliviertassinari]

@jlascoleassi Something is definitely off. Thanks for raising it.
I know I have been fixing such issue on react-swipeable-views at some point, but I can't remember how.

[oliviertassinari]

Alright, after some digging, I think that I have found a good trail. I went back to @RByers comment on https://github.com/oliviertassinari/react-swipeable-views/issues/183#issuecomment-280537197. We can leverage the touch-action: none; CSS style to disable the scrolling on the Backdrop. This consistently make the warning disappear.

@jlascoleassi Do you want to work on it? The following diff in the Backdrop.js should be enough:

  root: {
    zIndex: -1,
    position: 'fixed',
    right: 0,
    bottom: 0,
    top: 0,
    left: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    // Remove grey highlight
    WebkitTapHighlightColor: 'transparent',
+   // Disable scroll capabilities.
+   touchAction: 'none',
  },

[jlascoleassi]

@oliviertassinari I just created the pull request and believe I took the appropriate steps for contributing. If not, please let me know. Thank you very much!

[9jaboy]

I still see this conole error on Chrome Device emulator for SwipeableDrawer

[oliviertassinari]

@9jaboy are you using the latest version of Material-UI?

[9jaboy]

^3.1.0

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

[PejmanNik]

@3.1.0 same error here!

[jlascoleassi]

I am not seeing this error on 3.1.1

On Mon, Sep 24, 2018 at 1:51 AM Pejman [e-mail] wrote:

@3.1.0 same error here!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mui-org/material-ui/issues/12094#issuecomment-423881729,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Aj69nxOVSHV5IgLx9ovhPtSJEb1rrj6Iks5ueHLNgaJpZM4VH1jz
.

[9jaboy]

I can still see this in 3.1.1

[9jaboy]

should I create another bug for this?

[oliviertassinari]

@9jaboy if you can consistently reproduce the issue on different environment, yes please.

[SerSerch]

@oliviertassinari
3.4.0
problem in react - event.preventDefault()
see the solution in the comments
https://medium.com/@ericclemmons/react-event-preventdefault-78c28c950e46

quickly pull to the right
https://yadi.sk/i/n9jjrC8Z6WSjNw

[shierro]

Hi @oliviertassinari ,

I also encounter this error, and drawer is semi-open until touch/drag is released

On my local machine, versions are:

"@material-ui/core": "^3.4.0"
"react": "^16.6.1"

on prod (http://territorymanager.tools)

"@material-ui/core": "^3.3.1"
"react": "^16.4.2"

Here is how it's used in prod
https://github.com/shierro/tm-app/blob/master/app/components/LeftDrawer/index.js#L33