diff --git a/src/diff/children.js b/src/diff/children.js index c4faed9cfe..ed08514f4d 100644 --- a/src/diff/children.js +++ b/src/diff/children.js @@ -227,9 +227,11 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) { childVNode = newParentVNode._children[i] = childVNode; } + const skewedIndex = i + skew; + // Handle unmounting null placeholders, i.e. VNode => null in unkeyed children if (childVNode == null) { - oldVNode = oldChildren[i]; + oldVNode = oldChildren[skewedIndex]; if ( oldVNode && oldVNode.key == null && @@ -238,8 +240,6 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) { ) { if (oldVNode._dom == newParentVNode._nextDom) { newParentVNode._nextDom = getDomSibling(oldVNode); - } else { - skew++; } unmount(oldVNode, oldVNode, false); @@ -252,7 +252,7 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) { // to unmount this VNode again seeing `_match==true`. Further, // getDomSibling doesn't know about _match and so would incorrectly // assume DOM nodes in this subtree are mounted and usable. - oldChildren[i] = null; + oldChildren[skewedIndex] = null; remainingOldChildren--; } continue; @@ -261,7 +261,6 @@ function constructNewChildrenArray(newParentVNode, renderResult, oldChildren) { childVNode._parent = newParentVNode; childVNode._depth = newParentVNode._depth + 1; - const skewedIndex = i + skew; const matchingIndex = findMatchingIndex( childVNode, oldChildren, diff --git a/test/browser/fragments.test.js b/test/browser/fragments.test.js index 4634a4320e..20fed865e4 100644 --- a/test/browser/fragments.test.js +++ b/test/browser/fragments.test.js @@ -1304,7 +1304,7 @@ describe('Fragment', () => { 'rendering from true to false' ); expectDomLogToBe( - ['
  • 1.remove()', '
  • 2.remove()', '
      043.appendChild(
    1. 4)'], + ['
    2. 1.remove()', '
    3. 2.remove()'], 'rendering from true to false' ); diff --git a/test/browser/render.test.js b/test/browser/render.test.js index 9daf4b6099..075b6ad39f 100644 --- a/test/browser/render.test.js +++ b/test/browser/render.test.js @@ -1360,6 +1360,7 @@ describe('render()', () => { it('should not crash or repeatedly add the same child when replacing a matched vnode with null (mixed dom-types)', () => { const B = () =>
      B
      ; + /** @type {() => void} */ let update; class App extends Component { constructor(props) { @@ -1375,38 +1376,38 @@ describe('render()', () => { return (
      -
      +
      C
      ); } return (
      - + A {null} -
      +
      C
      ); } } render(, scratch); - expect(scratch.innerHTML).to.equal('
      B
      '); + expect(scratch.innerHTML).to.equal('
      B
      C
      '); update(); rerender(); expect(scratch.innerHTML).to.equal( - '
      B
      ' + '
      A
      B
      C
      ' ); update(); rerender(); - expect(scratch.innerHTML).to.equal('
      B
      '); + expect(scratch.innerHTML).to.equal('
      B
      C
      '); update(); rerender(); expect(scratch.innerHTML).to.equal( - '
      B
      ' + '
      A
      B
      C
      ' ); }); });