@marianmeres/stuic 3.76.1 → 3.76.3

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,11 +61,38 @@ 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
+                // skipped re-running its `customValidator` (e.g., the parent re-rendered
+                // for an unrelated reason between submits), the previous submit's
+                // customValidity message lingers on the DOM element. Then `el.validity.valid`
+                // would return false here even though the customValidator now reports no
+                // error, silently routing the form to `submit_invalid` and never calling
+                // the consumer's onSubmit. The dispatched change event below re-runs the
+                // per-field validator which re-applies a real customValidity if needed.
+                if (typeof el.setCustomValidity === "function")
+                    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);
                 }
@@ -67,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;
@@ -165,8 +173,26 @@ export function validate(el, fn) {
             let customValidatorMessage = "";
             if (typeof customValidator === "function") {
                 customValidatorMessage = customValidator(el.value, context, el) || "";
-                el.setCustomValidity(customValidatorMessage);
             }
+            // Always write — including the no-validator case (which writes "" and
+            // thus clears any stale `customError` flag the element may be carrying
+            // from a prior listener generation). Without this, a `customValidator`
+            // 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/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()),
@@ -131,13 +131,20 @@
 	}
 
 	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.
+		// 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 (el) {
 			for (const node of Array.from(el.elements) as HTMLInputElement[]) {
 				if (typeof node.setCustomValidity === "function") node.setCustomValidity("");
@@ -147,6 +154,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);
 		}
@@ -188,10 +204,10 @@
 	<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/package.json

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