Merge pull request #5434 from spicyj/two-reconcile

Handle multiple DOM updates without interference

src/renderers/dom/client/utils/DOMChildrenOperations.js

@@ -83,7 +83,7 @@ var DOMChildrenOperations = {
           update.type === ReactMultiChildUpdateTypes.REMOVE_NODE) {
         var updatedIndex = update.fromIndex;
         var updatedChild = update.parentNode.childNodes[updatedIndex];
-        var parentID = update.parentID;
+        var parentID = update.parentInst._rootNodeID;
 
         invariant(
           updatedChild,
@@ -143,7 +143,7 @@ var DOMChildrenOperations = {
         case ReactMultiChildUpdateTypes.MOVE_EXISTING:
           insertChildAt(
             update.parentNode,
-            initialChildren[update.parentID][update.fromIndex],
+            initialChildren[update.parentInst._rootNodeID][update.fromIndex],
             update.toIndex
           );
           break;

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -454,6 +454,40 @@ describe('ReactDOMComponent', function() {
       ReactDOM.render(<div dir="ltr" />, container);
       expect(setter.mock.calls.length).toBe(1);
     });
+
+    it('handles multiple child updates without interference', function() {
+      // This test might look like it's just testing ReactMultiChild but the
+      // last bug in this was actually in DOMChildrenOperations so this test
+      // needs to be in some DOM-specific test file.
+      var container = document.createElement('div');
+
+      // ABCD
+      ReactDOM.render(
+        <div>
+          <div key="one">
+            <div key="A">A</div><div key="B">B</div>
+          </div>
+          <div key="two">
+            <div key="C">C</div><div key="D">D</div>
+          </div>
+        </div>,
+        container
+      );
+      // BADC
+      ReactDOM.render(
+        <div>
+          <div key="one">
+            <div key="B">B</div><div key="A">A</div>
+          </div>
+          <div key="two">
+            <div key="D">D</div><div key="C">C</div>
+          </div>
+        </div>,
+        container
+      );
+
+      expect(container.textContent).toBe('BADC');
+    });
   });
 
   describe('createOpenTagMarkup', function() {