Fixed removing attributes during custom element update. Fixes #6747 (#6748)
Dmitriy Kubyshkin committed
May 13, 2016 at 02:00 UTC
0e889d7c724fe41a16668d651ddb443b854397be
3 files changed
+34
src/renderers/dom/shared/DOMPropertyOperations.js
+18
@@ -206,6 +206,24 @@ var DOMPropertyOperations = {
206
}
207
},
208
209
+ /**
210
+ * Deletes an attributes from a node.
211
+ *
212
+ * @param {DOMElement} node
213
+ * @param {string} name
214
+ */
215
+ deleteValueForAttribute: function(node, name) {
216
+ node.removeAttribute(name);
217
+ if (__DEV__) {
218
+ ReactDOMInstrumentation.debugTool.onDeleteValueForProperty(node, name);
219
+ ReactInstrumentation.debugTool.onNativeOperation(
220
+ ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
221
+ 'remove attribute',
222
+ name
223
+ );
224
+ }
225
+ },
226
+
227
/**
228
* Deletes the value for a property on a node.
229
*
src/renderers/dom/shared/ReactDOMComponent.js
+7
@@ -911,6 +911,13 @@ ReactDOMComponent.Mixin = {
911
// listener (e.g., onClick={null})
912
deleteListener(this, propKey);
913
}
914
+ } else if (isCustomComponent(this._tag, lastProps)) {
915
+ if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
916
+ DOMPropertyOperations.deleteValueForAttribute(
917
+ getNode(this),
918
+ propKey
919
+ );
920
+ }
921
} else if (
922
DOMProperty.properties[propKey] ||
923
DOMProperty.isCustomAttribute(propKey)) {
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+9
@@ -304,6 +304,15 @@ describe('ReactDOMComponent', function() {
304
expect(container.firstChild.className).toEqual('');
305
});
306
307
+ it('should properly update custom attributes on custom elements', function() {
308
+ var container = document.createElement('div');
309
+ ReactDOM.render(<some-custom-element foo="bar"/>, container);
310
+ ReactDOM.render(<some-custom-element bar="buzz"/>, container);
311
+ var node = container.firstChild;
312
+ expect(node.hasAttribute('foo')).toBe(false);
313
+ expect(node.getAttribute('bar')).toBe('buzz');
314
+ });
315
+
316
it('should clear a single style prop when changing `style`', function() {
317
var styles = {display: 'none', color: 'red'};
318
var container = document.createElement('div');