Repository: sveltejs/svelte (JavaScript)
Date: 2017-07-25 03:02:40+00:00
Task type: Bug Fix

Issue:
No select example?
I have a select box in my component which binds a value using two-way bindings.

```javascript
<select bind:value='duration'>
        {{ #each durations as dur }}
          <option value="{{ dur }}">{{ dur }} months</option>
        {{ /each }}
      </select>
```

The component is nested inside a modal component which can show and hide.

It seems that when I hide and re-show the modal, whilst the 'duration' value has been persisted, the select has reset to the initial list item.

It seems like the two-way binding doesn't bind the selected value correctly.

It also appears that there is no `<select>` example available in the REPL.

Is there another binding I require, or is this an issue?
No select example?
I have a select box in my component which binds a value using two-way bindings.

```javascript
<select bind:value='duration'>
        {{ #each durations as dur }}
          <option value="{{ dur }}">{{ dur }} months</option>
        {{ /each }}
      </select>
```

The component is nested inside a modal component which can show and hide.

It seems that when I hide and re-show the modal, whilst the 'duration' value has been persisted, the select has reset to the initial list item.

It seems like the two-way binding doesn't bind the selected value correctly.

It also appears that there is no `<select>` example available in the REPL.

Is there another binding I require, or is this an issue?


Issue discussion:
Yeah, you're right — no example in the REPL, which is ironic since you select examples with a two-way bound select element!

Sounds like you've found a bug — are you able to reproduce it in the REPL? Thanks
Managed to reproduce the issue:

https://svelte.technology/repl?version=1.25.0&gist=d67ed619d2c308b9a20518fa694d64ac

note that after toggling, the duration is still correctly rendered, but the select is defaulted.
I have the same code in my project but without IF statement in the nested component and all work fine. I think IF break all again. 
Yeah, the `if` removes and reinserts things from the DOM.

The dropdown defaults to its original settings because the `selected` attribute on the currently selected option is not persisted (or set) by the `value` binding of its parent `select`, thus on re-render, the selected option defaults to its original setting.
If anybody else runs into this, I've managed a pretty ugly workaround using event firing. I struggled for a while as it's a dealbreaker for our use case (I'm dealing with loan calculations, so I definitely can't have incorrect calculations showing.), but I eventually resorted to this, which does work until this issue is resolved:

This resets my value to its original state, which in turn updates the calculated data to the correct values.
```javascript
    oncreate () {
      this.refs.modal.on('show', e => {
        // https://github.com/sveltejs/svelte/issues/711
        this.refs.otherComponent.set({ myValue: 12 })
      })
    }
```

in my modal component, the show method now looks like this, so that an event is fired before the user sees the calculation:
```javascript
methods: {
      show: function () {
        this.fire('show')
        this.set({ shown: true })
      }
}
```
Yeah, you're right — no example in the REPL, which is ironic since you select examples with a two-way bound select element!

Sounds like you've found a bug — are you able to reproduce it in the REPL? Thanks
Managed to reproduce the issue:

https://svelte.technology/repl?version=1.25.0&gist=d67ed619d2c308b9a20518fa694d64ac

note that after toggling, the duration is still correctly rendered, but the select is defaulted.
I have the same code in my project but without IF statement in the nested component and all work fine. I think IF break all again. 
Yeah, the `if` removes and reinserts things from the DOM.

The dropdown defaults to its original settings because the `selected` attribute on the currently selected option is not persisted (or set) by the `value` binding of its parent `select`, thus on re-render, the selected option defaults to its original setting.
If anybody else runs into this, I've managed a pretty ugly workaround using event firing. I struggled for a while as it's a dealbreaker for our use case (I'm dealing with loan calculations, so I definitely can't have incorrect calculations showing.), but I eventually resorted to this, which does work until this issue is resolved:

This resets my value to its original state, which in turn updates the calculated data to the correct values.
```javascript
    oncreate () {
      this.refs.modal.on('show', e => {
        // https://github.com/sveltejs/svelte/issues/711
        this.refs.otherComponent.set({ myValue: 12 })
      })
    }
```

in my modal component, the show method now looks like this, so that an event is fired before the user sees the calculation:
```javascript
methods: {
      show: function () {
        this.fire('show')
        this.set({ shown: true })
      }
}
```

Solution patch:
diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
--- a/src/generators/dom/visitors/Element/Binding.ts
+++ b/src/generators/dom/visitors/Element/Binding.ts
@@ -7,6 +7,7 @@ import Block from '../../Block';
 import { Node } from '../../../../interfaces';
 import { State } from '../../interfaces';
 import getObject from '../../../../utils/getObject';
+import getTailSnippet from '../../../../utils/getTailSnippet';
 
 export default function visitBinding(
 	generator: DomGenerator,
@@ -83,8 +84,11 @@ export default function visitBinding(
 					break;
 				}`;
 
+		const { name } = getObject(attribute.value);
+		const tailSnippet = getTailSnippet(attribute.value);
+
 		updateElement = deindent`
-			var ${value} = ${snippet};
+			var ${value} = #component.get( '${name}' )${tailSnippet};
 			for ( var #i = 0; #i < ${state.parentNode}.options.length; #i += 1 ) {
 				var ${option} = ${state.parentNode}.options[#i];
 


Test patch:
diff --git a/test/runtime/samples/binding-select-in-yield/Modal.html b/test/runtime/samples/binding-select-in-yield/Modal.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/binding-select-in-yield/Modal.html
@@ -0,0 +1,20 @@
+{{#if !hidden}}
+	{{ yield }}
+{{/if}}
+
+<script>
+	export default {
+		data () {
+			return {
+				hidden: true
+			};
+		},
+		methods: {
+			toggle () {
+				this.set({
+					hidden: !this.get('hidden')
+				});
+			}
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/binding-select-in-yield/_config.js b/test/runtime/samples/binding-select-in-yield/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/binding-select-in-yield/_config.js
@@ -0,0 +1,63 @@
+export default {
+	html: ``,
+
+	data: {
+		letter: 'b'
+	},
+
+	test ( assert, component, target, window ) {
+		component.refs.modal.toggle();
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>b</span>
+
+			<select>
+				<option value='a'>a</option>
+				<option value='b'>b</option>
+				<option value='c'>c</option>
+			</select>
+		`);
+
+		const select = target.querySelector('select');
+		const change = new window.MouseEvent('change');
+
+		select.options[2].selected = true;
+		select.dispatchEvent(change);
+		assert.equal(component.get('letter'), 'c');
+
+		assert.deepEqual(Array.from(select.options).map(o => o.selected), [
+			false,
+			false,
+			true
+		]);
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>c</span>
+
+			<select>
+				<option value='a'>a</option>
+				<option value='b'>b</option>
+				<option value='c'>c</option>
+			</select>
+		`);
+
+		component.refs.modal.toggle();
+		component.refs.modal.toggle();
+
+		assert.deepEqual(Array.from(select.options).map(o => o.selected), [
+			false,
+			false,
+			true
+		]);
+
+		assert.htmlEqual(target.innerHTML, `
+			<span>c</span>
+
+			<select>
+				<option value='a'>a</option>
+				<option value='b'>b</option>
+				<option value='c'>c</option>
+			</select>
+		`);
+	}
+};
diff --git a/test/runtime/samples/binding-select-in-yield/main.html b/test/runtime/samples/binding-select-in-yield/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/binding-select-in-yield/main.html
@@ -0,0 +1,23 @@
+<Modal ref:modal>
+	<span>{{letter}}</span>
+	<select bind:value='letter'>
+		{{#each letters as letter}}
+			<option value="{{letter}}">{{letter}}</option>
+		{{/each}}
+	</select>
+</Modal>
+
+<script>
+	import Modal from './Modal.html';
+
+	export default {
+		data () {
+			return {
+				letters: ['a', 'b', 'c']
+			};
+		},
+		components: {
+			Modal
+		}
+	};
+</script>
\ No newline at end of file