<select value> does not select correct option on first render when using one-way binding

[romuloab]

When specifying a value for a <select>, the element does not select correct option upon rendering for the first time. It always select the first available <option>, regardless of that option's value. After the first render, if I change the state, then the correct option gets selected.

Steps to reproduce:

1. Create a component:

<select :value>
  <option>foo</option>
  <option>bar</option>
</select>

2. Render it:

const sel = new Select({target: ..., data: {value: 'bar'}});

Expected behavior:

• The component shows the option "bar" selected.

Observed behavior:

• The component shows the option "foo" selected, even though state.value is "bar".

If I change <select :value> to <select bind:value>, the correct option gets selected.

REPL:

• One-way binding (problem): https://svelte.technology/repl?version=1.57.4&gist=027e942d3023d401bd2d72797f4a9732
• Two-way binding (correct): https://svelte.technology/repl?version=1.57.4&gist=03aa2b55783d57e4677e99631b42f768

User Agents:

• Chrome 64
• Firefox 60
• Safari 11.0.3 (13604.5.6)

[arxpoetica]

That's because bind:value and :value actually do different things. I was confused about this at first too. See: https://svelte.technology/guide#two-way-binding

[romuloab]

I'm aware they do different things, I just mentioned that bind:value does the thing I was expecting -- to show the option that matches the value attribute, but I don't want to use two-way binding.

In pure HTML I'd have <select><option>foo</option><option selected>bar</option></select>. Perhaps for the one-way-binding version I have to write like this:

<select>
  {{#each items as item}}
    <option selected="{{item===value}}">{{item}}</option>
  {{/each}}
</select>

Is this the official way to approach this problem without resorting to two-way binding? Or should <select :value> behave the same as <select bind:value> for the initial render (meaning: when I load the page, I see the correct value being displayed without interacting with the select element).

[okane103]

<select :value>
  <option>foo</option>
  <option selected>bar</option>
</select>

This is working for me, with the 'selected' attr on the final option. I tried to link the REPL I was using but it won't save. When I change the bottom right JSON back and forth:

{
"value": "foo"    
}

and

{
"value": "bar"    
}

The drop-down is changing for me.

[sp90]

@okane103 Even tough you get the right solution shouldn't it be solving it via :value

[Rich-Harris]

This works in v3, so I'll close this: https://svelte.dev/repl?version=3.0.0-beta.28&gist=985e5864be8a9887350b2ab4ca2a220f

[xmlking]

This works in v3, so I'll close this: https://svelte.dev/repl?version=3.0.0-beta.28&gist=985e5864be8a9887350b2ab4ca2a220f

will this work with Server Side Rendering (SSR) ?