Merge pull request #3430 from sveltejs/gh-1233

don't set undefined input value

Author: Rich-Harris

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};`;
 }
 

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;

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;

test/js/samples/input-no-initial-value/input.svelte

@@ -0,0 +1,13 @@
+<script>
+	let test = undefined;
+
+	function handleSubmit(event) {
+		event.preventDefault();
+		console.log('value', test);
+	}
+</script>
+
+<form on:submit={handleSubmit}>
+	<input bind:value={test} type=text required>
+	<button>Store</button>
+</form>

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,