use value check instead of guard for number inputs (#4689)

Author: pushkine

src/compiler/compile/render_dom/wrappers/Element/Binding.ts

@@ -57,7 +57,7 @@ export default class BindingWrapper {
 
 		this.is_readonly = this.node.is_readonly;
 
-		this.needs_lock = this.node.name === 'currentTime' || (parent.node.name === 'input' && parent.node.get_static_attribute_value('type') === 'number'); // TODO others?
+		this.needs_lock = this.node.name === 'currentTime';  // TODO others?
 	}
 
 	get_dependencies() {
@@ -93,11 +93,23 @@ export default class BindingWrapper {
 			update_conditions.push(block.renderer.dirty(dependency_array));
 		}
 
-		if (parent.node.name === 'input') {
-			const type = parent.node.get_static_attribute_value('type');
-
-			if (type === null || type === "" || type === "text" || type === "email" || type === "password") {
-				update_conditions.push(x`${parent.var}.${this.node.name} !== ${this.snippet}`);
+		if (parent.node.name === "input") {
+			const type = parent.node.get_static_attribute_value("type");
+
+			if (
+				type === null ||
+				type === "" ||
+				type === "text" ||
+				type === "email" ||
+				type === "password"
+			) {
+				update_conditions.push(
+					x`${parent.var}.${this.node.name} !== ${this.snippet}`
+				);
+			} else if (type === "number") {
+				update_conditions.push(
+					x`@to_number(${parent.var}.${this.node.name}) !== ${this.snippet}`
+				);
 			}
 		}
 

test/runtime/samples/binding-input-number-2/_config.js

@@ -0,0 +1,31 @@
+export default {
+	test({ assert, target, window, component }) {
+		const input = target.querySelector("input");
+		const inputEvent = new window.InputEvent("input");
+		assert.equal(component.value, 5);
+		assert.equal(input.value, "5");
+
+		input.value = "5.";
+		input.dispatchEvent(inputEvent);
+
+		// input type number has value === "" if ends with dot/comma
+		assert.equal(component.value, undefined);
+		assert.equal(input.value, "");
+
+		input.value = "5.5";
+		input.dispatchEvent(inputEvent);
+
+		assert.equal(component.value, 5.5);
+		assert.equal(input.value, "5.5");
+
+		input.value = "5.50";
+		input.dispatchEvent(inputEvent);
+
+		assert.equal(component.value, 5.5);
+		assert.equal(input.value, "5.50");
+
+		component.value = 1;
+		assert.equal(component.value, 1);
+		assert.equal(input.value, "1");
+	},
+};

test/runtime/samples/binding-input-number-2/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let value = 5;
+</script>
+
+<input type="number" bind:value />