diff --git a/CHANGELOG.md b/CHANGELOG.md index 53d51753..5d026895 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ Headlines: Added, Changed, Deprecated, Removed, Fixed, Security The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.7.4] - 2023-09-29 + +### Fixed + +- Timing issue in [SPA mode](https://superforms.rocks/concepts/spa) displayed errors for valid data, when submitting a form by pressing enter. + ## [1.7.3] - 2023-09-28 ### Fixed diff --git a/src/lib/client/index.ts b/src/lib/client/index.ts index d2da8a25..1f92a160 100644 --- a/src/lib/client/index.ts +++ b/src/lib/client/index.ts @@ -833,6 +833,13 @@ export function superForm< page.subscribe(async (pageUpdate) => { if (!options.applyAction) return; + // Strange timing issue in SPA mode forces a wait here, + // otherwise errors will appear even if the form is valid + // when pressing enter to submit the form (not when clicking a submit button!) + if (options.SPA) { + await new Promise((r) => setTimeout(r, 0)); + } + const untaint = pageUpdate.status >= 200 && pageUpdate.status < 300; if (pageUpdate.form && typeof pageUpdate.form === 'object') { diff --git a/src/routes/tests/spa-submit/+page.svelte b/src/routes/tests/spa-submit/+page.svelte new file mode 100644 index 00000000..32e5fed8 --- /dev/null +++ b/src/routes/tests/spa-submit/+page.svelte @@ -0,0 +1,76 @@ + + + + +

Superforms testing ground

+ +

{status}

+ +
+ + {#if $errors.title}
{$errors.title}
{/if} + + +
+ +
+

+ API Reference +

+ + diff --git a/src/routes/tests/spa-submit/+page.ts b/src/routes/tests/spa-submit/+page.ts new file mode 100644 index 00000000..620e0f7f --- /dev/null +++ b/src/routes/tests/spa-submit/+page.ts @@ -0,0 +1,11 @@ +import { z } from 'zod'; +import { superValidate } from '$lib/client'; + +const Schema = z.object({ + title: z.string().min(3) +}); + +export const load = async () => { + const form = await superValidate(Schema); + return { form }; +};