From 68cec07bc84095dabf04b8c3b162e3282be64817 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20S=C3=B6derlund?= <ciscoheat@gmail.com>
Date: Fri, 29 Sep 2023 11:13:02 +0200
Subject: [PATCH] Timing issue in SPA mode displayed errors when pressing
 enter.

---
 CHANGELOG.md                             |  6 ++
 src/lib/client/index.ts                  |  7 +++
 src/routes/tests/spa-submit/+page.svelte | 76 ++++++++++++++++++++++++
 src/routes/tests/spa-submit/+page.ts     | 11 ++++
 4 files changed, 100 insertions(+)
 create mode 100644 src/routes/tests/spa-submit/+page.svelte
 create mode 100644 src/routes/tests/spa-submit/+page.ts

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