Handle multiple DOM updates without interference
This test failed before! How embarrassing.
Ben Alpert committed
Nov 9, 2015 at 15:22 UTC
f9a8bdcafe2900902c9912eee8aeec2a0c1fb557
2 files changed
+36
-2
src/renderers/dom/client/utils/DOMChildrenOperations.js
+2
-2
@@ -83,7 +83,7 @@ var DOMChildrenOperations = {
83
update.type === ReactMultiChildUpdateTypes.REMOVE_NODE) {
84
var updatedIndex = update.fromIndex;
85
var updatedChild = update.parentNode.childNodes[updatedIndex];
86
- var parentID = update.parentID;
86
+ var parentID = update.parentInst._rootNodeID;
87
88
invariant(
89
updatedChild,
@@ -143,7 +143,7 @@ var DOMChildrenOperations = {
143
case ReactMultiChildUpdateTypes.MOVE_EXISTING:
144
insertChildAt(
145
update.parentNode,
146
- initialChildren[update.parentID][update.fromIndex],
146
+ initialChildren[update.parentInst._rootNodeID][update.fromIndex],
147
update.toIndex
148
);
149
break;
src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+34
@@ -454,6 +454,40 @@ describe('ReactDOMComponent', function() {
454
ReactDOM.render(<div dir="ltr" />, container);
455
expect(setter.mock.calls.length).toBe(1);
456
});
457
+
458
+ it('handles multiple child updates without interference', function() {
459
+ // This test might look like it's just testing ReactMultiChild but the
460
+ // last bug in this was actually in DOMChildrenOperations so this test
461
+ // needs to be in some DOM-specific test file.
462
+ var container = document.createElement('div');
463
+
464
+ // ABCD
465
+ ReactDOM.render(
466
+ <div>
467
+ <div key="one">
468
+ <div key="A">A</div><div key="B">B</div>
469
+ </div>
470
+ <div key="two">
471
+ <div key="C">C</div><div key="D">D</div>
472
+ </div>
473
+ </div>,
474
+ container
475
+ );
476
+ // BADC
477
+ ReactDOM.render(
478
+ <div>
479
+ <div key="one">
480
+ <div key="B">B</div><div key="A">A</div>
481
+ </div>
482
+ <div key="two">
483
+ <div key="D">D</div><div key="C">C</div>
484
+ </div>
485
+ </div>,
486
+ container
487
+ );
488
+
489
+ expect(container.textContent).toBe('BADC');
490
+ });
491
});
492
493
describe('createOpenTagMarkup', function() {