{"action":"opened","issue":{"url":"https://api.github.com/repos/mui-org/material-ui/issues/12094","repository_url":"https://api.github.com/repos/mui-org/material-ui","labels_url":"https://api.github.com/repos/mui-org/material-ui/issues/12094/labels{/name}","comments_url":"https://api.github.com/repos/mui-org/material-ui/issues/12094/comments","events_url":"https://api.github.com/repos/mui-org/material-ui/issues/12094/events","html_url":"https://github.com/mui-org/material-ui/issues/12094","id":339479730,"node_id":"MDU6SXNzdWUzMzk0Nzk3MzA=","number":12094,"title":"SwipeableDrawer JS error when dragging it, [Intervention] canceling event","user":{"login":"jlascoleassi","id":37666207,"node_id":"MDQ6VXNlcjM3NjY2MjA3","avatar_url":"https://avatars0.githubusercontent.com/u/37666207?v=4","gravatar_id":"","url":"https://api.github.com/users/jlascoleassi","html_url":"https://github.com/jlascoleassi","followers_url":"https://api.github.com/users/jlascoleassi/followers","following_url":"https://api.github.com/users/jlascoleassi/following{/other_user}","gists_url":"https://api.github.com/users/jlascoleassi/gists{/gist_id}","starred_url":"https://api.github.com/users/jlascoleassi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jlascoleassi/subscriptions","organizations_url":"https://api.github.com/users/jlascoleassi/orgs","repos_url":"https://api.github.com/users/jlascoleassi/repos","events_url":"https://api.github.com/users/jlascoleassi/events{/privacy}","received_events_url":"https://api.github.com/users/jlascoleassi/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-07-09T14:44:05Z","updated_at":"2018-07-09T14:44:05Z","closed_at":null,"author_association":"NONE","body":"<!--- Provide a general summary of the issue in the Title above -->\r\n\r\n<!--\r\n    Thank you very much for contributing to Material-UI by creating an issue! ❤️\r\n    To avoid duplicate issues we ask you to check off the following list.\r\n-->\r\n\r\n<!-- Checked checkbox should look like this: [x] -->\r\n- [x] This is a v1.x issue (v0.x is no longer maintained).\r\n- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.\r\n\r\n## Expected Behavior\r\n<!---\r\n    If you're describing a bug, tell us what should happen.\r\n    If you're suggesting a change/improvement, tell us how it should work.\r\n-->\r\nI would expect to not see JS errors build up in the console\r\n\r\n## Current Behavior\r\n<!---\r\n    If describing a bug, tell us what happens instead of the expected behavior.\r\n    If suggesting a change/improvement, explain the difference from current behavior.\r\n-->\r\nWhen dragging the SwipeableDrawer, a JS error is continuously thrown in the console:\r\n\"[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.\"\r\n\r\n## Steps to Reproduce (for bugs)\r\n<!---\r\n    Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.\r\n    Include code to reproduce, if relevant (which it most likely is).\r\n\r\n    This codesandbox.io template _may_ be a good starting point:\r\n    https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app\r\n\r\n\r\n    If YOU DO NOT take time to provide a codesandbox.io reproduction, should the COMMUNITY take time to help you?\r\n\r\n-->\r\n\r\n1. Use SwipeableDrawer in a project\r\n2. Open inspector console\r\n3. Once it's open, drag it slowly, in either direction\r\n4. You will notice a JS error for every drag movement\r\n\r\n## Context\r\n<!---\r\n    How has this issue affected you? What are you trying to accomplish?\r\n    Providing context helps us come up with a solution that is most useful in the real world.\r\n-->\r\nA lot of JS errors are thrown\r\n\r\n## Your Environment\r\n<!--- Include as many relevant details about the environment with which you experienced the bug. -->\r\n\r\n| Tech         | Version |\r\n|--------------|---------|\r\n| Material-UI  | v1.3.0  |\r\n| React        |   16.2.0      |\r\n| browser      |  Chrome, iOS Simulator   |\r\n| etc          |         |\r\n\r\n## Potential Solution\r\nAfter 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:\r\n\r\nAround line 155, add the && to check if the event is cancelable before preventing default:\r\nif (dx > dy && event.cancelable) {\r\n\tevent.preventDefault();\r\n}\r\n\r\nAnd around line 188, do the same here:\r\nif (event.cancelable) {\r\n\tevent.preventDefault();\r\n}\r\n"}}
{"actor":{"display_login":"jlascoleassi"}}