diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
index eca6e9d325b5..ac5732eae7b0 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts
+++ b/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}`
+ );
}
}
diff --git a/test/runtime/samples/binding-input-number-2/_config.js b/test/runtime/samples/binding-input-number-2/_config.js
new file mode 100644
index 000000000000..a3510eb757ba
--- /dev/null
+++ b/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");
+ },
+};
diff --git a/test/runtime/samples/binding-input-number-2/main.svelte b/test/runtime/samples/binding-input-number-2/main.svelte
new file mode 100644
index 000000000000..62119547a04d
--- /dev/null
+++ b/test/runtime/samples/binding-input-number-2/main.svelte
@@ -0,0 +1,5 @@
+
+
+