[SwipeableDrawer] Passive events cancelable = true

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Repository with minimal code as an example: https://github.com/meelist/mui-swipeable-drawer-bug

Steps:

1. npm i
2. npm start
3. try to swipe the drawer open
4. observe errors in console

Current behavior 😯

Touch events should be cancelable since there is a passive event listener when the drawer is closed. However if there is an overlapping (even underneath) event listener which is not passive, then all touch events become cancelable.

Expected behavior 🤔

Additional check should be added when calling preventDefault in the SwipeableDrawer to check if the listener is passive or not.

Context 🔦

I have a full screen Google Map and I want to overlay the SwipeableDrawer on top of it. Both of these elements have touch event listeners it seems, but Google Map has an active event listener where as the drawer has a passive one when the drawer is closed. This causes a flood of error messages when swiping open the drawer since all events have become cancelable due to this overlap, but the drawer listener was configured as passive. No issues when closing the drawer because the listener isn't passive then. I have reproduced the same issue by just creating a full screen div with a non-passive touch listener.

I think perhaps this issue could be resolved if there was an additional check to see if the listener was set as passive or not when trying to call preventDefault.

Here is where the passive behaviour was changed: https://github.com/mui/material-ui/issues/22493

Your environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.