<Todo bind:this={todo.ref} ... /> leads to undefined when todos array is mutated about svelte HOT 4 CLOSED

With a keyed each block it works: https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAA51UTY_TMBD9K6OAlESqEriWdsXXhQNcAHHYrsAbTxqz7jiyJ1tWUf47sp2kDZQFcWjrjt98Pb-ZPqmVRpesr_uExAGTdfKqbZNVwg-t_-PuUTMmq8SZzlbesnGVVS1f7WjH6tAay_DJSPPeSNRQW3OAtChnSxEDFN9d-uIXjwV4xC1APbCq7mCIwN1Yyy4JGP_RyMBGGgdbeOpYMGbX4Y4Jj6eqsvSLcA1I5Rp0ab66DFEtQq2NsX9CvLaK9mA6BrbCNWnuUTe5r4Z2LNwDVVB3VLEyBELKr4THr768LIc-RixLUOTQBkhrnPKHeFUZcuxtsIXnL6AsITsqbrxlG3osNNKeG1AMR2PvnE8MAJGAwrVaVZhFE3iv1XR-Np9-aeiNRkHARmnk0LTH5JFdjt_iKBSHZ8jyUFT43xErDdwgVI2gPUIjHLTWtGIvGCUIklCZQ2sIiR004h7hFpHAIkm0KGc2PiLCrSK55ka5be97KSzWAyiCM1mcKDIaC232WTrHB4s1mBpqZV2UwzpdRVaun934aEWDWpssn1orS_DpAK011sEtVqJzOLq0xgUnUA46klgrmup9PL8n14cA5U4FTNGWJQw72pSnMaLNbcdsCAxVWlV32_5cPcPVG2_clBF0taP-CYqqGZUvXDisQEEW6FMyH3ySTZixQOkApXcrvduwo2SVHIxUtUKZrNl2OKzm4fdO_zH9X6xoW7SLkR5tlyb7HRHaxQ6YLQt4HIo-8jr4Kfcqc5mnccngWcJQ2yaGWZ-eKSpszjNM1FyUX3nlJ2BTLsP-jbjzjXci8bs7JxB_BAYk1qLTDJUWzsV1GHaEj3baZmkaBeMl9ptRSdhCZR9aNoUVJM3h8-d3b7NpIQXubFexsZmPOi8h32sx5vE_kySHx9qbefsPcfx50T_2vv5-JGvequMUTZ1Y5M4SfAvmmOVpfERf9fDt8rBJdR8q_CAOuIYzvAf6y7898yiIf2ViarJqlJYW6XEhj7pFjYeTalOp7tMhROtfxiU6h8vy2OHC70IPN8NP41USPewHAAA=

This also kinda explain why position matters. At .length you are pushing in a completely new position. With splice you are "replacing an old one" so the component at position 2 is not unmounted but the prop is replaced and the same goes with the component inside. Is the same component so bind:this is probably not triggered.

Not sure if this is still a bug tho.

from svelte.

Thanks a lot for spotting this! We can of course provide a unique key when that solves the issue. Still, I guess I'd expect this to work without providing a key too (with less efficient reconciliation).

So leaving this open for the Svelte team to decide if there's action needed (could be a fix, or a warning?).

Attaching our Twitter discussion for context:

https://twitter.com/PaoloRicciuti/status/1782036498780414003

from svelte.

Reduced reproducible.

The behavior is the same in Svelte 4, it doesn't work there, too.

I'm inclined to mark this as "works as designed". The reason is that the each array by default is checking the array index for whether or not the whole thing needs to be recreated. Since the indexes only increase, the existing ones never change and so bind:this has no indication to update.

from svelte.

Yeah, this is working as intended. Using keyed each blocks is always the preferred way to handle stateful content FWIW.

from svelte.