Keyed lists and reordering of multiple children

[WorldSEnder]

Problem

The test case as shown in WorldSEnder@71dd160 should work.

Steps To Reproduce

1. Render a list and swap the order of multiple, successive elements in the list.
2. The elements will appear out of order

Environment:

• Yew version: master

Analysis:
The rendering code in vlist::apply_keyed only moves a node if it appears out-of-order relative to the next element, when compared against the new incoming render order. This is wrong. When multiple children are moved, only the first (in render order) child that changes in the order is recognized as out-of-order and moved.

Probably introduced as part of #1555 .

Questionnaire

• I'm interested in fixing this myself but don't know where to start
• I would like to fix and I have a solution
• I don't have time to fix this right now, but maybe later

[voidpumpkin]

@WorldSEnder What is the output when your test case fails?

[WorldSEnder]

The error showing up when running cargo make tests is

console.log div contained:
    panicked at 'assertion failed: `(left == right)`
      left: `"<a></a><i></i><p></p><e></e><u></u>END"`,
     right: `"<p></p><a></a><i></i><e></e><u></u>END"`: Sequential apply failed for layout 'Swap 1,2 <-> 3,4 - after'', packages/yew/src/virtual_dom/mod.rs:643:13

---

My analysis is that it goes like this:

<i></i><e></e><p></p><a></a><u></u>
<i></i><p></p><a></a><e></e><u></u> // key="2" is moved before "5"
<i></i><p></p><a></a><e></e><u></u> // key="1" is not moved
<a></a><i></i><p></p><e></e><u></u> // key="4" is moved before "1"
<a></a><i></i><p></p><e></e><u></u> // key="3" is not moved

[WorldSEnder]

Please do note that I have a major upcoming PR - I suspect the review would take some time - that would fix this. I'm just not sure how long out it is. If there is a quick and nice way to fix this, that'd be better than waiting. Going through the motions of rebasing it onto the suspense changes first though.