Key-based reordering doesn't work

I have started working on a test for key-based element reordering.

I suspected this wasn’t working, so I decided to build a practical example:

https://codesandbox.io/s/fre-demo-uxuic

In this example, I have a list of counter IDs only (in counters in App) with the actual counter values being maintained in instances of Counter.

As you can see, I’m using a key-attribute on the <Counter/> instances, so the instances (with state) should be preserved between updates - which they are.

But the order of the component instance elements does not get updated.

Here’s an image to explain:

As you can see in the console the “Remove” button handler has reversed the order of the counter IDs from 1, 2, 3 to 3, 2, 1.

But as shown with the red lines, the order of the components in the DOM is still 1, 2, 3, so the reordering doesn’t seem to work.

[mindplay-dk]

Looks solid! 😀🎉

So at this point, I would suggest, hold off making anymore changes to reconciliation, until we have the test in place - making changes at that point will be much safer.

I will try to finish the test soon.

[yisar]

I saw the use cases and probably knew where was wrong. We can continue testing other use cases. Then I’ll fix it as soon as possible until I get online.