tweaks, test

Author: dummdidumm

packages/svelte/src/internal/client/dom/elements/bindings/input.js

@@ -73,16 +73,22 @@ export function bind_group(inputs, group_index, input, get_value, update) {
 
 	binding_group.push(input);
 
-	listen_to_event_and_reset_event(input, 'change', () => {
-		// @ts-ignore
-		var value = input.__value;
+	listen_to_event_and_reset_event(
+		input,
+		'change',
+		() => {
+			// @ts-ignore
+			var value = input.__value;
 
-		if (is_checkbox) {
-			value = get_binding_group_value(binding_group, value, input.checked);
-		}
+			if (is_checkbox) {
+				value = get_binding_group_value(binding_group, value, input.checked);
+			}
 
-		update(value);
-	});
+			update(value);
+		},
+		// TODO better default value handling
+		() => update(is_checkbox ? [] : null)
+	);
 
 	render_effect(() => {
 		var value = get_value();

packages/svelte/src/internal/client/dom/elements/bindings/shared.js

@@ -34,11 +34,23 @@ let listening_to_form_reset = false;
  * @param {HTMLElement} element
  * @param {string} event
  * @param {() => void} handler
+ * @param {() => void} [on_reset]
  */
-export function listen_to_event_and_reset_event(element, event, handler) {
+export function listen_to_event_and_reset_event(element, event, handler, on_reset = handler) {
 	element.addEventListener(event, handler);
 	// @ts-expect-error
-	element.__on_reset = handler;
+	const prev = element.__on_r;
+	if (prev) {
+		// special case for checkbox that can have multiple binds (group & checked)
+		// @ts-expect-error
+		element.__on_r = () => {
+			prev();
+			on_reset();
+		};
+	} else {
+		// @ts-expect-error
+		element.__on_r = on_reset;
+	}
 
 	if (!listening_to_form_reset) {
 		listening_to_form_reset = true;
@@ -47,7 +59,7 @@ export function listen_to_event_and_reset_event(element, event, handler) {
 				if (!evt.defaultPrevented) {
 					for (const e of /**@type {HTMLFormElement} */ (evt.target).elements) {
 						// @ts-expect-error
-						e.__on_reset?.();
+						e.__on_r?.();
 					}
 				}
 			});

packages/svelte/tests/runtime-runes/samples/bindings-form-reset/_config.js

@@ -0,0 +1,19 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const p = target.querySelector('p');
+
+		assert.htmlEqual(
+			p?.innerHTML || '',
+			`{"text":"text","checkbox":true,"radio_group":"a","checkbox_group":["a"],"select":"b","textarea":"textarea"}`
+		);
+
+		await target.querySelector('button')?.click();
+		await new Promise((r) => requestAnimationFrame(r));
+		assert.htmlEqual(
+			p?.innerHTML || '',
+			`{"text":"","checkbox":false,"radio_group":null,"checkbox_group":[],"select":"a","textarea":""}`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/bindings-form-reset/main.svelte

@@ -0,0 +1,31 @@
+<script>
+	let text = $state('text');
+	let checkbox = $state(true);
+	let radio_group = $state('a');
+	let checkbox_group = $state(['a']);
+	let select = $state('b');
+	let textarea = $state('textarea');
+</script>
+
+<p>{JSON.stringify({ text, checkbox, radio_group, checkbox_group, select, textarea })}</p>
+
+<form>
+	<input bind:value={text} />
+	
+	<input type="checkbox" bind:checked={checkbox} />
+	
+	<input type="radio" name="radio" value="a" bind:group={radio_group} />
+	<input type="radio" name="radio" value="b" bind:group={radio_group} />
+	
+	<input type="checkbox" name="checkbox" value="a" bind:group={checkbox_group} />
+	<input type="checkbox" name="checkbox" value="b" bind:group={checkbox_group} />
+
+	<select bind:value={select}>
+		<option value="a">a</option>
+		<option value="b">b</option>
+	</select>
+
+	<textarea bind:value={textarea}></textarea>
+
+	<button type="button" onclick={(e) => e.target.form.reset()}>Reset</button>
+</form>