diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js index 346e4091d20..241e194377b 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberComponent.js +++ b/src/renderers/dom/fiber/ReactDOMFiberComponent.js @@ -928,8 +928,10 @@ var ReactDOMFiberComponent = { var extraAttributeNames: Set = new Set(); var attributes = domElement.attributes; for (var i = 0; i < attributes.length; i++) { - // TODO: Do we need to lower case this to get case insensitive matches? - var name = attributes[i].name; + // Downcase to work around IE Edge, which reports some SVG attributes + // in all-caps. See: + // https://github.com/facebook/react/pull/10394#issuecomment-320523369 + var name = attributes[i].name.toLowerCase(); switch (name) { // Built-in attributes are whitelisted // TODO: Once these are gone from the server renderer, we don't need @@ -1024,7 +1026,7 @@ var ReactDOMFiberComponent = { DOMProperty.isCustomAttribute(propKey) ) { // $FlowFixMe - Should be inferred as not undefined. - extraAttributeNames.delete(propKey); + extraAttributeNames.delete(propKey.toLowerCase()); serverValue = DOMPropertyOperations.getValueForAttribute( domElement, propKey, diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js index 2f7c137cbb1..03f49ebc35d 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js @@ -624,6 +624,12 @@ describe('ReactDOMServerIntegration', () => { const e = await render(
); expect(e.hasAttribute('className')).toBe(false); }); + + itRenders('no lower case classname', async render => { + const e = await render(
, 1); + expect(e.hasAttribute('className')).toBe(false); + expect(e.hasAttribute('class')).toBe(false); + }); }); describe('htmlFor property', function() { @@ -789,6 +795,11 @@ describe('ReactDOMServerIntegration', () => { expect(e.getAttribute('data-foo')).toBe('bar'); }); + itRenders('unknown data- attributes with casing', async render => { + const e = await render(
, 0); + expect(e.getAttribute('data-myAttribute')).toBe('test'); + }); + itRenders('no unknown data- attributes with null value', async render => { const e = await render(
); expect(e.hasAttribute('data-foo')).toBe(false);