@marianmeres/stuic 3.76.2 → 3.76.4

package/dist/actions/on-submit-validity-check.svelte.js

@@ -47,6 +47,12 @@ export function onSubmitValidityCheck(node) {
         e.preventDefault();
         // this will disable all other onsubmit listeners...
         e.stopImmediatePropagation();
+        // // [debug] kept commented for the next time Issue A regresses
+        // // eslint-disable-next-line no-console
+        // console.log(
+        // 	"[onSubmitValidityCheck] submit intercepted. element count:",
+        // 	node.elements?.length
+        // );
         const invalid = [];
         for (let i = 0; i < node.elements?.length; i++) {
             const el = node.elements[i];
@@ -55,6 +61,15 @@ export function onSubmitValidityCheck(node) {
                 // input (last radio input), which is not desired
                 if (el.type === "radio")
                     continue;
+                // // [debug] kept commented for the next time Issue A regresses
+                // // eslint-disable-next-line no-console
+                // console.log(`[onSubmitValidityCheck] el#${i} ${el.name || el.type} BEFORE`, {
+                // 	value: el.value,
+                // 	valid: el.validity.valid,
+                // 	customError: el.validity.customError,
+                // 	valueMissing: el.validity.valueMissing,
+                // 	validationMessage: el.validationMessage,
+                // });
                 // Clear any stale `customError` flag from a prior submit attempt before
                 // re-dispatching the validate listeners. Without this, if the field's
                 // per-field validate $effect was torn down/re-mounted in a way that
@@ -69,9 +84,15 @@ export function onSubmitValidityCheck(node) {
                     el.setCustomValidity("");
                 el.dispatchEvent(new Event("input", { bubbles: true }));
                 el.dispatchEvent(new Event("change", { bubbles: true }));
-                // typeof el.checkValidity === "function" && !el.checkValidity();
-                // NOTE: el.checkValidity() returns true for hidden inputs event if they are invalid!
-                // if (!el.checkValidity()) {
+                // // [debug] kept commented for the next time Issue A regresses
+                // // eslint-disable-next-line no-console
+                // console.log(`[onSubmitValidityCheck] el#${i} ${el.name || el.type} AFTER `, {
+                // 	value: el.value,
+                // 	valid: el.validity.valid,
+                // 	customError: el.validity.customError,
+                // 	valueMissing: el.validity.valueMissing,
+                // 	validationMessage: el.validationMessage,
+                // });
                 if (!el.validity.valid) {
                     invalid.push(el);
                 }
@@ -79,12 +100,28 @@ export function onSubmitValidityCheck(node) {
         }
         // none invalid
         if (!invalid.length) {
+            // // [debug] kept commented for the next time Issue A regresses
+            // // eslint-disable-next-line no-console
+            // console.log("[onSubmitValidityCheck] → dispatching submit_valid");
             node.dispatchEvent(new CustomEvent(SUBMIT_VALID_EVENT_NAME, {
                 bubbles: true,
                 detail: { formData: new FormData(node) },
             }));
         }
         else {
+            // // [debug] kept commented for the next time Issue A regresses
+            // // eslint-disable-next-line no-console
+            // console.warn(
+            // 	"[onSubmitValidityCheck] → dispatching submit_invalid; invalid =",
+            // 	invalid.map((el) => ({
+            // 		name: el.name,
+            // 		type: el.type,
+            // 		value: el.value,
+            // 		customError: el.validity.customError,
+            // 		valueMissing: el.validity.valueMissing,
+            // 		validationMessage: el.validationMessage,
+            // 	}))
+            // );
             node.dispatchEvent(new CustomEvent(SUBMIT_INVALID_EVENT_NAME, {
                 bubbles: true,
                 detail: { invalid },

package/dist/actions/validate.svelte.js

@@ -154,6 +154,14 @@ export function validate(el, fn) {
             }
             return fallback;
         };
+        // // [debug] kept commented for the next time Issue A regresses
+        // // eslint-disable-next-line no-console
+        // console.log(
+        // 	`[validate $effect] (re)mount listener on <${el.tagName.toLowerCase()} name="${
+        // 		(el as HTMLInputElement).name || ""
+        // 	}">`,
+        // 	{ enabled, on, hasCustomValidator: typeof customValidator === "function" }
+        // );
         const _doValidate = () => {
             if (!enabled)
                 return;
@@ -172,6 +180,19 @@ export function validate(el, fn) {
             // being removed across re-renders would leave the previous message
             // stuck on the element forever.
             el.setCustomValidity(customValidatorMessage);
+            // // [debug] kept commented for the next time Issue A regresses
+            // // eslint-disable-next-line no-console
+            // console.log(
+            // 	`[validate _doValidate] ran on <${el.tagName.toLowerCase()} name="${
+            // 		(el as HTMLInputElement).name || ""
+            // 	}">`,
+            // 	{
+            // 		value: el.value,
+            // 		customValidatorMessage,
+            // 		customError: el.validity.customError,
+            // 		valid: el.validity.valid,
+            // 	}
+            // );
             // this triggers the bubble, which is not what we want
             // el.reportValidity();
             const validityState = el.validity;

package/dist/components/EmailVerifyForm/EmailVerifyForm.svelte

@@ -89,6 +89,18 @@
 
 	let t = $derived(tProp ?? t_default);
 
+	// Mirror the form ref into local $state so it survives prop re-application
+	// when the parent re-renders without binding `el`. See LoginForm for the full
+	// rationale — same Svelte 5 `$bindable` + `bind:this` gotcha applies here.
+	// EmailVerifyForm uses `onsubmit={handleFormSubmit}` (declarative attribute)
+	// so the listener wouldn't get torn down the way LoginForm/RegisterForm did,
+	// but the public `el` prop is still unsafe for consumers that bind it after
+	// any parent re-render — same fix for consistency.
+	let formEl = $state<HTMLFormElement | undefined>();
+	$effect(() => {
+		el = formEl;
+	});
+
 	let code = $state("");
 	let cooldownRemaining = $state(0);
 	let resentFlash = $state(false);
@@ -182,7 +194,7 @@
 	let submitDisabled = $derived(code.length !== codeLength || isSubmitting);
 </script>
 
-<form bind:this={el} class={_class} onsubmit={handleFormSubmit} {...rest}>
+<form bind:this={formEl} class={_class} onsubmit={handleFormSubmit} {...rest}>
 	<!-- Heading -->
 	<H level={2} class={unstyled ? undefined : "stuic-email-verify-form-heading"}>
 		{t("email_verify_form.heading")}

package/dist/components/LoginForm/LoginForm.svelte

@@ -2,11 +2,11 @@
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { TranslateFn } from "../../types.js";
+	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 	import type {
 		LoginFormData,
 		LoginFormValidationError,
 	} from "./_internal/login-form-types.js";
-	import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
 
 	export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
 		/** Bindable login data. Default: createEmptyLoginFormData() */
@@ -78,18 +78,18 @@
 
 <script lang="ts">
 	import { untrack } from "svelte";
+	import { onSubmitValidityCheck } from "../../actions/on-submit-validity-check.svelte.js";
+	import { tooltip } from "../../actions/tooltip/tooltip.svelte.js";
 	import { twMerge } from "../../utils/tw-merge.js";
+	import Button from "../Button/Button.svelte";
+	import DismissibleMessage from "../DismissibleMessage/DismissibleMessage.svelte";
+	import FieldCheckbox from "../Input/FieldCheckbox.svelte";
+	import FieldInput from "../Input/FieldInput.svelte";
 	import { t_default } from "./_internal/login-form-i18n-defaults.js";
 	import {
 		createEmptyLoginFormData,
 		validateLoginForm,
 	} from "./_internal/login-form-utils.js";
-	import { tooltip } from "../../actions/tooltip/tooltip.svelte.js";
-	import Button from "../Button/Button.svelte";
-	import DismissibleMessage from "../DismissibleMessage/DismissibleMessage.svelte";
-	import FieldCheckbox from "../Input/FieldCheckbox.svelte";
-	import FieldInput from "../Input/FieldInput.svelte";
-	import { onSubmitValidityCheck } from "../../actions/on-submit-validity-check.svelte.js";
 
 	let {
 		formData = $bindable(createEmptyLoginFormData()),
@@ -115,6 +115,19 @@
 
 	let t = $derived(tProp ?? t_default);
 
+	// Mirror the form ref into local $state so it survives prop re-application
+	// when the parent re-renders without binding `el`. Otherwise the bindable
+	// prop reverts to its default (undefined) on the next parent re-render, the
+	// `$effect` tracking it cleans up the `submit_valid` listener, and `bind:this`
+	// does NOT re-fire (the form element wasn't unmounted) — leaving the form
+	// alive in the DOM with no submit handler. Next click silently goes nowhere.
+	// `el` stays the public API: consumers can still bind it; we mirror formEl
+	// into it so the binding sees a value.
+	let formEl = $state<HTMLFormElement | undefined>();
+	$effect(() => {
+		el = formEl;
+	});
+
 	// Internal validation errors (set on submit)
 	let internalErrors = $state<LoginFormValidationError[]>([]);
 
@@ -131,15 +144,22 @@
 	}
 
 	function handleSubmitValid() {
+		// // [debug] kept commented for the next time Issue A regresses
+		// // eslint-disable-next-line no-console
+		// console.log("[LoginForm handleSubmitValid] entered", {
+		// 	formData: { ...formData },
+		// 	internalErrors: $state.snapshot(internalErrors),
+		// 	externalErrors: [...externalErrors],
+		// 	error,
+		// });
+
 		// Defensively clear any stale customValidity left on form fields by a prior
-		// validation pass. The `validate` action already clears it when the field's
-		// customValidator returns an empty string, but a field can skip that path
-		// (e.g., it was disabled, or its $effect torn down between submits) and the
-		// stale flag would then make `el.validity.valid` return false on the next
-		// submit, silently routing the form to `submit_invalid` and never calling
-		// `onSubmit`. Resetting here gives every retry a clean slate.
-		if (el) {
-			for (const node of Array.from(el.elements) as HTMLInputElement[]) {
+		// validation pass. The canonical fix lives in `onSubmitValidityCheck` (which
+		// pre-clears before the per-field re-dispatch), but doing it here too is
+		// cheap insurance against any future regression that lets a stale flag slip
+		// past the action.
+		if (formEl) {
+			for (const node of Array.from(formEl.elements) as HTMLInputElement[]) {
 				if (typeof node.setCustomValidity === "function") node.setCustomValidity("");
 			}
 		}
@@ -147,6 +167,15 @@
 		const validationErrors = validateLoginForm(formData, t);
 		internalErrors = validationErrors;
 
+		// // [debug] kept commented for the next time Issue A regresses
+		// // eslint-disable-next-line no-console
+		// console.log("[LoginForm handleSubmitValid] post-validate", {
+		// 	validationErrors,
+		// 	externalErrorsLen: externalErrors.length,
+		// 	willCallOnSubmit:
+		// 		validationErrors.length === 0 && externalErrors.length === 0,
+		// });
+
 		if (validationErrors.length === 0 && externalErrors.length === 0) {
 			onSubmit(formData);
 		}
@@ -172,9 +201,11 @@
 
 	// The onSubmitValidityCheck action intercepts native submit (capture phase,
 	// stopImmediatePropagation) and dispatches a custom "submit_valid" event.
-	// Listen for it on the form element as a fallback.
+	// Listen for it on the form element as a fallback. Reads `formEl` (local state)
+	// — NOT the `el` prop, which can revert to undefined on parent re-render and
+	// would cause this $effect's cleanup to silently detach the listener.
 	$effect(() => {
-		const node = el;
+		const node = formEl;
 		if (!node) return;
 		node.addEventListener("submit_valid", handleSubmitValid);
 		return () => node.removeEventListener("submit_valid", handleSubmitValid);
@@ -183,15 +214,15 @@
 	let _class = $derived(unstyled ? classProp : twMerge("stuic-login-form", classProp));
 </script>
 
-<form bind:this={el} class={_class} use:onSubmitValidityCheck {...rest}>
+<form bind:this={formEl} class={_class} use:onSubmitValidityCheck {...rest}>
 	<!-- General error alert -->
 	<DismissibleMessage message={error} intent="destructive" />
 
 	<!--
-			svelte-ignore binding_property_non_reactive:
-			formData is a $bindable prop — deep reactivity depends on the consumer
-			passing a $state() object. The bindings work correctly regardless.
-		-->
+		svelte-ignore binding_property_non_reactive:
+		formData is a $bindable prop — deep reactivity depends on the consumer
+		passing a $state() object. The bindings work correctly regardless.
+	-->
 	<!-- Email -->
 	<!-- svelte-ignore binding_property_non_reactive -->
 	<FieldInput

package/dist/components/LoginForm/LoginForm.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 import type { TranslateFn } from "../../types.js";
-import type { LoginFormData, LoginFormValidationError } from "./_internal/login-form-types.js";
 import type { NotificationsStack } from "../Notifications/notifications-stack.svelte.js";
+import type { LoginFormData, LoginFormValidationError } from "./_internal/login-form-types.js";
 export interface Props extends Omit<HTMLAttributes<HTMLFormElement>, "children"> {
     /** Bindable login data. Default: createEmptyLoginFormData() */
     formData?: LoginFormData;

package/dist/components/RegisterForm/RegisterForm.svelte

@@ -132,6 +132,14 @@
 
 	let t = $derived(tProp ?? t_default);
 
+	// Mirror the form ref into local $state so it survives prop re-application
+	// when the parent re-renders without binding `el`. See LoginForm for the full
+	// rationale — same Svelte 5 `$bindable` + `bind:this` gotcha applies here.
+	let formEl = $state<HTMLFormElement | undefined>();
+	$effect(() => {
+		el = formEl;
+	});
+
 	let topFields = $derived(extraFields.filter((f) => f.position === "top"));
 	let bottomFields = $derived(extraFields.filter((f) => f.position !== "top"));
 
@@ -180,9 +188,11 @@
 
 	// The onSubmitValidityCheck action intercepts native submit (capture phase,
 	// stopImmediatePropagation) and dispatches a custom "submit_valid" event.
-	// Listen for it on the form element as a fallback.
+	// Listen for it on the form element as a fallback. Reads `formEl` (local state)
+	// — NOT the `el` prop, which can revert to undefined on parent re-render and
+	// would cause this $effect's cleanup to silently detach the listener.
 	$effect(() => {
-		const node = el;
+		const node = formEl;
 		if (!node) return;
 		node.addEventListener("submit_valid", handleSubmitValid);
 		return () => node.removeEventListener("submit_valid", handleSubmitValid);
@@ -191,7 +201,7 @@
 	let _class = $derived(unstyled ? classProp : twMerge("stuic-register-form", classProp));
 </script>
 
-<form bind:this={el} class={_class} use:onSubmitValidityCheck {...rest}>
+<form bind:this={formEl} class={_class} use:onSubmitValidityCheck {...rest}>
 	<!-- General error alert -->
 	<DismissibleMessage message={error} intent="destructive" />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "3.76.2",
+  "version": "3.76.4",
   "files": [
     "dist",
     "!dist/**/*.test.*",