DOM elements added outside of preact gets removed on re-render

[saboya]

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!

[ForsakenHarmony]

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

[saboya]

@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.

[developit]

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.

[saboya]

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!

[developit]

Hmm - it looks like react-mdl have a pretty specific fix for this that involves actually modifying the MDL source: react-mdl/react-mdl@36b40df

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..