Fix #6950, work around IE missing innerHTML on SVG nodes #6982

joshhunt · 2016-06-07T06:45:19Z

Fixes #6950, where dangerouslySetInnerHTML doesn't work on any SVG tag. I updated setInnerHTML to use the method hashed out by @spicyj, and updated DOMLazyTree's use of node.innerHTML to use setInnerHTML instead.

I was hesitant about updating DOMLazyTree to use the setInnerHTML util, but it seemed to make the most sense. If it's not appropriate I'll just make the workaround local to DOMLazyTree.

If this looks good I'll go ahead and add some tests to make sure it continues to work.

Fork the repo and create your branch from master. ✅

If you've added code that should be tested, add tests! ✅

If you've changed APIs, update the documentation.

Ensure the test suite passes (grunt test). ✅

Make sure your code lints (grunt lint) - we've done our best to make sure these rules match our internal linting guidelines. ✅

If you haven't already, complete the CLA. ✅

sophiebits · 2016-06-07T06:53:04Z

This looks generally correct. Can we detect when .innerHTML is missing and only do this workaround in that case? Otherwise I think this is right. It might be hard to cover this with our unit test setup.

joshhunt · 2016-06-07T08:47:42Z

That sounds a lot better, and makes things neater. I only added the typeof SVGElement check because SVGElement is actually not present in the testing environment, so at least that should be easier to work with. I'll have a go at adding tests and report back.

syranide · 2016-06-07T09:53:03Z

src/renderers/dom/client/utils/setInnerHTML.js

+    // the target node
+    if (typeof SVGElement !== 'undefined' && node instanceof SVGElement) {
+      reusableSVGContainer = reusableSVGContainer || document.createElement('div');
+      reusableSVGContainer.innerHTML = '<svg>' + html + '</svg>';


Am I missing something, why not create the svg directly and drop the div? EDIT: It seems to have innerHTML, but perhaps it doesn't actually work?

IE does not support innerHTML on SVG Elements, so we wrap the markup to make it a 'complete' svg string, pop that into a temp container node, then copy across the children of the <svg>.

facebook-github-bot · 2016-06-07T11:17:59Z

@joshhunt updated the pull request.

facebook-github-bot · 2016-06-07T12:13:28Z

@joshhunt updated the pull request.

syranide · 2016-06-07T12:58:17Z

src/renderers/dom/client/utils/setInnerHTML.js

@@ -28,7 +31,20 @@ var createMicrosoftUnsafeLocalFunction = require('createMicrosoftUnsafeLocalFunc
 */
 var setInnerHTML = createMicrosoftUnsafeLocalFunction(
  function(node, html) {
-    node.innerHTML = html;
+    if ('innerHTML' in node) {


@spicyj Perhaps it makes sense to check for the SVG namespace as well?

Yeah let's do…

if (node.namespaceURI === DOMNamespaces.svg && !('innerHTML' in node)) { // workaround } else { node.innerHTML = html; }

Then I think this looks good if you have done manual testing that reproduces the original issue and confirms this fixes it.

Hmm... is it possible that this could break due to improper namespaces or does HTML enforce the SVG namespace on descendants of an SVG-element? I think not? But perhaps the element does not work correctly either without a proper namespace?

I don't believe SVG elements work with an incorrect namespace, and the parser should assign it automatically in most cases.

what would be the advantage of checking the namespace as opposed to just checking if the node is a SVGElement?

Either would be fine. Namespace works better in jsdom but if you prefer instanceof SVGElement that seems fine too.

ghost · 2016-06-08T01:11:13Z

@joshhunt updated the pull request.

ghost · 2016-06-08T12:54:37Z

@joshhunt updated the pull request.

ghost · 2016-06-08T13:36:20Z

@joshhunt updated the pull request.

sophiebits · 2016-06-08T17:00:07Z

Looks great, thank you!

…ebook#6982) * Workaround IE lacking innerHTML on SVG elements * Add tests for setInnerHTML * Correctly check if node has innerHTML property * Ensure tests for setInnerHTML actually tests both codepaths * Provide mock element for setInnerHTML tests * Only use SVG setInnerHTML workaround for SVG elements (cherry picked from commit 99d8524)

* Workaround IE lacking innerHTML on SVG elements * Add tests for setInnerHTML * Correctly check if node has innerHTML property * Ensure tests for setInnerHTML actually tests both codepaths * Provide mock element for setInnerHTML tests * Only use SVG setInnerHTML workaround for SVG elements (cherry picked from commit 99d8524)

zpao · 2016-08-30T16:44:31Z

src/renderers/dom/client/utils/setInnerHTML.js

+      var newNodes = reusableSVGContainer.firstChild.childNodes;
+      for (var i = 0; i < newNodes.length; i++) {
+        node.appendChild(newNodes[i]);
+      }


As @jp7837 pointed out in #7358 (comment) - this is going to get every other child - childNodes is a live NodeList. This should be a while loop. I can confirm this is what is happening in IE11.

Workaround IE lacking innerHTML on SVG elements

1f42783

ghost added GH Review: review-needed CLA Signed labels Jun 7, 2016

syranide reviewed Jun 7, 2016
View reviewed changes

Add tests for setInnerHTML

3589357

Correctly check if node has innerHTML property

382251b

syranide reviewed Jun 7, 2016
View reviewed changes

Ensure tests for setInnerHTML actually tests both codepaths

0472e33

Provide mock element for setInnerHTML tests

da366c6

Only use SVG setInnerHTML workaround for SVG elements

446759b

sophiebits added GH Review: accepted and removed GH Review: review-needed labels Jun 8, 2016

sophiebits added this to the 15-next milestone Jun 8, 2016

sophiebits merged commit 99d8524 into facebook:master Jun 8, 2016

zpao modified the milestones: 15-next, 15.2.0 Jun 14, 2016

jasford mentioned this pull request Aug 15, 2016

dangerouslySetInnerHTML not working in SVG elements on Edge browser #7506

Closed

jp7837 mentioned this pull request Aug 29, 2016

Some inline SVGs not rendering in IE 11 #7358

Closed

zpao reviewed Aug 30, 2016
View reviewed changes

zpao mentioned this pull request Aug 30, 2016

Copy all SVG child nodes when using setting innerHTML in IE #7618

Merged

OriR mentioned this pull request Jun 20, 2017

dangerouslySetInnerHTML in IE11 for svg elements #10013

Closed

renovate bot mentioned this pull request Feb 2, 2018

Update dependency react to v0.14.9 - autoclosed signavio/backbone-rel#29

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix #6950, work around IE missing innerHTML on SVG nodes #6982

Fix #6950, work around IE missing innerHTML on SVG nodes #6982

joshhunt commented Jun 7, 2016 •

edited

Loading

sophiebits commented Jun 7, 2016

joshhunt commented Jun 7, 2016

syranide Jun 7, 2016 •

edited

Loading

joshhunt Jun 7, 2016

facebook-github-bot commented Jun 7, 2016

facebook-github-bot commented Jun 7, 2016

syranide Jun 7, 2016

sophiebits Jun 7, 2016

syranide Jun 7, 2016

sophiebits Jun 7, 2016

joshhunt Jun 7, 2016

sophiebits Jun 7, 2016

ghost commented Jun 8, 2016

ghost commented Jun 8, 2016

ghost commented Jun 8, 2016

sophiebits commented Jun 8, 2016

zpao Aug 30, 2016

Fix #6950, work around IE missing innerHTML on SVG nodes #6982

Fix #6950, work around IE missing innerHTML on SVG nodes #6982

Conversation

joshhunt commented Jun 7, 2016 • edited Loading

sophiebits commented Jun 7, 2016

joshhunt commented Jun 7, 2016

syranide Jun 7, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

facebook-github-bot commented Jun 7, 2016

facebook-github-bot commented Jun 7, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ghost commented Jun 8, 2016

ghost commented Jun 8, 2016

ghost commented Jun 8, 2016

sophiebits commented Jun 8, 2016

Choose a reason for hiding this comment

joshhunt commented Jun 7, 2016 •

edited

Loading

syranide Jun 7, 2016 •

edited

Loading