Merge pull request #427 from sveltejs/gh-423

Make <select> elements use .value prop to update value

Author: Rich-Harris

src/generators/dom/visitors/attributes/lookup.js

@@ -109,7 +109,7 @@ const lookup = {
 	title: {},
 	type: { appliesTo: [ 'button', 'input', 'command', 'embed', 'object', 'script', 'source', 'style', 'menu' ] },
 	usemap: { propertyName: 'useMap', appliesTo: [ 'img', 'input', 'object' ] },
-	value: { appliesTo: [ 'button', 'option', 'input', 'li', 'meter', 'progress', 'param' ] },
+	value: { appliesTo: [ 'button', 'option', 'input', 'li', 'meter', 'progress', 'param', 'select' ] },
 	width: { appliesTo: [ 'canvas', 'embed', 'iframe', 'img', 'input', 'object', 'video' ] },
 	wrap: { appliesTo: [ 'textarea' ] }
 };

test/generator/samples/select-one-way-bind/_config.js

@@ -0,0 +1,19 @@
+export default {
+	'skip-ssr': true,
+
+	data: {
+		foo: 'a'
+	},
+
+	test ( assert, component, target ) {
+		const options = target.querySelectorAll( 'option' );
+
+		assert.equal( options[0].selected, true );
+		assert.equal( options[1].selected, false );
+
+		component.set( { foo: 'b' } );
+
+		assert.equal( options[0].selected, false );
+		assert.equal( options[1].selected, true );
+	}
+};

test/generator/samples/select-one-way-bind/main.html

@@ -0,0 +1,4 @@
+<select value="{{foo}}">
+	<option>a</option>
+	<option>b</option>
+</select>