diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts index 1ea65830ef..df46d759a5 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts @@ -208,6 +208,10 @@ function get_dom_updater( return `${element.var}.checked = ${condition};`; } + if (binding.node.name === 'value') { + return `@set_input_value(${element.var}, ${binding.snippet});` + } + return `${element.var}.${binding.node.name} = ${binding.snippet};`; } diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index a918c3193d..8b28a1f77a 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -169,6 +169,12 @@ export function set_data(text, data) { if (text.data !== data) text.data = data; } +export function set_input_value(input, value) { + if (value != null || input.value) { + input.value = value; + } +} + export function set_input_type(input, type) { try { input.type = type; diff --git a/test/js/samples/input-no-initial-value/expected.js b/test/js/samples/input-no-initial-value/expected.js new file mode 100644 index 0000000000..a651d72059 --- /dev/null +++ b/test/js/samples/input-no-initial-value/expected.js @@ -0,0 +1,87 @@ +/* generated by Svelte vX.Y.Z */ +import { + SvelteComponent, + append, + attr, + detach, + element, + init, + insert, + listen, + noop, + run_all, + safe_not_equal, + set_input_value, + space +} from "svelte/internal"; + +function create_fragment(ctx) { + var form, input, t, button, dispose; + + return { + c() { + form = element("form"); + input = element("input"); + t = space(); + button = element("button"); + button.textContent = "Store"; + attr(input, "type", "text"); + input.required = true; + + dispose = [ + listen(input, "input", ctx.input_input_handler), + listen(form, "submit", ctx.handleSubmit) + ]; + }, + + m(target, anchor) { + insert(target, form, anchor); + append(form, input); + + set_input_value(input, ctx.test); + + append(form, t); + append(form, button); + }, + + p(changed, ctx) { + if (changed.test && (input.value !== ctx.test)) set_input_value(input, ctx.test); + }, + + i: noop, + o: noop, + + d(detaching) { + if (detaching) { + detach(form); + } + + run_all(dispose); + } + }; +} + +function instance($$self, $$props, $$invalidate) { + let test = undefined; + + function handleSubmit(event) { + event.preventDefault(); + console.log('value', test); + } + + function input_input_handler() { + test = this.value; + $$invalidate('test', test); + } + + return { test, handleSubmit, input_input_handler }; +} + +class Component extends SvelteComponent { + constructor(options) { + super(); + init(this, options, instance, create_fragment, safe_not_equal, []); + } +} + +export default Component; \ No newline at end of file diff --git a/test/js/samples/input-no-initial-value/input.svelte b/test/js/samples/input-no-initial-value/input.svelte new file mode 100644 index 0000000000..d60c0b196e --- /dev/null +++ b/test/js/samples/input-no-initial-value/input.svelte @@ -0,0 +1,13 @@ + + +
+ + +
\ No newline at end of file diff --git a/test/js/samples/input-range/expected.js b/test/js/samples/input-range/expected.js index 8331e73bad..04552d20cd 100644 --- a/test/js/samples/input-range/expected.js +++ b/test/js/samples/input-range/expected.js @@ -10,6 +10,7 @@ import { noop, run_all, safe_not_equal, + set_input_value, to_number } from "svelte/internal"; @@ -30,11 +31,11 @@ function create_fragment(ctx) { m(target, anchor) { insert(target, input, anchor); - input.value = ctx.value; + set_input_value(input, ctx.value); }, p(changed, ctx) { - if (changed.value) input.value = ctx.value; + if (changed.value) set_input_value(input, ctx.value); }, i: noop,