react-frame-component icon indicating copy to clipboard operation
react-frame-component copied to clipboard

Frame re-renders on each load event inside iframe

Open igorbt opened this issue 3 years ago • 3 comments

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.

igorbt avatar Aug 18 '21 14:08 igorbt

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

ryanseddon avatar Sep 03 '21 01:09 ryanseddon

Wanna try v5.2.2-alpha.0 prerelease. The changes in their should fix this in theory.

ryanseddon avatar Mar 22 '22 02:03 ryanseddon

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?

AnthonyCrowcroft avatar Oct 10 '22 06:10 AnthonyCrowcroft