search

nomcopter / react-mosaic

A React tiling window manager
https://nomcopter.github.io/react-mosaic/
Other
4.39k stars 226 forks source link

Problem with iframe inside node #177

Open MaxCheil opened 2 years ago

MaxCheil commented 2 years ago

Bug report

Steps to reproduce

Get an iframe with url inside all your nodes. Get 2 panels inside your mosaic.

Actual behavior

When you switch postion between 1 to the second, the panel containing the iframe is reloaded.

Expected behavior

The first node containing also an url is not reloading. The second node should also not be reloaded. The second node seems to be created anew after each Dnd switching position with the first one.

Is it possible to not reload the iframa each time for the second node inside the mosaic ? It seems the second node is destroy and re-created each time we make a dnd. It is a weird behavior.

andreas-sqsh commented 2 years ago

Hi,

not a bug, but normal React behaviour IMO.

However, this is possible by having a secondary state that keeps a reference to a DOM node within your tile.

Then use a portal that renders your iframe to the DOM node.

https://codesandbox.io/s/2xxw57k82y?file=/src/index.js:720-732

ggdaltoso commented 2 years ago

Your issue might be related to this StackOverflow answer:

_The _Problem:_ An iframe contains a completely separate window from the parent window. When a user interacts with an iframe, the parent window no longer receives user events. The browser assumes you want1 to interact with the contents of the iframe, and ignores any draggable attributes that may be on a parent of the iframe.

A Workaround: You could position an invisible element over the iframe to prevent the user from interacting with the iframe below. Here is an example using an absolute-positioned pseudo-element.