preact-portal
preact-portal copied to clipboard
developit
Portal re-appends content in IE
Simple counter, portal-ing the display elsewhere: http://jsfiddle.net/50gz1mde/2/
Works as expected in Chrome, Safari, Firefox In IE Edge, 11, 10, 9, it seemingly randomly duplicates the the portal content:
If I press the button rapidly, it works as expected. Pausing for a second or 2 then pressing it again triggers the bug. Very odd.
I wonder... Is it possible there's a browser plugin or something mutating the DOM?
@developit changing Portal's render function to return <div></div> instead of null fixes it. Maybe some kind of garbage collection issue?
Very strange... yeah could be that or something funky with TextNode normalization
Removing all whitespace from the jsx was my first attempt to fix, as I remember IE being weird with text nodes.
Most times JSX will collapse it. I'll try to look deeper into this tonight!
Just checked this again on preact 7.2.0 which I believe contains some fixes that may be related to this, but the issue still occurs. http://jsfiddle.net/50gz1mde/4/
Yeah, am having the same experience with IE11 on this issue. Will try to see if I can get it to give up a specific case where this is consistently reproducible.
OK, found a workaround for this issue if it helps debugging:
https://jsfiddle.net/pzaafu34/
The relevant bit is:
<Portal into="#target" ref={ref => this._portal = ref}>
For some reason, the reference assignment prevents the node from being duplicated when rerendering. I haven't pin-pointed the exact cause or reason why this would fix it, but it is a (mostly working) workaround for the time being. There are still some issues with event handlers.
That makes sense - we were seeing that storing a reference to empty Text nodes in IE keeps them from being normalized away.
@KrofDrakula Thanks for sharing the workaround. Adding the ref assignment directly to the <Portal> element itself didn't work for me, but putting it on the direct child of the <Portal> element seems to work.
