Forms in components weren't resetted properly when destroyed and created again.

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.5.2] - 2023-08-15
+
+### Fixed
+
+- Forms in components weren't resetted properly when destroyed and created again.
+
 ## [1.5.1] - 2023-08-09
 
 ### Fixed

src/lib/client/index.ts

@@ -256,6 +256,9 @@ export type EnhancedForm<T extends AnyZodObject, M = any> = SuperForm<T, M>;
 
 const formIds = new WeakMap<Page, Set<string | undefined>>();
 
+// Track ActionData, so it won't be applied twice for componentized forms.
+const postedActionData = new WeakSet<object>();
+
 function multipleFormIdError(id: string | undefined) {
   return (
     `Duplicate form id's found: "${id}". ` +
@@ -338,13 +341,20 @@ export function superForm<
     }
   }
 
+  // Need to clone the validation data, in case it's used to populate multiple forms.
+  const initialForm = clone(form);
+
   // Detect if a form is posted without JavaScript.
   const postedData = _currentPage.form;
-  if (postedData && typeof postedData === 'object') {
+
+  if (!browser && postedData && typeof postedData === 'object') {
     for (const postedForm of Context_findValidationForms(
       postedData
     ).reverse()) {
-      if (postedForm.id === _formId) {
+      if (postedForm.id === _formId && !postedActionData.has(postedForm)) {
+        // Prevent multiple "posting" that can happen when components are recreated.
+        postedActionData.add(postedData);
+
         const pageDataForm = form as SuperValidated<T, M>;
         form = postedForm as SuperValidated<T, M>;
         // Reset the form if option set and form is valid.
@@ -363,13 +373,10 @@ export function superForm<
 
   const form2 = form as SuperValidated<T, M>;
 
-  // Need to clone the validation data, in case it's used to populate multiple forms.
-  const initialForm = clone(form2);
-
   if (typeof initialForm.valid !== 'boolean') {
     throw new SuperFormError(
       'A non-validation object was passed to superForm. ' +
-        "Check what's passed to its first parameter."
+        'It should be an object of type SuperValidated, usually returned from superValidate.'
     );
   }
 
@@ -818,13 +825,20 @@ export function superForm<
         const untaint = pageUpdate.status >= 200 && pageUpdate.status < 300;
 
         if (pageUpdate.form && typeof pageUpdate.form === 'object') {
+          const actionData = pageUpdate.form;
+
           // Check if it is an error result, sent here from formEnhance
-          if (pageUpdate.form.type == 'error') return;
+          if (actionData.type == 'error') return;
 
-          const forms = Context_findValidationForms(pageUpdate.form);
+          const forms = Context_findValidationForms(actionData);
           for (const newForm of forms) {
             //console.log('🚀~ ActionData ~ newForm:', newForm.id);
-            if (newForm.id !== _formId) continue;
+            if (newForm.id !== _formId || postedActionData.has(newForm)) {
+              continue;
+            }
+
+            // Prevent multiple "posting" that can happen when components are recreated.
+            postedActionData.add(newForm);
 
             await Form_updateFromValidation(
               newForm as SuperValidated<T, M>,

src/routes/tests/reset-component/+page.svelte

@@ -0,0 +1,15 @@
+<script>
+  import Form from './Form.svelte';
+
+  let formVisible = true;
+</script>
+
+<button on:click={() => (formVisible = !formVisible)}
+  >toggle form visibility</button
+>
+
+<h1>Main page</h1>
+
+{#if formVisible}
+  <Form />
+{/if}

src/routes/tests/reset-component/+page.ts

@@ -0,0 +1 @@
+export const ssr = false;

src/routes/tests/reset-component/Form.svelte

@@ -0,0 +1,43 @@
+<script>
+  import { superForm, superValidateSync } from '$lib/client';
+  import { z } from 'zod';
+  import { onDestroy } from 'svelte';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { page } from '$app/stores';
+  import { get } from 'svelte/store';
+
+  const schema = z.object({
+    id: z.number().min(1).max(255).default(1),
+    name: z
+      .string()
+      .min(1, 'Name must contain at least 1 character')
+      .max(255, 'Name must not exceed 255 characters')
+      .default('')
+  });
+
+  const data = superValidateSync(schema);
+
+  const { form, errors, enhance, constraints, reset } = superForm(data, {
+    SPA: true,
+    validators: schema,
+    taintedMessage: null,
+
+    onUpdate({ form }) {
+      if (form.valid) {
+        console.log('form is valid', form.data);
+        // TODO: Do something with the validated form.data
+      }
+    }
+  });
+</script>
+
+<form method="POST" class="flex flex-col h-[300px] gap-4" use:enhance>
+  <input bind:value={$form.id} {...$constraints.id} />
+  <input bind:value={$form.name} {...$constraints.name} />
+
+  <button type="submit"> submit</button>
+</form>
+
+<br />
+
+<SuperDebug data={{ $form, $errors, 'page.form': $page.form?.form }} />

src/routes/tests/reset-component/schema.ts

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+
+export const schema = z.object({
+  name: z.string().min(1)
+});