Should not coerce children prop on custom elements to a string. Fixes #5088
Jim committed
Oct 8, 2015 at 10:07 UTC
86fc94750adb6788b78b220da528461a312190fb
2 files changed
+19
-1
src/renderers/dom/shared/ReactDOMComponent.js
+7
-1
@@ -53,6 +53,7 @@ var registrationNameModules = EventPluginRegistry.registrationNameModules;
53
// For quickly matching children type, to test if can be treated as content.
54
var CONTENT_TYPES = {'string': true, 'number': true};
55
56
+var CHILDREN = keyOf({children: null});
57
var STYLE = keyOf({style: null});
58
var HTML = keyOf({__html: null});
59
@@ -744,7 +745,9 @@ ReactDOMComponent.Mixin = {
745
}
746
var markup = null;
747
if (this._tag != null && isCustomComponent(this._tag, props)) {
747
- markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);
748
+ if (propKey !== CHILDREN) {
749
+ markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);
750
+ }
751
} else {
752
markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue);
753
}
@@ -1015,6 +1018,9 @@ ReactDOMComponent.Mixin = {
1018
deleteListener(this._rootNodeID, propKey);
1019
}
1020
} else if (isCustomComponent(this._tag, nextProps)) {
1021
+ if (propKey === CHILDREN) {
1022
+ nextProp = null;
1023
+ }
1024
DOMPropertyOperations.setValueForAttribute(
1025
getNode(this),
1026
propKey,
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+12
@@ -237,6 +237,18 @@ describe('ReactDOMComponent', function() {
237
expect(stubStyle.display).toEqual('');
238
});
239
240
+ it('should skip child object attribute on web components', function() {
241
+ var container = document.createElement('div');
242
+
243
+ // Test intial render to null
244
+ ReactDOM.render(<my-component children={['foo']} />, container);
245
+ expect(container.firstChild.hasAttribute('children')).toBe(false);
246
+
247
+ // Test updates to null
248
+ ReactDOM.render(<my-component children={['foo']} />, container);
249
+ expect(container.firstChild.hasAttribute('children')).toBe(false);
250
+ });
251
+
252
it('should remove attributes', function() {
253
var container = document.createElement('div');
254
ReactDOM.render(<img height="17" />, container);