react-frame-component
react-frame-component copied to clipboard
Frame re-renders on each load event inside iframe
React bubble up to the Frame component (iframe) each load event that happen in elements rendered inside it, even if browsers normally would stop this at iframe border. This is why on each such load (for example image load) Frame->handleLoad is called and the unconditional setState there would re-render the Frame. For now I'm using a workaround like this:
<Frame>
<div onLoad={ev => ev.stopPropagation()}>{children}</div>
</Frame>
But it would be nice to have a fix in the library. For example at least:
handleLoad = () => {
if (!this.state.iframeLoaded) {
this.setState({ iframeLoaded: true });
}
};
or, maybe checking that the event target is really the iframe.
Wanna have a go at a PR seems like you know how to fix this, I would agree that checking the event target is the frame might be the better approach
Wanna try v5.2.2-alpha.0 prerelease. The changes in their should fix this in theory.
I'm getting a weird error with the Frame Component causing rerenders outside of an act when testing and was curious if there is any known ongoing issues in this regard?