fix: Form reset should trigger bindings

packages/svelte/src/internal/client/operations.js

@@ -84,6 +84,25 @@ export function init_operations() {
 	// @ts-expect-error
 	element_prototype.__className = '';
 
+	// @ts-expect-error
+	HTMLInputElement.prototype.__bind = undefined;
+	// @ts-expect-error
+	HTMLSelectElement.prototype.__bind = undefined;
+	// @ts-expect-error
+	HTMLTextAreaElement.prototype.__bind = undefined;
+
+	// On form's reset, invoke bindings on elements
+	document.body.addEventListener('reset', (evt) => {
+		requestAnimationFrame(() => {
+			if (!evt.defaultPrevented) {
+				for (const e of /**@type {HTMLFormElement} */ (evt.target).elements) {
+					// @ts-expect-error
+					e.__bind && e.__bind();
+				}
+			}
+		});
+	});
+
 	first_child_get = /** @type {(this: Node) => ChildNode | null} */ (
 		// @ts-ignore
 		get_descriptor(node_prototype, 'firstChild').get

packages/svelte/src/internal/client/render.js

@@ -71,6 +71,30 @@ const all_registerd_events = new Set();
 /** @type {Set<(events: Array<string>) => void>} */
 const root_event_handles = new Set();
 
+/**
+ * Add the function on the __bind attribute of the element
+ * This allow to handle form's reset correctly
+ * @param {Element} dom
+ * @param {()=>void} fn
+ */
+function binds(dom, fn) {
+	// @ts-ignore
+	if (dom.__bind) {
+		// special case for checkbox that can have multiple bind (group & checked for example)
+		// @ts-ignore
+		const prev = dom.__bind;
+		// @ts-ignore
+		dom.__bind = () => {
+			prev();
+			fn();
+		};
+	} else {
+		// @ts-ignore
+		dom.__bind = fn;
+	}
+	return fn;
+}
+
 /** @returns {Text} */
 export function empty() {
 	return document.createTextNode('');
@@ -946,15 +970,17 @@ export function selected(dom) {
  * @returns {void}
  */
 export function bind_value(dom, get_value, update) {
-	dom.addEventListener('input', () => {
-		/** @type {any} */
-		let value = dom.value;
-		if (is_numberlike_input(dom)) {
-			value = to_number(value);
-		}
-		update(value);
-	});
-
+	dom.addEventListener(
+		'input',
+		binds(dom, () => {
+			/** @type {any} */
+			let value = dom.value;
+			if (is_numberlike_input(dom)) {
+				value = to_number(value);
+			}
+			update(value);
+		})
+	);
 	render_effect(() => {
 		const value = get_value();
 		// @ts-ignore
@@ -992,18 +1018,21 @@ function to_number(value) {
  */
 export function bind_select_value(dom, get_value, update) {
 	let mounting = true;
-	dom.addEventListener('change', () => {
-		/** @type {unknown} */
-		let value;
-		if (dom.multiple) {
-			value = [].map.call(dom.querySelectorAll(':checked'), get_option_value);
-		} else {
-			/** @type {HTMLOptionElement | null} */
-			const selected_option = dom.querySelector(':checked');
-			value = selected_option && get_option_value(selected_option);
-		}
-		update(value);
-	});
+	dom.addEventListener(
+		'change',
+		binds(dom, () => {
+			/** @type {unknown} */
+			let value;
+			if (dom.multiple) {
+				value = [].map.call(dom.querySelectorAll(':checked'), get_option_value);
+			} else {
+				/** @type {HTMLOptionElement | null} */
+				const selected_option = dom.querySelector(':checked');
+				value = selected_option && get_option_value(selected_option);
+			}
+			update(value);
+		})
+	);
 	// Needs to be an effect, not a render_effect, so that in case of each loops the logic runs after the each block has updated
 	effect(() => {
 		let value = get_value();
@@ -1094,14 +1123,27 @@ export function bind_group(group, group_index, dom, get_value, update) {
 		}
 	}
 	binding_group.push(dom);
-	dom.addEventListener('change', () => {
-		// @ts-ignore
-		let value = dom.__value;
-		if (is_checkbox) {
-			value = get_binding_group_value(binding_group, value, dom.checked);
-		}
-		update(value);
-	});
+	dom.addEventListener(
+		'change',
+		binds(dom, () => {
+			// @ts-ignore
+			let value = dom.__value;
+			if (is_checkbox) {
+				value = get_binding_group_value(binding_group, value, dom.checked);
+			} else if (!dom.checked) {
+				// on form reset, we need to check selected item
+				value = null;
+				if (dom.form && dom.name) {
+					const item = dom.form.elements.namedItem(dom.name);
+					if (item) {
+						// @ts-ignore
+						value = item.value;
+					}
+				}
+			}
+			update(value);
+		})
+	);
 	render_effect(() => {
 		let value = get_value();
 		if (is_checkbox) {
@@ -1130,10 +1172,13 @@ export function bind_group(group, group_index, dom, get_value, update) {
  * @returns {void}
  */
 export function bind_checked(dom, get_value, update) {
-	dom.addEventListener('change', () => {
-		const value = dom.checked;
-		update(value);
-	});
+	dom.addEventListener(
+		'change',
+		binds(dom, () => {
+			const value = dom.checked;
+			update(value);
+		})
+	);
 	// eslint-disable-next-line eqeqeq
 	if (get_value() == undefined) {
 		update(false);