Svelte: bind:value for keyed select tag doesn't work when options are updated

[aubergene]

The selected value is known oncreate, but the <option> values are added later. The selected value isn't set when they are added.

https://svelte.technology/repl?version=2.13.5&gist=17b698af0622793d4ab86ae62e275a51

Looks like it's related/similar to #1730 #1252 #1711

[stalkerg]

yep, it's definitely my #1730 case.

[aubergene]

As a horrid hack I've got this, any improvements most welcome

edit: solution below is much better, thanks!

[PaulMaly]

@aubergene Hi! A quick workaround for this issue:
https://svelte.technology/repl?version=2.13.5&gist=4f15953652df80e9924a652e8865c8cd

<option selected={selected === item.slug} value="{item.slug}">{item.name}</option>

[Rich-Harris]

Updated REPL for v3 (still broken) https://svelte.dev/repl/2c67955263d74afaa639dc4ef4c9fe2c?version=3.6.2

[stalkerg]

I also update my example to v3: https://svelte.dev/repl/a2e1ae9fd08640d494b892a135df3c8f?version=3

@Rich-Harris maybe you know, have any chance to change browser API here?

[Conduitry]

At the same time as fixing this, we should also make it a compile-time error to specify selected on an <option> inside a <select> that is one- or two-way bound. That will unfortunately mean that the necessary workaround would then refuse to compile, but it seems like the sanest way to maintain a consistent state.

[adamduncan]

Hello :wave: Is there any update on this issue, or possible v3 workarounds in the interim?

[Conduitry]

This is fixed at last in 3.23.0 - https://svelte.dev/repl/2c67955263d74afaa639dc4ef4c9fe2c?version=3.23.0