handle reset case specifically: use different props/queries in that case

Author: dummdidumm

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

@@ -16,20 +16,21 @@ import { is_runes, untrack } from '../../../runtime.js';
 export function bind_value(input, get, set = get) {
 	var runes = is_runes();
 
-	listen_to_event_and_reset_event(input, 'input', () => {
+	listen_to_event_and_reset_event(input, 'input', (is_reset) => {
 		if (DEV && input.type === 'checkbox') {
 			// TODO should this happen in prod too?
 			e.bind_invalid_checkbox_value();
 		}
 
-		/** @type {unknown} */
-		var value = is_numberlike_input(input) ? to_number(input.value) : input.value;
+		/** @type {any} */
+		var value = is_reset ? input.defaultValue : input.value;
+		value = is_numberlike_input(input) ? to_number(value) : 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
+			// the value is coerced on assignment
 			input.value = value ?? '';
 		}
 	});
@@ -179,8 +180,8 @@ export function bind_group(inputs, group_index, input, get, set = get) {
  * @returns {void}
  */
 export function bind_checked(input, get, set = get) {
-	listen_to_event_and_reset_event(input, 'change', () => {
-		var value = input.checked;
+	listen_to_event_and_reset_event(input, 'change', (is_reset) => {
+		var value = is_reset ? input.defaultChecked : input.checked;
 		set(value);
 	});
 

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

@@ -80,15 +80,16 @@ export function init_select(select, get_value) {
 export function bind_select_value(select, get, set = get) {
 	var mounting = true;
 
-	listen_to_event_and_reset_event(select, 'change', () => {
+	listen_to_event_and_reset_event(select, 'change', (is_reset) => {
+		var query = is_reset ? '[selected]' : ':checked';
 		/** @type {unknown} */
 		var value;
 
 		if (select.multiple) {
-			value = [].map.call(select.querySelectorAll(':checked'), get_option_value);
+			value = [].map.call(select.querySelectorAll(query), get_option_value);
 		} else {
 			/** @type {HTMLOptionElement | null} */
-			var selected_option = select.querySelector(':checked');
+			var selected_option = select.querySelector(query);
 			value = selected_option && get_option_value(selected_option);
 		}
 

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

@@ -53,8 +53,8 @@ export function without_reactive_context(fn) {
  * to notify all bindings when the form is reset
  * @param {HTMLElement} element
  * @param {string} event
- * @param {() => void} handler
- * @param {() => void} [on_reset]
+ * @param {(is_reset?: true) => void} handler
+ * @param {(is_reset?: true) => void} [on_reset]
  */
 export function listen_to_event_and_reset_event(element, event, handler, on_reset = handler) {
 	element.addEventListener(event, () => without_reactive_context(handler));
@@ -65,11 +65,11 @@ export function listen_to_event_and_reset_event(element, event, handler, on_rese
 		// @ts-expect-error
 		element.__on_r = () => {
 			prev();
-			on_reset();
+			on_reset(true);
 		};
 	} else {
 		// @ts-expect-error
-		element.__on_r = on_reset;
+		element.__on_r = () => on_reset(true);
 	}
 
 	add_form_reset_listener();