Unexpected store invalidation inside each block / select tag

[vkurko]

Describe the bug
If you put an array inside a store, then assign an item from that array to a variable and use both in select tag (or very likely in any similar each block) then you will unexpectedly get the store invalidated even though it was not modified during the loop. This causes side-effects which break the functionality (see REPL link below).

To Reproduce
Please see the issue at https://svelte.dev/repl/b08ad3a4aa334e37837769efd3e64e4a?version=3

The first select works fine and allows you to choose any of 2 options.
The second select does not allow you to choose another option. It is stuck on "item 2".

Expected behavior
Both selects allow to choose any options.

Additional context
Svelte version 3.31.0

[vkurko]

Probably the issue was introduced by these changes #2444.

[tanhauhau]

You are not supposed to bind:value which is reactively declared:

<script>
    $: selectedItem2 = $items2[selectedIdx];
</script>

<select bind:value={selectedItem2} />

which leads to unexpected behavior.

see #4933

[vkurko]

Isn't selectedItem1 reactively declared too? It works fine in my example.

I'm not sure which condition from #4933 my case applies to. But it seems to be related.

[Phaqui]

Yes, you are correct, vkurko. I almost broke my head trying to figure out what is actually going on in your example. Of course, the fix is simple: Just have the variables be normal variables defined by let (they are not really reactive). But why exactly the first example seems to work, and the other one doesn't? I have no idea.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dummdidumm]

Closing as duplicate of #4933 which is the more general issue about this topic