Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Fix dropped iframe content in firefox #20686

Merged
merged 4 commits into from
Apr 22, 2020
Merged

[docs] Fix dropped iframe content in firefox #20686

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f27f95e
[docs] Fix dropped iframe content in firefox
eps1lon Apr 22, 2020
1ec09cd
cant reproduce locally with exported docs
eps1lon Apr 22, 2020
5c4ccb9
fix: Close over the correct document
eps1lon Apr 22, 2020
7aaf279
Update docs/src/modules/components/DemoSandboxed.js
eps1lon Apr 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions docs/src/modules/components/DemoSandboxed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,17 +61,29 @@ function DemoFrame(props) {
*/
const frameRef = React.useRef(null);

const [mounted, setMounted] = React.useState(false);
// If we portal content into the iframe before the load event then that content
// is dropped in firefox.
const [iframeLoaded, onLoad] = React.useReducer(() => true, false);

React.useEffect(() => {
setMounted(true);
}, []);
const document = frameRef.current.contentDocument;
// When we hydarte the iframe then the load event is already dispatched
eps1lon marked this conversation as resolved.
Show resolved Hide resolved
// once the iframe markup is parsed (maybe later but the important part is
// that it happens before React can attach event listeners).
// We need to check the readyState of the document once the iframe is mounted
// and "replay" the missed load event.
// See https://github.com/facebook/react/pull/13862 for ongoing effort in React
// (though not with iframes in mind).
if (document != null && document.readyState === 'complete' && !iframeLoaded) {
onLoad();
}
}, [iframeLoaded]);

const document = frameRef.current?.contentDocument;

return (
<React.Fragment>
<iframe className={classes.frame} ref={frameRef} title={title} {...other} />
{mounted
<iframe className={classes.frame} onLoad={onLoad} ref={frameRef} title={title} {...other} />
{iframeLoaded !== false
? ReactDOM.createPortal(
<FramedDemo document={document}>{children}</FramedDemo>,
document.body,
Expand Down