Preact: Material-UI4 : Swipeable Drawer doesn't work properly
Swiping to open or close drawer don't work with preact.
only works swipe area's touch event.
In case of using react with same code, drawer works properly.
https://github.com/mui-org/material-ui/issues/18977
reproduction
sandbox (swipe is not work in sandbox editor)
https://codesandbox.io/s/exciting-worker-i67ug
[for reproduction] please swipe from right in this page
https://i67ug.sse.codesandbox.io/index
The cause of issue
https://github.com/mui-org/material-ui/issues/18977#issuecomment-573340815
tky5622
All 2 comments
I had a really hard time with that demo since there's a bunch of Next.js stuff going on that isn't related to the bug.
Here's a preact-cli version of the MUI SwipeableDrawer code sample demonstrating the same result:
https://codesandbox.io/s/preact-mui-swipeable-drawer-73vmp
According to the discussion in mui-org/material-ui#18977, this seems to be an issue with the timing of function ref invocation, perhaps only when React.findDOMNode() is invoked on the subject of the ref callback. This is a strange pattern that I don't know if we should be supporting, and the code comments in MUI make it seem like a hack/workaround for React's "Strict Mode". The same code without function ref proxies could work just fine.
developit
on 11 Feb 2020
The issue is solved by this PR
https://github.com/mui-org/material-ui/pull/19782/files
Thank you for your investigation !
tky5622
on 20 Feb 2020
Related issues
jasongerbes
路
3Comments
KnisterPeter
路
3Comments
matuscongrady
路
3Comments
nopantsmonkey
路
3Comments
simonjoom
路
3Comments
Most helpful comment
I had a really hard time with that demo since there's a bunch of Next.js stuff going on that isn't related to the bug.
Here's a preact-cli version of the MUI SwipeableDrawer code sample demonstrating the same result:
https://codesandbox.io/s/preact-mui-swipeable-drawer-73vmp
According to the discussion in mui-org/material-ui#18977, this seems to be an issue with the timing of function ref invocation, perhaps only when
React.findDOMNode()is invoked on the subject of the ref callback. This is a strange pattern that I don't know if we should be supporting, and the code comments in MUI make it seem like a hack/workaround for React's "Strict Mode". The same code without function ref proxies could work just fine.