Matt-Esch / virtual-dom

A Virtual DOM and diffing algorithm
MIT License
11.67k stars 777 forks source link

Node not re-ordered when moving upwards #404

Open OliverJAsh opened 8 years ago

OliverJAsh commented 8 years ago

I have a node with a key which is re-used and re-ordered in the DOM when it is moved downwards, but not when it is moved upwards. Is there any reason for this?

Demo

untitled

Code

var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');

// 1: Create a function that declares what the DOM should look like
function render(count)  {
    const x = [h('li', { key: 'foo' }, h('input')), h('li', { key: 'bar' }, h('input'))];
    const children = count % 2 === 0 ? x : x.reverse();
    return h('ul', children);
}

// 2: Initialise the document
var count = 0;      // We need some app data. Here we just store a count.

var tree = render(count);               // We need an initial tree
var rootNode = createElement(tree);     // Create an initial root DOM node ...
document.body.appendChild(rootNode);    // ... and it should be in the document

// 3: Wire up the update logic
setInterval(function () {
      count++;

      var newTree = render(count);
      var patches = diff(tree, newTree);
      rootNode = patch(rootNode, patches);
      tree = newTree;
}, 2000);
OliverJAsh commented 8 years ago

Any ideas on this?