slightly different approach

Author: dummdidumm

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

@@ -1,6 +1,7 @@
 import { DEV } from 'esm-env';
 import { render_effect } from '../../../reactivity/effects.js';
 import { stringify } from '../../../render.js';
+import { listen_to_event_and_reset_event } from './shared.js';
 
 /**
  * @param {HTMLInputElement} input
@@ -9,7 +10,7 @@ import { stringify } from '../../../render.js';
  * @returns {void}
  */
 export function bind_value(input, get_value, update) {
-	input.addEventListener('input', () => {
+	listen_to_event_and_reset_event(input, 'input', () => {
 		if (DEV && input.type === 'checkbox') {
 			throw new Error(
 				'Using bind:value together with a checkbox input is not allowed. Use bind:checked instead'
@@ -72,7 +73,7 @@ export function bind_group(inputs, group_index, input, get_value, update) {
 
 	binding_group.push(input);
 
-	input.addEventListener('change', () => {
+	listen_to_event_and_reset_event(input, 'change', () => {
 		// @ts-ignore
 		var value = input.__value;
 
@@ -114,7 +115,7 @@ export function bind_group(inputs, group_index, input, get_value, update) {
  * @returns {void}
  */
 export function bind_checked(input, get_value, update) {
-	input.addEventListener('change', () => {
+	listen_to_event_and_reset_event(input, 'change', () => {
 		var value = input.checked;
 		update(value);
 	});

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

@@ -1,4 +1,5 @@
 import { effect } from '../../../reactivity/effects.js';
+import { listen_to_event_and_reset_event } from './shared.js';
 
 /**
  * Selects the correct option(s) (depending on whether this is a multiple select)
@@ -58,7 +59,7 @@ export function selected(option) {
 export function bind_select_value(select, get_value, update) {
 	var mounting = true;
 
-	select.addEventListener('change', () => {
+	listen_to_event_and_reset_event(select, 'change', () => {
 		/** @type {unknown} */
 		var value;
 

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

@@ -25,3 +25,32 @@ export function listen(target, events, handler, call_handler_immediately = true)
 		};
 	});
 }
+
+let listening_to_form_reset = false;
+
+/**
+ * Listen to the given event, and then instantiate a global form reset listener if not already done,
+ * to notify all bindings when the form is reset
+ * @param {HTMLElement} element
+ * @param {string} event
+ * @param {() => void} handler
+ */
+export function listen_to_event_and_reset_event(element, event, handler) {
+	element.addEventListener(event, handler);
+	// @ts-expect-error
+	element.__on_reset = handler;
+
+	if (!listening_to_form_reset) {
+		listening_to_form_reset = true;
+		document.addEventListener('reset', (evt) => {
+			requestAnimationFrame(() => {
+				if (!evt.defaultPrevented) {
+					for (const e of /**@type {HTMLFormElement} */ (evt.target).elements) {
+						// @ts-expect-error
+						e.__on_reset?.();
+					}
+				}
+			});
+		});
+	}
+}