The Wayback Machine - https://web.archive.org/web/20210308110444/https://github.com/mui-org/material-ui/issues/25168
Skip to content

/ material-ui

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SwipeableDrawer] hideBackDrop raise TypeError #25168

Open
tuy3t-tran opened this issue Mar 3, 2021 · 2 comments
Open

[SwipeableDrawer] hideBackDrop raise TypeError #25168

tuy3t-tran opened this issue Mar 3, 2021 · 2 comments
Labels
bug 馃悰 component: SwipeableDrawer good first issue

Comments

@tuy3t-tran
Copy link

@tuy3t-tran tuy3t-tran commented Mar 3, 2021 •
edited by oliviertassinari

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.

image
@tuy3t-tran tuy3t-tran added the status: needs triage label Mar 3, 2021
@oliviertassinari oliviertassinari added the component: SwipeableDrawer label Mar 7, 2021
@oliviertassinari oliviertassinari changed the title SwipeableDrawer, hideBackDrop raise TypeError [SwipeableDrawer] hideBackDrop raise TypeError Mar 7, 2021
@oliviertassinari oliviertassinari added bug 馃悰 and removed status: needs triage labels Mar 7, 2021
@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Mar 7, 2021

@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? :)
@oliviertassinari oliviertassinari added the good first issue label Mar 7, 2021
@tuy3t-tran
Copy link
Author

@tuy3t-tran tuy3t-tran commented Mar 8, 2021

Hi, thank you for your reply! I applied your suggestion in my local env, and problem seem fixed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 馃悰 component: SwipeableDrawer good first issue
2 participants
@oliviertassinari @tuy3t-tran