From d28942d91a5e3d93fddfcd90edec1e2bfb5adb0b Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 13 Nov 2017 21:53:15 -0500
Subject: [PATCH] dont use innerHTML for options inside optgroups - fixes #915

---
 src/generators/dom/preprocess.ts              |  4 +-
 .../binding-select-optgroup/_config.js        | 39 +++++++++++++++++++
 .../samples/binding-select-optgroup/main.html |  8 ++++
 3 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 test/runtime/samples/binding-select-optgroup/_config.js
 create mode 100644 test/runtime/samples/binding-select-optgroup/main.html

diff --git a/src/generators/dom/preprocess.ts b/src/generators/dom/preprocess.ts
index a93b2b4048..94b8ea444d 100644
--- a/src/generators/dom/preprocess.ts
+++ b/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'
 			);
diff --git a/test/runtime/samples/binding-select-optgroup/_config.js b/test/runtime/samples/binding-select-optgroup/_config.js
new file mode 100644
index 0000000000..0d651b6654
--- /dev/null
+++ b/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>
+		`);
+	},
+};
diff --git a/test/runtime/samples/binding-select-optgroup/main.html b/test/runtime/samples/binding-select-optgroup/main.html
new file mode 100644
index 0000000000..2160d0e2a8
--- /dev/null
+++ b/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>
\ No newline at end of file