Open meelist opened 1 year ago
I don't see how it can be fixed on Material UI's side. The Swipeable component itself, correctly register the listeners. It is happening because of the way the touch even bubbles. One quick fix would be adding the SwipeableDrawer
component first, this removes the warnings:
index a9c00c3..7dd18c1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ function App() {
return (
<div className="App">
+ <SwipeableEdgeDrawer />
<div style={{ height: "100vh", width: "100%" }}>
{/* when using below line instead and elements dont overlap, then works correctly */}
{/* <div style={{ height: "calc(100vh - 56px)", width: "100%" }}> */}
@@ -21,7 +22,6 @@ function App() {
defaultZoom={defaultProps.zoom}
></GoogleMapReact>
</div>
- <SwipeableEdgeDrawer />
</div>
);
}
For me this doesn't remove the warnings, they still persist since the components with the same event listeners overlap.
I proposed that MUI could also store the state if the event listener was registered as passive or not. That check can be added to the existing checks then where cancelling of the event is attempted. It should be taken into account that passive event listeners can receive an event which has cancelable set to true, but throw this error if you try to cancel.
FWIW we have a very similar problem (errors when swiping a drawer displayed over a Google map), and like @meelist rendering the SwipeableDrawer
before the map doesn’t prevent the warnings.
An alternative solution for those in need: https://react-spring.bottom-sheet.dev/
I love MUI but this component just doesn't offer what material bottom sheet needs.
I proposed that MUI could also store the state if the event listener was registered as passive or not. That check can be added to the existing checks then where cancelling of the event is attempted. It should be taken into account that passive event listeners can receive an event which has cancelable set to true, but throw this error if you try to cancel.
Would you like to create a pull request for this so that we can test all scenarios?
Another option would be to add a prop that will indicate whether the passive option should always be set to false. Would this help? What I mean is using: passive: false
instead of passive: !open
.
As far as I could test using passive: false it works, here are the components that you can test with locally:
The error is not appearing on consecutive refreshes of the page, I had to restart the server, this is why I got the false positive that it works above.
Having the same issue displaying the SwipableDrawer Component on top of a react FullCalendar component.
Upon opening the SwipableDrawer I get SwipeableDrawer.js?3240:373 Unable to preventDefault inside passive event listener invocation.
error in the console
Any update on this? I'm using SwipeableDrawer
positioned above a Leaflet map, and I'm experiencing an issue with opening the drawer using the "notch" or puller. When the drawer is initially closed, trying to open it by swiping on the puller results in the swipe action being canceled, causing the drawer to snap back to its closed position.
I've set up the drawer with customized SwipeAreaProps
and the puller, which works as expected when the drawer is open. However, when closed, the swipe action to open feels inconsistent and frequently interrupted.
Here’s the component code:
Just tested adding { passive: false }
as shown here: https://github.com/mui/material-ui/issues/37814#issuecomment-1693421592 and I'm not getting errors anymore
Duplicates
Latest version
Steps to reproduce 🕹
Repository with minimal code as an example: https://github.com/meelist/mui-swipeable-drawer-bug
Steps:
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. ``` System: OS: macOS 13.4 Binaries: Node: 20.2.0 - /opt/homebrew/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 9.6.6 - /opt/homebrew/bin/npm Browsers: Chrome: 114.0.5735.198 Edge: Not Found Safari: 16.5 npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.6 @mui/core-downloads-tracker: 5.13.7 @mui/material: ^5.13.7 => 5.13.7 @mui/private-theming: 5.13.7 @mui/styled-engine: 5.13.2 @mui/system: 5.13.7 @mui/types: 7.2.4 @mui/utils: 5.13.7 @types/react: ^18.2.14 => 18.2.14 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.5 => 4.9.5 Browser: Chrome Version 114.0.5735.198 (Official Build) (arm64)npx @mui/envinfo