[SwipeableDrawer] hideBackDrop raise TypeError

[tuy3t-tran]

Current Behavior 😯

Using SwipeableDrawer with following props:

              <SwipeableDrawer
                anchor={...}
                PaperProps={{ ... }}
                **ModalProps={{ hideBackdrop: true }}**
                open={...}
                onOpen={...}
                onClose={...}
                classes={{ ... }}
                ref={...}
              >

There will be this error raising at some point:

SwipeableDrawer.js:394 Uncaught TypeError: Cannot read property 'contains' of undefined
at SwipeableDrawer.js:394
at HTMLDocument. (useEventCallback.js:15)

Expected Behavior 🤔

There should be no error.

[oliviertassinari]

@tuy3t-tran Interesting. We have worked on this problem 3 years ago in #12969. The first thing I could notice is that the hideBackdrop prop should be working when provided flat to SwipeableDrawer, as it does with the Drawer. It's not the case. It's broken.

I would propose the following fix:

diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
index 5cb059a702..87528f7b01 100644
--- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
+++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js
@@ -445,7 +445,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
     // At least one element clogs the drawer interaction zone.
     if (
       open &&
-      !backdropRef.current.contains(nativeEvent.target) &&
+      (hideBackdrop || !backdropRef.current.contains(nativeEvent.target)) &&
       !paperRef.current.contains(nativeEvent.target)
     ) {
       return;
@@ -552,6 +552,7 @@ const SwipeableDrawer = React.forwardRef(function SwipeableDrawer(inProps, ref)
           },
           ...ModalPropsProp,
         }}
+        hideBackdrop={hideBackdrop}
         PaperProps={{
           ...PaperProps,
           style: {

What do you think about it? Do you want to work on a pull request? :)

[tuy3t-tran]

Hi, thank you for your reply! I applied your suggestion in my local env, and problem seem fixed.

[manziEric]

@oliviertassinari i'm going to work on this