Ember.js: DOM order of rendering updated array by {{each}}

[JennieJi]

Twiddle DEMO: https://ember-twiddle.com/3da809193fd5a5f9a032a9603868f151

This is an interesting case found recently. I believe it appears since 2.9 or 2.10.
This case happens when I render an array with {{each}} and then update part of it. Then then rendering of this array will not follow its index any more, it will append the updated item to the end of this {{each}} block.

[GavinJoyce]

^ seems to have been introduced in 2.10

[krisselden]

I'm guessing it has something to do with the key being falsy and/or falsy + the collision key generation.

[krisselden]

If I make the default value something that doesn't coerce to false then it works https://ember-twiddle.com/64e6925cbc56ecc82f5aa94e399351a6

[JennieJi]

@krisselden Lol, this is interesting. Thank you, at least it can be easily hacked right now.

[rwjblue]

You can also use {{#each foo key="@index" as |bar|}} to prevent the issue

[pixelhandler]

@sclatter as @rwjblue points out using a key works, I forked your twiddle as an example, https://ember-twiddle.com/ef8d4a820f6c587edde512438a7339e1?openFiles=templates.application.hbs%2C

[sclatter]

@pixelhandler I think you meant to cc @JennieJi ? ^

[JennieJi]

@sclatter @pixelhandler @rwjblue thank you, it works very well.

[krisselden]

@rwjblue using @index also causes no falsy keys. There is definitely something off about "" string key, I'm glad there are workarounds but this is still a bug.