Timers weren't starting until after onSubmit.

Fixes #284

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).
 
+## [Unreleased]
+
+### Fixed
+
+- Timers weren't starting until after `onSubmit`, allowing multiple form submissions on longer async operations. ([#284](https://github.com/ciscoheat/sveltekit-superforms/issues/284))
+
 ## [1.10.0] - 2023-11-07
 
 ### Added

src/lib/client/formEnhance.ts

@@ -254,21 +254,25 @@ export function formEnhance<T extends AnyZodObject, M>(
   let currentRequest: AbortController | null;
 
   return enhance(formEl, async (submit) => {
-    const submitCancel = submit.cancel;
+    const _submitCancel = submit.cancel;
 
     let cancelled = false;
-    function cancel() {
+    function cancel(resetTimers = true) {
       cancelled = true;
-      return submitCancel();
+      if (resetTimers && htmlForm.isSubmitting()) {
+        htmlForm.completed(true);
+      }
+      return _submitCancel();
     }
     submit.cancel = cancel;
 
     if (htmlForm.isSubmitting() && options.multipleSubmits == 'prevent') {
-      cancel();
+      cancel(false);
     } else {
       if (htmlForm.isSubmitting() && options.multipleSubmits == 'abort') {
         if (currentRequest) currentRequest.abort();
       }
+      htmlForm.submitting();
       currentRequest = submit.controller;
 
       for (const event of formEvents.onSubmit) {
@@ -328,8 +332,6 @@ export function formEnhance<T extends AnyZodObject, M>(
           options.flashMessage.module.getFlash(page).set(undefined);
         }
 
-        htmlForm.submitting();
-
         // Deprecation fix
         const submitData =
           'formData' in submit

src/routes/tests/redirect-same-route/+page.svelte

@@ -2,15 +2,17 @@
   import { superForm } from '$lib/client';
   import type { PageData } from './$types';
   import SuperDebug from '$lib/client/SuperDebug.svelte';
-  import { schema } from './schema';
 
   export let data: PageData;
 
+  let shouldCancel = false;
+
   const { form, errors, tainted, message, enhance, submitting } = superForm(
     data.form,
     {
-      //dataType: 'json',
-      //validators: schema
+      onSubmit({ cancel }) {
+        if (shouldCancel) cancel();
+      }
     }
   );
 </script>
@@ -28,17 +30,31 @@
     <button>Submit</button>
     {#if $submitting}
       <svg
-        xmlns="http://www.w3.org/2000/svg"
         width="24"
         height="24"
         viewBox="0 0 24 24"
-        ><path
-          fill="currentColor"
-          d="M12 21a9 9 0 1 1 6.18-15.55a.75.75 0 0 1 0 1.06a.74.74 0 0 1-1.06 0A7.51 7.51 0 1 0 19.5 12a.75.75 0 0 1 1.5 0a9 9 0 0 1-9 9Z"
+        xmlns="http://www.w3.org/2000/svg"
+        ><style>
+          .spinner_ajPY {
+            transform-origin: center;
+            animation: spinner_AtaB 0.75s infinite linear;
+          }
+          @keyframes spinner_AtaB {
+            100% {
+              transform: rotate(360deg);
+            }
+          }
+        </style><path
+          d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+          opacity=".25"
+        /><path
+          d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+          class="spinner_ajPY"
         /></svg
       >
     {/if}
   </div>
+  <input type="checkbox" bind:checked={shouldCancel} /> Cancel submit
 </form>
 
 <style lang="scss">