diff --git a/src/generators/dom/preprocess.ts b/src/generators/dom/preprocess.ts index 94b8ea444d..33a305146f 100644 --- a/src/generators/dom/preprocess.ts +++ b/src/generators/dom/preprocess.ts @@ -358,6 +358,19 @@ const preprocessors = { } }); + const valueAttribute = node.attributes.find((attribute: Node) => attribute.name === 'value'); + + // Treat these the same way: + // + // + if (node.name === 'option' && !valueAttribute) { + node.attributes.push({ + type: 'Attribute', + name: 'value', + value: node.children + }); + } + // special case — in a case like this... // // `? - const dependencies = block.findDependencies(value.value); + const dependencies = block.findDependencies(valueAttribute.value); state.selectBindingDependencies = dependencies; dependencies.forEach((prop: string) => { generator.indirectDependencies.set(prop, new Set()); diff --git a/src/generators/dom/visitors/Element/Element.ts b/src/generators/dom/visitors/Element/Element.ts index 6c7a307fab..f678dec9e8 100644 --- a/src/generators/dom/visitors/Element/Element.ts +++ b/src/generators/dom/visitors/Element/Element.ts @@ -190,19 +190,6 @@ export default function visitElement( visitAttributesAndAddProps(); } - // special case – bound + // + const valueAttribute = node.attributes.find((attribute: Node) => attribute.name === 'value'); + + if (node.name === 'option' && !valueAttribute) { + node.attributes.push({ + type: 'Attribute', + name: 'value', + value: node.children + }); + } } if (node.children.length) { diff --git a/test/runtime/samples/binding-select-implicit-option-value/_config.js b/test/runtime/samples/binding-select-implicit-option-value/_config.js new file mode 100644 index 0000000000..40a7364797 --- /dev/null +++ b/test/runtime/samples/binding-select-implicit-option-value/_config.js @@ -0,0 +1,40 @@ +export default { + data: { + values: [1, 2, 3], + foo: 2 + }, + + html: ` + + +

foo: 2

+ `, + + test(assert, component, target, window) { + const select = target.querySelector('select'); + const options = [...target.querySelectorAll('option')]; + + assert.ok(options[1].selected); + assert.equal(component.get('foo'), 2); + + const change = new window.Event('change'); + + options[2].selected = true; + select.dispatchEvent(change); + + assert.equal(component.get('foo'), 3); + assert.htmlEqual( target.innerHTML, ` + + +

foo: 3

+ ` ); + } +}; diff --git a/test/runtime/samples/binding-select-implicit-option-value/main.html b/test/runtime/samples/binding-select-implicit-option-value/main.html new file mode 100644 index 0000000000..ec5cc84a8d --- /dev/null +++ b/test/runtime/samples/binding-select-implicit-option-value/main.html @@ -0,0 +1,7 @@ + + +

foo: {{foo}}

\ No newline at end of file diff --git a/test/runtime/samples/binding-select-initial-value-undefined/_config.js b/test/runtime/samples/binding-select-initial-value-undefined/_config.js index d5944ae815..f625000edb 100644 --- a/test/runtime/samples/binding-select-initial-value-undefined/_config.js +++ b/test/runtime/samples/binding-select-initial-value-undefined/_config.js @@ -5,9 +5,9 @@ export default {

selected: a

selected: a

diff --git a/test/runtime/samples/binding-select-initial-value/_config.js b/test/runtime/samples/binding-select-initial-value/_config.js index 99a7129262..7338af165f 100644 --- a/test/runtime/samples/binding-select-initial-value/_config.js +++ b/test/runtime/samples/binding-select-initial-value/_config.js @@ -3,9 +3,9 @@ export default {

selected: b

selected: b

diff --git a/test/runtime/samples/binding-select-late/_config.js b/test/runtime/samples/binding-select-late/_config.js index 2fffa0e4ed..04b94613fc 100644 --- a/test/runtime/samples/binding-select-late/_config.js +++ b/test/runtime/samples/binding-select-late/_config.js @@ -22,9 +22,9 @@ export default { assert.htmlEqual( target.innerHTML, `

selected: two

` ); diff --git a/test/runtime/samples/binding-select/_config.js b/test/runtime/samples/binding-select/_config.js index 7fce00f327..8c8eced7bc 100644 --- a/test/runtime/samples/binding-select/_config.js +++ b/test/runtime/samples/binding-select/_config.js @@ -3,9 +3,9 @@ export default {

selected: one

selected: one

@@ -32,9 +32,9 @@ export default {

selected: two

selected: two