Removed accidental optional argument from errors.clear

Author: ciscoheat

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - `onUpdate` didn't cancel `applyAction` and `invalidateAll`.
 - Hopefully fixed excessively deep infinity type instantiation on `message` helper.
+- Removed `errors.clear` optional parameter `undefinePath`, which was left there by mistake.
 
 ### Added
 

src/lib/client/index.ts

@@ -251,7 +251,7 @@ export type SuperForm<T extends ZodValidation<AnyZodObject>, M = any> = {
   };
   formId: Writable<string | undefined>;
   errors: Writable<Validation<T, M>['errors']> & {
-    clear: (undefinePath?: string[]) => void;
+    clear: () => void;
   };
   constraints: Writable<Validation<T, M>['constraints']>;
   message: Writable<Validation<T, M>['message']>;
@@ -578,17 +578,11 @@ export function superForm<
      * To work with client-side validation, errors cannot be deleted but must
      * be set to undefined, to know where they existed before (tainted+error check in oninput)
      */
-    clear: (undefinePath?: string[]) => {
-      _errors.update(($errors) => {
-        traversePaths($errors, (pathData) => {
-          if (Array.isArray(pathData.value)) {
-            return pathData.set(undefined);
-          }
-        });
-        if (undefinePath) setPaths($errors, [undefinePath], undefined);
-        return $errors;
-      });
-    }
+    clear: () =>
+      clearErrors(_errors, {
+        undefinePath: null,
+        clearFormLevelErrors: true
+      })
   };
 
   const Tainted = writable<TaintedFields<T2> | undefined>();
@@ -948,6 +942,34 @@ function shouldSyncFlash<T extends AnyZodObject, M>(
   return options.syncFlashMessage;
 }
 
+function clearErrors<T extends AnyZodObject>(
+  Errors: Writable<ValidationErrors<T>>,
+  options: {
+    undefinePath: string[] | null;
+    clearFormLevelErrors: boolean;
+  }
+) {
+  Errors.update(($errors) => {
+    traversePaths($errors, (pathData) => {
+      if (
+        pathData.path.length == 1 &&
+        pathData.path[0] == '_errors' &&
+        !options.clearFormLevelErrors
+      ) {
+        return;
+      }
+      if (Array.isArray(pathData.value)) {
+        return pathData.set(undefined);
+      }
+    });
+
+    if (options.undefinePath)
+      setPaths($errors, [options.undefinePath], undefined);
+
+    return $errors;
+  });
+}
+
 const effectMapCache = new WeakMap<object, boolean>();
 
 // @DCI-context
@@ -1022,8 +1044,10 @@ async function validateField<T extends AnyZodObject, M>(
     return get(Errors);
   }
 
-  function Errors_clear(undefinePath: string[]) {
-    Errors.clear(undefinePath);
+  function Errors_clear(
+    options: NonNullable<Parameters<typeof clearErrors>[1]>
+  ) {
+    return clearErrors(Errors, options);
   }
 
   function Errors_set(newErrors: ValidationErrors<UnwrapEffects<T>>) {
@@ -1195,7 +1219,7 @@ async function validateField<T extends AnyZodObject, M>(
       // We validated the whole data structure, so clear all errors on success
       // but also set the current path to undefined, so it will be used in the tainted+error
       // check in oninput.
-      Errors_clear(path);
+      Errors_clear({ undefinePath: path, clearFormLevelErrors: false });
       return undefined;
     }
   } else {

src/routes/tests/issue-142/+page.server.ts

@@ -0,0 +1,38 @@
+import { setError, superValidate } from '$lib/server';
+import type { Validation } from '$lib/index';
+import { fail } from '@sveltejs/kit';
+import { schema } from './schema';
+
+export const load = async () => {
+  const form = await superValidate(schema);
+  return { form };
+};
+
+///// Form actions //////////////////////////////////////////////////
+
+function stripPassword(form: Validation<typeof schema>) {
+  // comment out password clearing and form error works again
+  form.data.password = '';
+  form.data.confirmedPassword = '';
+  return form;
+}
+
+export const actions = {
+  default: async ({ request }) => {
+    const formData = await request.formData();
+    const form = await superValidate(formData, schema);
+    console.log('🚀 ~ file: +page.server.ts:24 ~ default: ~ form:', form);
+
+    if (!form.valid) return fail(400, { form: stripPassword(form) });
+
+    if (form.data.name === 'form') {
+      return setError(
+        stripPassword(form),
+        null,
+        'This is a sticky form error and it stays until the form gets submitted again'
+      );
+    }
+
+    return { form: stripPassword(form) };
+  }
+};

src/routes/tests/issue-142/+page.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { superForm } from '$lib/client';
+  import SuperDebug from '$lib/client/SuperDebug.svelte';
+  import { schema } from './schema';
+  import type { PageData } from './$types';
+
+  export let data: PageData;
+
+  const { form, errors, tainted, enhance } = superForm(data.form, {
+    validators: schema
+  });
+</script>
+
+<h3>Superforms bug reporting</h3>
+
+<SuperDebug data={{ $form, $errors, $tainted }} />
+
+<form method="POST" use:enhance>
+  <label>
+    Name (type 'form' to trigger form error)<br />
+    <input name="name" data-invalid={$errors.name} bind:value={$form.name} />
+    {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
+  </label>
+  <label>
+    Password<br />
+    <input
+      name="password"
+      data-invalid={$errors.password}
+      bind:value={$form.password}
+    />
+    {#if $errors.password}<span class="invalid">{$errors.password}</span
+      >{/if}
+  </label>
+  <label>
+    Confirm password<br />
+    <input
+      name="confirmedPassword"
+      data-invalid={$errors.confirmedPassword}
+      bind:value={$form.confirmedPassword}
+    />
+    {#if $errors.confirmedPassword}<span class="invalid"
+        >{$errors.confirmedPassword}</span
+      >{/if}
+  </label>
+  <div>
+    Form error here:
+    {#if $errors._errors}<span class="invalid">{$errors._errors}</span>{/if}
+  </div>
+  <button>Submit</button>
+</form>
+
+<hr />
+<p>
+  To make the bug hunting as easy as possible, fork this project and create a
+  MRE, then link to it on the <a
+    href="https://github.com/ciscoheat/sveltekit-superforms/issues"
+    >Superforms issue page</a
+  >.
+</p>
+
+<style>
+  .invalid {
+    color: red;
+  }
+
+  input {
+    background-color: #ddd;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  hr {
+    margin-top: 4rem;
+  }
+</style>

src/routes/tests/issue-142/schema.ts

@@ -0,0 +1,18 @@
+import { z } from 'zod';
+
+export const schema = z
+  .object({
+    name: z.string().min(1).default('form'),
+    password: z.string().min(8).default('123123123'),
+    confirmedPassword: z.string().default('123123123')
+  })
+  // comment out superRefine and form error works again
+  .superRefine(({ confirmedPassword, password }, ctx) => {
+    if (confirmedPassword !== password) {
+      ctx.addIssue({
+        code: 'custom',
+        message: 'Passwords must match',
+        path: ['confirmedPassword']
+      });
+    }
+  });