Timing issue in SPA mode displayed errors when pressing enter.

Author: ciscoheat

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

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') {

src/routes/tests/spa-submit/+page.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+
+  export let data;
+
+  let status = '';
+
+  const { form, enhance, errors } = superForm(data.form, {
+    SPA: true,
+    resetForm: true,
+    validators: {
+      title: (value) =>
+        value.trim().length >= 3
+          ? null
+          : 'Bitte geben Sie mindestens 3 Zeichen ein'
+    },
+    onUpdate: ({ form }) => {
+      if (form.valid) {
+        // send data;
+        status = 'OK';
+      } else {
+        status = 'Not valid';
+      }
+    }
+  });
+</script>
+
+<SuperDebug data={{ $form, $errors }} />
+
+<h3>Superforms testing ground</h3>
+
+<p>{status}</p>
+
+<form method="POST" use:enhance>
+  <label>
+    Name<br />
+    <input
+      class="input"
+      type="text"
+      bind:value={$form.title}
+      aria-invalid={errors ? 'true' : undefined}
+    />
+  </label>
+  {#if $errors.title}<div class="invalid">{$errors.title}</div>{/if}
+
+  <button>Submit</button>
+</form>
+
+<hr />
+<p>
+  <a target="_blank" href="https://superforms.rocks/api">API Reference</a>
+</p>
+
+<style>
+  .invalid {
+    color: red;
+  }
+
+  input {
+    background-color: #ddd;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  hr {
+    margin-top: 4rem;
+  }
+
+  form {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+</style>

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 };
+};