@samuel-charpentier/sform 0.0.5 → 0.0.7

package/dist/Sform/Sfield.svelte

@@ -6,6 +6,7 @@
 		TypedSfieldProps
 	} from './types.js';
 	import { getSformContext } from './context.svelte.js';
+	import { tick } from 'svelte';
 	import TextInput from './inputs/TextInput.svelte';
 	import NumberInput from './inputs/NumberInput.svelte';
 	import TextareaInput from './inputs/TextareaInput.svelte';
@@ -56,8 +57,15 @@
 	const issues = $derived(showIssues ? field.issues() : []);
 	const hasIssues = $derived(issues && issues instanceof Array && issues.length > 0);
 
-	function handleBlur() {
+	async function handleBlur() {
 		context.markTouched(name);
+		// Wait a tick - if submission started, pending will be > 0 by then
+		// This prevents stale data validation when blur fires during Enter submission
+		await tick();
+		const formState = context.getFormState();
+		if (formState.pending) {
+			return;
+		}
 		// Trigger validation with includeUntouched so blur mode shows issues
 		context.triggerValidation();
 	}
@@ -156,7 +164,7 @@
 	{/if}
 
 	{#if props.hint}
-		<div class="sform-hint">
+		<div class={classes.hint}>
 			{#if typeof props.hint === 'string'}
 				{props.hint}
 			{:else}
@@ -166,9 +174,9 @@
 	{/if}
 
 	{#if hasIssues}
-		<div class={classes.messages}>
+		<div class={classes.issues}>
 			{#each issues as issue, i (i)}
-				<p>{issue.message}</p>
+				<p class={classes.issue}>{issue.message}</p>
 			{/each}
 		</div>
 	{/if}

package/dist/Sform/Sform.svelte

@@ -57,10 +57,7 @@
 		() => validateOn,
 		getFieldNames,
 		triggerValidation,
-		() => {
-			// Use setTimeout to ensure we're outside the current event loop
-			setTimeout(() => formElement?.requestSubmit(), 0);
-		},
+		() => formElement?.requestSubmit(),
 		() => form
 	);
 
@@ -89,7 +86,6 @@
 	});
 
 	function handleInput() {
-		// Always include untouched to preserve issues on fields that were already validated
 		form.validate({ includeUntouched: true });
 	}
 

package/dist/Sform/types.d.ts

@@ -37,8 +37,12 @@ export interface SfieldClasses {
     label?: string;
     /** Input element class */
     input?: string;
-    /** Messages/errors container class */
-    messages?: string;
+    /** Hint element class */
+    hint?: string;
+    /** Issues container class */
+    issues?: string;
+    /** Individual issue element class */
+    issue?: string;
 }
 /**
  * Maps Sfield input types to the value types they handle.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@samuel-charpentier/sform",
-	"version": "0.0.5",
+	"version": "0.0.7",
 	"description": "A Svelte 5 form library for SvelteKit remote forms",
 	"keywords": [
 		"svelte",