The IE11 document.implementation.createHTMLDocument API requires the title argument to be specified

[leidegre]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

React interactivity lost, React crash?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/ebsrpraL/).

Run with react-dom.development.js in IE11, not sure exactly what the exact repo steps are the fix I've attempted for IE11 was to simply pass an empty string.

var normalizeHTML = function (parent, html) {
    if (!testDocument) {
      testDocument = document.implementation.createHTMLDocument(""); // fix for IE11 here
    }
    var testElement = parent.namespaceURI === HTML_NAMESPACE ? testDocument.createElement(parent.tagName) : testDocument.createElementNS(parent.namespaceURI, parent.tagName);
    testElement.innerHTML = html;
    return testElement.innerHTML;
  };
}

Source

react/src/renderers/dom/fiber/ReactDOMFiberComponent.js

Lines 133 to 146 in e932ad6

	var normalizeHTML = function(parent: Element, html: string) {
	if (!testDocument) {
	testDocument = document.implementation.createHTMLDocument();
	}
	var testElement = parent.namespaceURI === HTML_NAMESPACE
	? testDocument.createElement(parent.tagName)
	: testDocument.createElementNS(
	(parent.namespaceURI: any),
	parent.tagName,
	);
	testElement.innerHTML = html;
	return testElement.innerHTML;
	};
	}

MDN docs here.

What is the expected behavior?

Well, that React does not crash in dev mode and that interactively continues to work.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

[email protected] IE11

[leidegre]

This only impacts IE11 users running a development build of React, it's not an issue in production. It's a nuisance but easy to work around with above-mentioned change.

What would be the appropriate fix for this? because we, unfortunately, have to support IE11. I can perform the work if I know what's expected or a reasonable fix for the issue.

[gaearon]

Can you provide a failing unit test? It is not very clear to me what this code is referring to.

[leidegre]

...and I thought I was being super clear!

document.implementation.createHTMLDocument(""); // fix for IE11 here

Unless that empty string "" is passed react.development.js won't function properly in IE11.

Edit: this is an IE11 quirk, I don't think any unit test would fail from this because it would require the test to run inside IE11.

[gaearon]

Do you want to send a PR with this change?

[leidegre]

Absolutely, if it's an acceptable change.

[gaearon]

Sounds reasonable to me. :-)

[gaearon]

Fixed via #10921.

[Gekkio]

This is already fixed, but just for the record: IE10 is also affected by the original problem. An error is thrown and it's the line containing the createHTMLDocument call.

[gaearon]

React 16.1.0-beta has been released. Please update react, react-dom, and react-test-renderer (if you use it) to this version and let us know if it solved the issue! We’d appreciate if you could test before Monday when we plan to get 16.1.0 out.