Fix false positive SVG hydration warning for mixed case tags (#11174)
* Add a failing test for <feMorphology> SSR It causes a false positive warning on hydration. * Make hydration tag comparison case insensitive
Dan Abramov committed
Oct 10, 2017 at 19:34 UTC
f42dfcdb943eb2c5299139820f626e8a81561165
2 files changed
+9
-1
src/renderers/dom/fiber/ReactDOMFiberEntry.js
+1
-1
@@ -446,7 +446,7 @@ var DOMRenderer = ReactFiberReconciler({
446
): boolean {
447
return (
448
instance.nodeType === ELEMENT_NODE &&
449
- type === instance.nodeName.toLowerCase()
449
+ type.toLowerCase() === instance.nodeName.toLowerCase()
450
);
451
},
452
src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
+8
@@ -1344,6 +1344,14 @@ describe('ReactDOMServerIntegration', () => {
1344
},
1345
);
1346
1347
+ itRenders('svg element with a mixed case name', async render => {
1348
+ let e = await render(<svg><filter><feMorphology /></filter></svg>);
1349
+ e = e.firstChild.firstChild;
1350
+ expect(e.childNodes.length).toBe(0);
1351
+ expect(e.tagName).toBe('feMorphology');
1352
+ expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');
1353
+ });
1354
+
1355
itRenders('a math element', async render => {
1356
const e = await render(<math />);
1357
expect(e.childNodes.length).toBe(0);