fix: convert input value to number on hydration (#14349)

* convert input value to number on hydration

* add test

* changeset

---------

Co-authored-by: Rich Harris <[email protected]>

Author: santiagocezar

.changeset/wicked-grapes-flash.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: coerce value to number when hydrating range/number input with changed value

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

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, '<input type="number">\n1 (number)');
+	}
+});

packages/svelte/tests/runtime-runes/samples/hydrate-modified-input-numeric/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	let value = $state(0);
+</script>
+
+<input type="number" bind:value={value}>
+{value} ({typeof value})