From 02e55e8f7afb96e7027459b95b42aef1fc2cb906 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Wed, 12 Apr 2017 19:55:04 -0400
Subject: [PATCH] update select value bindings at the end of the cycle (fixes
 #476)

---
 .../dom/visitors/Element/Element.js           | 20 ++++++-----
 .../samples/binding-select-late/_config.js    | 34 +++++++++++++++++++
 .../samples/binding-select-late/main.html     |  7 ++++
 3 files changed, 53 insertions(+), 8 deletions(-)
 create mode 100644 test/runtime/samples/binding-select-late/_config.js
 create mode 100644 test/runtime/samples/binding-select-late/main.html

diff --git a/src/generators/dom/visitors/Element/Element.js b/src/generators/dom/visitors/Element/Element.js
index 9b451f1348..20d4404638 100644
--- a/src/generators/dom/visitors/Element/Element.js
+++ b/src/generators/dom/visitors/Element/Element.js
@@ -63,7 +63,7 @@ export default function visitElement ( generator, block, state, node ) {
 		.forEach( attribute => {
 			// <select> value attributes are an annoying special case — it must be handled
 			// *after* its children have been updated
-			if ( attribute.type === 'Attribute' && attribute.name === 'value' && node.name === 'select' ) {
+			if ( ( attribute.type === 'Attribute' || attribute.type === 'Binding' ) && attribute.name === 'value' && node.name === 'select' ) {
 				selectValueAttribute = attribute;
 				return;
 			}
@@ -74,12 +74,7 @@ export default function visitElement ( generator, block, state, node ) {
 	// special case – bound <option> without a value attribute
 	if ( node.name === 'option' && !node.attributes.find( attribute => attribute.type === 'Attribute' && attribute.name === 'value' ) ) { 	// TODO check it's bound
 		const statement = `${name}.__value = ${name}.textContent;`;
-		block.builders.update.addLine( statement );
-		node.initialUpdate = statement;
-	}
-
-	if ( node.initialUpdate ) {
-		block.builders.create.addBlock( node.initialUpdate );
+		node.initialUpdate = node.lateUpdate = statement;
 	}
 
 	if ( childState.allUsedContexts.length || childState.usesComponent ) {
@@ -117,8 +112,17 @@ export default function visitElement ( generator, block, state, node ) {
 		visit( generator, block, childState, child );
 	});
 
+	if ( node.initialUpdate ) {
+		block.builders.create.addBlock( node.initialUpdate );
+	}
+
+	if ( node.lateUpdate ) {
+		block.builders.update.addLine( node.lateUpdate );
+	}
+
 	if ( selectValueAttribute ) {
-		visitAttribute( generator, block, childState, node, selectValueAttribute );
+		const visitor = selectValueAttribute.type === 'Attribute' ? visitAttribute : visitBinding;
+		visitor( generator, block, childState, node, selectValueAttribute );
 	}
 }
 
diff --git a/test/runtime/samples/binding-select-late/_config.js b/test/runtime/samples/binding-select-late/_config.js
new file mode 100644
index 0000000000..2fffa0e4ed
--- /dev/null
+++ b/test/runtime/samples/binding-select-late/_config.js
@@ -0,0 +1,34 @@
+export default {
+	data: {
+		items: [],
+		selected: null
+	},
+
+	html: `
+		<select></select>
+		<p>selected: nothing</p>
+	`,
+
+	test ( assert, component, target ) {
+		component.set({
+			items: [ 'one', 'two', 'three' ],
+			selected: 'two'
+		});
+
+		const options = target.querySelectorAll( 'option' );
+		assert.ok( !options[0].selected );
+		assert.ok( options[1].selected );
+		assert.ok( !options[2].selected );
+
+		assert.htmlEqual( target.innerHTML, `
+			<select>
+				<option>one</option>
+				<option>two</option>
+				<option>three</option>
+			</select>
+			<p>selected: two</p>
+		` );
+
+		component.destroy();
+	}
+};
diff --git a/test/runtime/samples/binding-select-late/main.html b/test/runtime/samples/binding-select-late/main.html
new file mode 100644
index 0000000000..0bbebef662
--- /dev/null
+++ b/test/runtime/samples/binding-select-late/main.html
@@ -0,0 +1,7 @@
+<select bind:value='selected'>
+	{{#each items as item}}
+		<option>{{item}}</option>
+	{{/each}}
+</select>
+
+<p>selected: {{selected || 'nothing'}}</p>