diff --git a/.changeset/brown-pens-repeat.md b/.changeset/brown-pens-repeat.md new file mode 100644 index 0000000000..0ac7046324 --- /dev/null +++ b/.changeset/brown-pens-repeat.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: keep bound inputs in sync in runes mode 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 a1406925f5..91b4346c0a 100644 --- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js +++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js @@ -5,6 +5,7 @@ import * as e from '../../../errors.js'; import { get_proxied_value, is } from '../../../proxy.js'; import { queue_micro_task } from '../../task.js'; import { hydrating } from '../../hydration.js'; +import { is_runes } from '../../../runtime.js'; /** * @param {HTMLInputElement} input @@ -13,13 +14,24 @@ import { hydrating } from '../../hydration.js'; * @returns {void} */ export function bind_value(input, get, set = get) { + var runes = is_runes(); + listen_to_event_and_reset_event(input, 'input', () => { if (DEV && input.type === 'checkbox') { // TODO should this happen in prod too? e.bind_invalid_checkbox_value(); } - set(is_numberlike_input(input) ? to_number(input.value) : input.value); + /** @type {unknown} */ + var value = is_numberlike_input(input) ? to_number(input.value) : input.value; + set(value); + + // In runes mode, respect any validation in accessors (doesn't apply in legacy mode, + // because we use mutable state which ensures the render effect always runs) + if (runes && value !== (value = get())) { + // @ts-expect-error the value is coerced on assignment + input.value = value ?? ''; + } }); render_effect(() => { diff --git a/packages/svelte/tests/runtime-runes/samples/bind-value-state/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-value-state/_config.js new file mode 100644 index 0000000000..31f99ac28d --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/bind-value-state/_config.js @@ -0,0 +1,27 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +export default test({ + html: `
0
`, + mode: ['client', 'hydrate'], + + async test({ assert, target }) { + const [input1] = target.querySelectorAll('input'); + assert.equal(input1.value, '0'); + + input1.value = '1'; + input1.dispatchEvent(new window.InputEvent('input')); + + flushSync(); + + assert.equal(input1.value, '1'); + assert.htmlEqual(target.innerHTML, `
1
`); + + input1.value = '101'; + input1.dispatchEvent(new window.InputEvent('input')); + flushSync(); + + assert.equal(input1.value, '100'); + assert.htmlEqual(target.innerHTML, `
100
`); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/bind-value-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-value-state/main.svelte new file mode 100644 index 0000000000..20a09bec14 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/bind-value-state/main.svelte @@ -0,0 +1,11 @@ + + +
{count.v}