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 @@ + + +