diff --git a/src/generators/dom/visitors/Element/Binding.js b/src/generators/dom/visitors/Element/Binding.js index e88fe8df4305..7e405f1965ab 100644 --- a/src/generators/dom/visitors/Element/Binding.js +++ b/src/generators/dom/visitors/Element/Binding.js @@ -4,7 +4,7 @@ import getSetter from '../shared/binding/getSetter.js'; import getStaticAttributeValue from './getStaticAttributeValue.js'; export default function visitBinding ( generator, block, state, node, attribute ) { - const { name, keypath } = flattenReference( attribute.value ); + const { name, keypath, parts } = flattenReference( attribute.value ); const { snippet, contexts, dependencies } = block.contextualise( attribute.value ); if ( dependencies.length > 1 ) throw new Error( 'An unexpected situation arose. Please raise an issue at https://github.com/sveltejs/svelte/issues — thanks!' ); @@ -17,7 +17,7 @@ export default function visitBinding ( generator, block, state, node, attribute const handler = block.getUniqueName( `${state.parentNode}_${eventName}_handler` ); const isMultipleSelect = node.name === 'select' && node.attributes.find( attr => attr.name.toLowerCase() === 'multiple' ); // TODO use getStaticAttributeValue const type = getStaticAttributeValue( node, 'type' ); - const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, keypath ) : null; + const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, parts.join( '.' ) ) : null; const value = getBindingValue( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type ); let setter = getSetter({ block, name, keypath, context: '_svelte', attribute, dependencies, value }); diff --git a/test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js b/test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js new file mode 100644 index 000000000000..bff66c903b2a --- /dev/null +++ b/test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js @@ -0,0 +1,78 @@ +const values = [ + { name: 'Alpha' }, + { name: 'Beta' }, + { name: 'Gamma' } +]; + +export default { + data: { + values, + selected: [ values[1] ] + }, + + 'skip-ssr': true, // values are rendered as [object Object] + + html: ` + + + + + + +

Beta

`, + + test ( assert, component, target, window ) { + const inputs = target.querySelectorAll( 'input' ); + assert.equal( inputs[0].checked, false ); + assert.equal( inputs[1].checked, true ); + assert.equal( inputs[2].checked, false ); + + const event = new window.Event( 'change' ); + + inputs[0].checked = true; + inputs[0].dispatchEvent( event ); + + assert.htmlEqual( target.innerHTML, ` + + + + + + +

Alpha, Beta

+ ` ); + + component.set({ selected: [ values[1], values[2] ] }); + assert.equal( inputs[0].checked, false ); + assert.equal( inputs[1].checked, true ); + assert.equal( inputs[2].checked, true ); + + assert.htmlEqual( target.innerHTML, ` + + + + + + +

Beta, Gamma

+ ` ); + } +}; diff --git a/test/runtime/samples/binding-input-checkbox-group-outside-each/main.html b/test/runtime/samples/binding-input-checkbox-group-outside-each/main.html new file mode 100644 index 000000000000..126f7b79c103 --- /dev/null +++ b/test/runtime/samples/binding-input-checkbox-group-outside-each/main.html @@ -0,0 +1,13 @@ + + + + + + +

{{selected.map( function ( value ) { return value.name; }).join( ', ' ) }}

\ No newline at end of file