Preact: Strange issue with elements swiping their positions before first re-render.

[idchlife]

I'll try to explain deeply. Somehow I don't see why this is happening.

"preact": "^5.1.0-beta.26"

This is how it looks like in the code:

(file SexSelect.js)

This is what happens when rendering:

https://api.monosnap.com/rpc/file/download?id=2IuuHNs7Exa2KwYQV0FBjE7tf0LapU

The thing is - everything is ok when I'm using bin:

http://www.webpackbin.com/VkhKLca8-

Also, I'm using preact-router, but this is one Page Component so I don't think it's really that important.

[developit]

Thanks for the awesome bug description as usual.

A few things it would be useful if you could try, since the webpackbin repro doesn't show the same issue:

• Try adding key="1" and key="2" to the select-sex-* divs. This helps me know whether it's a repeated diff triggering the swap, or the default reconciler re-ordering by default.
• Try making the second <div> some other node name, like <section>. Similar to the above, this will help us see if the diff itself is doing incorrect ordering.

If I had to guess, I'd say this looks like an edge case created by the extra equality check here:
https://github.com/developit/preact/blob/master/src/vdom/diff.js#L169-L170

While I thought that it would be safe to check if the next element in the existing child list was a match, in the case where the nodes are both valid but simply need to be reversed, I could see it being possible for this to trigger your issue.

[idchlife]

After adding keys things got even more weirder :D

Two buttons just stay inverted

https://api.monosnap.com/rpc/file/download?id=Vyku3MEyccVnHPUS5bM0NdSo4Lk6hl

Rewriting second div to section gives same result D:

[developit]

@idchlife hmm - seems like a diff ordering issue. It's weird though, this case is covered in the tests. Any chance it happens in Chrome too?

[idchlife]

I'm trying right now to recreate it in webpackbin.

Yes, it does appear in chrome also.

[developit]

K, good to know. I think the line ref I pointed to might be the issue. If you're comfortable, you could localmod node_modules/preact/dist/preact.js. Just replace the whole file with this:

https://gist.github.com/developit/d9ec7c9db0b930bdde3e84c6173de5b3

[idchlife]

@developit your gist solved the issue! Thank you :)

[developit]

Sweet, I'll revert that "optimization" then, haha.

[developit]

Fix released in 5.2.0-beta.0.