Merge pull request #641 from sveltejs/gh-639-a

Sync state with view if <select> binding does not have initial value

src/generators/dom/visitors/Element/Binding.ts

@@ -89,6 +89,11 @@ export default function visitBinding(
 				${ifStatement}
 			}
 		`;
+
+		generator.hasComplexBindings = true;
+		block.builders.create.addBlock(
+			`if ( !('${name}' in state) ) ${block.component}._bindings.push( ${handler} );`
+		);
 	} else if (attribute.name === 'group') {
 		// <input type='checkbox|radio' bind:group='selected'> special case
 		if (type === 'radio') {

test/runtime/samples/binding-select-initial-value-undefined/_config.js

@@ -0,0 +1,25 @@
+export default {
+	'skip-ssr': true, // TODO would be nice to fix this in SSR as well
+
+	html: `
+		<p>selected: a</p>
+
+		<select>
+			<option>a</option>
+			<option>b</option>
+			<option>c</option>
+		</select>
+
+		<p>selected: a</p>
+	`,
+
+	test ( assert, component, target ) {
+		const select = target.querySelector( 'select' );
+		const options = [ ...target.querySelectorAll( 'option' ) ];
+
+		assert.equal( select.value, 'a' );
+		assert.ok( options[0].selected );
+
+		component.destroy();
+	}
+};

test/runtime/samples/binding-select-initial-value-undefined/main.html

@@ -0,0 +1,9 @@
+<p>selected: {{selected}}</p>
+
+<select bind:value='selected'>
+	<option>a</option>
+	<option>b</option>
+	<option>c</option>
+</select>
+
+<p>selected: {{selected}}</p>