CODEWITHSUNDEEP
reactjsmaterial-ui
Mike Alvarado
Mike Alvarado

Reputation: 109

React | Material-Ui | Swipeable Drawer not opening with swipe

I'm working on a new project and trying to create a "menu" or drawer. The idea is for it to open when the user swipes from the left side of the screen. Here's a codeSandBox where it works. Here is the running example (you can run it on mobile)

It works for me, but when I try to run it locally it doesn't works as expected
It is the exact same code I have on both code-sandbox and locally.

I've noticed that my local: My local

Is different from the code-sandbox. The code-sandbox has this extra div. But for some reason it is not working on my local CodeSandBox

Here is a list of my dependencies:

"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/styles": "^4.10.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"firebase": "^7.19.0",
"fontsource-roboto": "^3.0.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"

Am I missing something? I couldn't find it in the documentation, and because it works on the sandbox, I'm almost sure it is my fault somewhere, but I can't seem to get it. Thanks in advance!

Upvotes: 2

Views: 3242

Answers (3)

Mike Alvarado
Mike Alvarado

Reputation: 109

My problem wasn't actually with the code but more with the chrome "device emulator", it worked after reloading the browser and already having the "iOS device" pre-set.

I don't know if this is expected behavior. Even with the specific lines on the documentation, it doesn't works.

const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);

<SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />

Upvotes: 1

Carol B.
Carol B.

Reputation: 31

Swipe to open is disabled by default on IOS. Set disableSwipeToOpen prop to false:

disableSwipeToOpen={false}

Upvotes: 1

scruffian
scruffian

Reputation: 697

The SwipableDrawer doesn't work with the temporary or persistent variants of the Drawer. If you remove that prop it should work fine.

If you need to hide the backdrop you can do this:

            <SwipeableDrawer
                sx={{
                    '& .MuiBackdrop-root': {
                        display: 'none',
                    },
                }}
                anchor="left"
                open={ sidebarOpen }
                onClose={ () => dispatch( toggleSidebar() ) }
                onOpen={ () => dispatch( toggleSidebar() ) }
                BackdropProps={{ invisible: true }}
            >
                content
            </SwipeableDrawer>

Upvotes: 2

Related Questions