Review us!
Hi everyone,
I'm developing anMF UI Extensibility Framework application that uses the embedded dashboards functionality to display external web content inside a custom tab (via <iframe>).
I am encountering a strange issue with the fullscreen button (top right corner) in the embedded dashboard tab:
Problem:
On first click, the dashboard goes fullscreen as expected.
On the second click, it exits fullscreen without issues.
But if I click the fullscreen button a third time (trying to enter fullscreen again), nothing happens and I get the following error in the browser console:
Uncaught Error: Minified React error #409; visit reactjs.org/.../error-decoder.html for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Cannot update an unmounted root.
Here is my dashboard.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html,
body,
iframe {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: none;
}
html,
body {
overflow: hidden;
}
</style>
<script src="mfiles.extensibility.protocol.js"></script>
<script src="dashboard.js"></script>
<meta charset="utf-8" />
</head>
<body>
<iframe
id="embeddedDashboardFrame"
sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
style="display: none"
allowFullScreen=""
webkitallowfullscreen="true"
mozallowfullscreen="true"
></iframe>
</body>
</html>How do I fix this error so that fullscreen mode can be toggled multiple times without breaking?
