diff --git a/.changeset/wicked-grapes-flash.md b/.changeset/wicked-grapes-flash.md new file mode 100644 index 000000000000..75ff68a728b9 --- /dev/null +++ b/.changeset/wicked-grapes-flash.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: coerce value to number when hydrating range/number input with changed value diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js index e528d1699e48..aec6f815a012 100644 --- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js +++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js @@ -45,7 +45,7 @@ export function bind_value(input, get, set = get) { // If we are hydrating and the value has since changed, then use the update value // from the input instead. if (hydrating && input.defaultValue !== input.value) { - set(input.value); + set(is_numberlike_input(input) ? to_number(input.value) : input.value); return; } diff --git a/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/_config.js b/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/_config.js new file mode 100644 index 000000000000..f4b5037890f0 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/_config.js @@ -0,0 +1,17 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + skip_mode: ['client'], + + test({ assert, target, hydrate }) { + const input = /** @type {HTMLInputElement} */ (target.querySelector('input')); + input.value = '1'; + input.dispatchEvent(new window.Event('input')); + // Hydration shouldn't reset the value to empty + hydrate(); + flushSync(); + + assert.htmlEqual(target.innerHTML, '\n1 (number)'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/main.svelte b/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/main.svelte new file mode 100644 index 000000000000..a10f3cec1e12 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/main.svelte @@ -0,0 +1,6 @@ + + + +{value} ({typeof value})