diff --git a/CHANGELOG.md b/CHANGELOG.md index 6757221f48..85654104e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## Unreleased * Fix handling of `this` in inline function expressions in the template ([#5033](https://github.com/sveltejs/svelte/issues/5033)) +* Update ``? - if (parent.node.name === 'select') { - (parent as ElementWrapper).select_binding_dependencies = dependencies; - dependencies.forEach((prop: string) => { - parent.renderer.component.indirect_dependencies.set(prop, new Set()); - }); - } + + handle_select_value_binding(this, dependencies); if (node.is_contextual) { mark_each_block_bindings(this.parent, this.node); diff --git a/src/compiler/compile/render_dom/wrappers/Element/handle_select_value_binding.ts b/src/compiler/compile/render_dom/wrappers/Element/handle_select_value_binding.ts new file mode 100644 index 0000000000..93a83298f8 --- /dev/null +++ b/src/compiler/compile/render_dom/wrappers/Element/handle_select_value_binding.ts @@ -0,0 +1,16 @@ +import AttributeWrapper from "./Attribute"; +import BindingWrapper from "./Binding"; +import ElementWrapper from "./index"; + +export default function handle_select_value_binding( + attr: AttributeWrapper | BindingWrapper, + dependencies: Set +) { + const { parent } = attr; + if (parent.node.name === "select") { + (parent as ElementWrapper).select_binding_dependencies = dependencies; + dependencies.forEach((prop: string) => { + parent.renderer.component.indirect_dependencies.set(prop, new Set()); + }); + } +} diff --git a/test/js/samples/select-dynamic-value/expected.js b/test/js/samples/select-dynamic-value/expected.js index f1a913c65f..aa4e5004fd 100644 --- a/test/js/samples/select-dynamic-value/expected.js +++ b/test/js/samples/select-dynamic-value/expected.js @@ -15,7 +15,6 @@ function create_fragment(ctx) { let select; let option0; let option1; - let select_value_value; return { c() { @@ -33,12 +32,11 @@ function create_fragment(ctx) { insert(target, select, anchor); append(select, option0); append(select, option1); - select_value_value = /*current*/ ctx[0]; - select_option(select, select_value_value); + select_option(select, /*current*/ ctx[0]); }, p(ctx, [dirty]) { - if (dirty & /*current*/ 1 && select_value_value !== (select_value_value = /*current*/ ctx[0])) { - select_option(select, select_value_value); + if (dirty & /*current*/ 1) { + select_option(select, /*current*/ ctx[0]); } }, i: noop, diff --git a/test/runtime/samples/binding-select-late-3/_config.js b/test/runtime/samples/binding-select-late-3/_config.js new file mode 100644 index 0000000000..42c45d1366 --- /dev/null +++ b/test/runtime/samples/binding-select-late-3/_config.js @@ -0,0 +1,34 @@ +export default { + props: { + items: [], + selected: 'two' + }, + + html: ` + +

selected: two

+ `, + + ssrHtml: ` + +

selected: two

+ `, + + test({ assert, component, target }) { + component.items = [ 'one', 'two', 'three' ]; + + const options = target.querySelectorAll('option'); + assert.ok(!options[0].selected); + assert.ok(options[1].selected); + assert.ok(!options[2].selected); + + assert.htmlEqual(target.innerHTML, ` + +

selected: two

+ `); + } +}; diff --git a/test/runtime/samples/binding-select-late-3/main.svelte b/test/runtime/samples/binding-select-late-3/main.svelte new file mode 100644 index 0000000000..ec9ac8d345 --- /dev/null +++ b/test/runtime/samples/binding-select-late-3/main.svelte @@ -0,0 +1,12 @@ + + + + +

selected: {selected || 'nothing'}

\ No newline at end of file