fix special props on `<select>` elements (#590)

When visiting `<select>` elements, don't try to add props until after
the (delayed) visiting of the attributes, as that's when we determine
what the props should be.

src/generators/dom/visitors/Element/Element.js

@@ -46,7 +46,7 @@ export default function visitElement ( generator, block, state, node ) {
 		block.builders.create.addLine( `${generator.helper( 'setAttribute' )}( ${name}, '${generator.cssId}', '' );` );
 	}
 
-	function visitAttributes () {
+	function visitAttributesAndAddProps () {
 		let intro;
 		let outro;
 
@@ -63,6 +63,37 @@ export default function visitElement ( generator, block, state, node ) {
 			});
 
 		if ( intro || outro ) addTransitions( generator, block, childState, node, intro, outro );
+
+		if ( childState.allUsedContexts.length || childState.usesComponent ) {
+			const initialProps = [];
+			const updates = [];
+
+			if ( childState.usesComponent ) {
+				initialProps.push( `component: ${block.component}` );
+			}
+
+			childState.allUsedContexts.forEach( contextName => {
+				if ( contextName === 'state' ) return;
+
+				const listName = block.listNames.get( contextName );
+				const indexName = block.indexNames.get( contextName );
+
+				initialProps.push( `${listName}: ${listName},\n${indexName}: ${indexName}` );
+				updates.push( `${name}._svelte.${listName} = ${listName};\n${name}._svelte.${indexName} = ${indexName};` );
+			});
+
+			if ( initialProps.length ) {
+				block.builders.create.addBlock( deindent`
+					${name}._svelte = {
+						${initialProps.join( ',\n' )}
+					};
+				` );
+			}
+
+			if ( updates.length ) {
+				block.builders.update.addBlock( updates.join( '\n' ) );
+			}
+		}
 	}
 
 	if ( !state.parentNode ) {
@@ -74,7 +105,7 @@ export default function visitElement ( generator, block, state, node ) {
 	if ( node.name !== 'select' ) {
 		// <select> value attributes are an annoying special case — it must be handled
 		// *after* its children have been updated
-		visitAttributes();
+		visitAttributesAndAddProps();
 	}
 
 	// special case – bound <option> without a value attribute
@@ -83,37 +114,6 @@ export default function visitElement ( generator, block, state, node ) {
 		node.initialUpdate = node.lateUpdate = statement;
 	}
 
-	if ( childState.allUsedContexts.length || childState.usesComponent ) {
-		const initialProps = [];
-		const updates = [];
-
-		if ( childState.usesComponent ) {
-			initialProps.push( `component: ${block.component}` );
-		}
-
-		childState.allUsedContexts.forEach( contextName => {
-			if ( contextName === 'state' ) return;
-
-			const listName = block.listNames.get( contextName );
-			const indexName = block.indexNames.get( contextName );
-
-			initialProps.push( `${listName}: ${listName},\n${indexName}: ${indexName}` );
-			updates.push( `${name}._svelte.${listName} = ${listName};\n${name}._svelte.${indexName} = ${indexName};` );
-		});
-
-		if ( initialProps.length ) {
-			block.builders.create.addBlock( deindent`
-				${name}._svelte = {
-					${initialProps.join( ',\n' )}
-				};
-			` );
-		}
-
-		if ( updates.length ) {
-			block.builders.update.addBlock( updates.join( '\n' ) );
-		}
-	}
-
 	node.children.forEach( child => {
 		visit( generator, block, childState, child );
 	});
@@ -123,7 +123,7 @@ export default function visitElement ( generator, block, state, node ) {
 	}
 
 	if ( node.name === 'select' ) {
-		visitAttributes();
+		visitAttributesAndAddProps();
 	}
 
 	if ( node.initialUpdate ) {