Merge pull request #925 from sveltejs/gh-915

don't use innerHTML for options inside optgroups

Author: Rich-Harris

src/generators/dom/preprocess.ts

@@ -309,7 +309,7 @@ const preprocessors = {
 		stripWhitespace: boolean,
 		nextSibling: Node
 	) => {
-		if (node.name === 'slot') {
+		if (node.name === 'slot' || node.name === 'option') {
 			cannotUseInnerHTML(node);
 		}
 
@@ -369,8 +369,6 @@ const preprocessors = {
 		// so that if `foo.qux` changes, we know that we need to
 		// mark `bar` and `baz` as dirty too
 		if (node.name === 'select') {
-			cannotUseInnerHTML(node);
-
 			const value = node.attributes.find(
 				(attribute: Node) => attribute.name === 'value'
 			);

test/runtime/samples/binding-select-optgroup/_config.js

@@ -0,0 +1,39 @@
+export default {
+	skip: true, // JSDOM
+
+	html: `
+		<h1>Hello Harry!</h1>
+
+		<select>
+			<option value="Harry">Harry</option>
+			<optgroup label="Group">
+				<option value="World">World</option>
+			</optgroup>
+		</select>
+	`,
+
+	test(assert, component, target, window) {
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
+
+		assert.deepEqual(options, select.options);
+		assert.equal(component.get('name'), 'Harry');
+
+		const change = new window.Event('change');
+
+		options[1].selected = true;
+		select.dispatchEvent(change);
+
+		assert.equal(component.get('name'), 'World');
+		assert.htmlEqual(target.innerHTML, `
+			<h1>Hello World!</h1>
+
+			<select>
+				<option value="Harry">Harry</option>
+				<optgroup label="Group">
+					<option value="World">World</option>
+				</optgroup>
+			</select>
+		`);
+	},
+};

test/runtime/samples/binding-select-optgroup/main.html

@@ -0,0 +1,8 @@
+<h1>Hello {{name}}!</h1>
+
+<select bind:value="name">
+	<option value="Harry">Harry</option>
+	<optgroup label="Group">
+		<option value="World">World</option>
+	</optgroup>
+</select>