preact-compat
preact-compat copied to clipboard
preactjs
DOM elements added outside of preact gets removed on re-render
Hello. I've been trying to replace React / React-DOM with preact / preact-compat on an existing project of mine. This project uses react-mdl fpr the UI. Everything works fine, however, there's an issue with the drawer button.
The button is added after the page is rendered by material-design-lite's own JS. Because of that, if there's a state change that triggers a re-render for the parent of that element, preact removes it. This does not happen with React, however.
I believe this is kind of like #39 and #405 from preact.
I made a small demo reproducing the bug. You can get it here. Just npm install and npm start (uses webpack-dev-server).
PS: I realize this can be worked around by isolating the component and making sure it never re-renders, but I'm reporting since I believe this could improve preact-compat compatibility with other React projects.
Thanks for the great work!
There is preact-mdl which you might want to use
But preact shouldn't remove any dom elements not added by it since version 7
@ForsakenHarmony I'm aware of preact-mdl, but this is an existing project. I'll probably migrate someday, but not today :) Thanks for the heads-up.
Yeah, I read that on one of the bug reports, however I believe it still happens in this case.
This is because mdl moves the element outside of Preact's knowledge. Super happy to discuss the issue, but at present I don't really have a workaround.
Since I'm not familiar with the inner workings, I'd welcome a more detailed explanation of what's happening if you're willing to shed some light on the issue. But, if you think it's a bit out of reach to fix right now, I'll work around it or slowly migrate to preact-mdl.
Thanks!
Hmm - it looks like react-mdl have a pretty specific fix for this that involves actually modifying the MDL source: https://github.com/react-mdl/react-mdl/commit/36b40dfb51eea887d5b1bdcb6ad21eb5f05f40a3
Discussion here: https://github.com/react-mdl/react-mdl/issues/143
Not sure why those wouldn't work in Preact, nothing is really different there..