Closed
Description
Cant't mount text node components in a child window in IE11 and Edge.
http://jsfiddle.net/69z2wepo/78456/
const SomeComponent = () => (
<div>
<span>This will be displayed</span>
<br/>
This will not be displayed (This is the text node that will break the mounting)
<br/>
<span>This will not be displayed because the mounting has stopped</span>
</div>
);
class PopoutWindow extends React.Component {
constructor(props) {
super(props);
this.state = {
openedWindow: null
};
}
componentDidMount() {
var win,
container,
openedWindow = {};
var onLoadHandler = () => {
container = win.document.createElement('div');
container.id = 'test';
win.document.body.appendChild(container);
ReactDOM.render(this.props.children, container);
openedWindow.update = newComponent => {
ReactDOM.render(newComponent, container);
};
this.setState({openedWindow: openedWindow});
};
win = window.open('about:blank', 'Test', 'width: 600px; height: 600px');
win.onload = onLoadHandler;
// call onload handler in case it's not been called
setTimeout(onLoadHandler, 0);
}
componentDidUpdate() {
this.state.openedWindow.update(this.props.children);
}
render() {
return <div />;
}
}
ReactDOM.render((
<PopoutWindow title="Test">
<SomeComponent />
</PopoutWindow>
), container);It throws the following error: SCRIPT87: Invalid argument.
Debugging the stack trace I've noticed that the fragment creation (ownerDocument.createDocumentFragment(), line 7923, react-dom.js) is resulting in a malformed fragment. Later, when trying to append this "malformed" fragment to the DOM (parentNode.insertBefore(tree.node, referenceNode), line 1623, react-dom.js), it fails and throws that error.
I tried to replace the fragment by a span element for this specific case (IE11 and child window) and it worked. Could this be a solution?