diff --git a/.changeset/cyan-geese-film.md b/.changeset/cyan-geese-film.md new file mode 100644 index 0000000000..19b82cb165 --- /dev/null +++ b/.changeset/cyan-geese-film.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: remove `let:variable` slot bindings from select binding dependencies diff --git a/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/Attribute.js b/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/Attribute.js index 0459b55b03..8d0199f0cf 100644 --- a/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/Attribute.js +++ b/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/Attribute.js @@ -91,7 +91,9 @@ export default class AttributeWrapper extends BaseAttributeWrapper { if (select && select.select_binding_dependencies) { select.select_binding_dependencies.forEach((prop) => { this.node.dependencies.forEach((dependency) => { - this.parent.renderer.component.indirect_dependencies.get(prop).add(dependency); + if (this.node.scope.is_top_level(dependency)) { + this.parent.renderer.component.indirect_dependencies.get(prop).add(dependency); + } }); }); } diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let-2/Parent.svelte b/packages/svelte/test/runtime/samples/binding-select-from-let-2/Parent.svelte new file mode 100644 index 0000000000..565c3bc6b7 --- /dev/null +++ b/packages/svelte/test/runtime/samples/binding-select-from-let-2/Parent.svelte @@ -0,0 +1,6 @@ + + + + diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let-2/_config.js b/packages/svelte/test/runtime/samples/binding-select-from-let-2/_config.js new file mode 100644 index 0000000000..125455819a --- /dev/null +++ b/packages/svelte/test/runtime/samples/binding-select-from-let-2/_config.js @@ -0,0 +1,25 @@ +export default { + html: ` + +

1

+ `, + + async test({ assert, component, target, window }) { + const select = target.querySelector('select'); + const options = target.querySelectorAll('option'); + + assert.equal(component.tasks_touched, 1); + + const change = new window.Event('change'); + options[1].selected = true; + await select.dispatchEvent(change); + + assert.equal(component.selected, options[1].value); + assert.equal(component.tasks_touched, 1); + } +}; diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let-2/main.svelte b/packages/svelte/test/runtime/samples/binding-select-from-let-2/main.svelte new file mode 100644 index 0000000000..3c21eba829 --- /dev/null +++ b/packages/svelte/test/runtime/samples/binding-select-from-let-2/main.svelte @@ -0,0 +1,19 @@ + + + + + +

{tasks_touched}

diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let/Parent.svelte b/packages/svelte/test/runtime/samples/binding-select-from-let/Parent.svelte new file mode 100644 index 0000000000..565c3bc6b7 --- /dev/null +++ b/packages/svelte/test/runtime/samples/binding-select-from-let/Parent.svelte @@ -0,0 +1,6 @@ + + + + diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let/_config.js b/packages/svelte/test/runtime/samples/binding-select-from-let/_config.js new file mode 100644 index 0000000000..30f42a2251 --- /dev/null +++ b/packages/svelte/test/runtime/samples/binding-select-from-let/_config.js @@ -0,0 +1,21 @@ +export default { + html: ` + + `, + + async test({ assert, component, target, window }) { + const select = target.querySelector('select'); + const options = target.querySelectorAll('option'); + + const change = new window.Event('change'); + options[1].selected = true; + await select.dispatchEvent(change); + + assert.equal(component.selected, options[1].value); + } +}; diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let/main.svelte b/packages/svelte/test/runtime/samples/binding-select-from-let/main.svelte new file mode 100644 index 0000000000..494653bb4c --- /dev/null +++ b/packages/svelte/test/runtime/samples/binding-select-from-let/main.svelte @@ -0,0 +1,12 @@ + + + + +