Change defaults values order in onSuccess callback of useForm

packages/react/test-app/Pages/FormHelper/Events.jsx

@@ -184,6 +184,16 @@ export default (props) => {
     form.post(page.url, callbacks())
   }
 
+  const onSuccessResetValue = () => {
+    form.post(page.url, {
+      ...callbacks({
+        onSuccess: (page) => {
+          form.reset()
+        },
+      }),
+    })
+  }
+
   const onErrorProcessing = () => {
     form.post('/form-helper/events/errors', callbacks())
   }
@@ -246,6 +256,10 @@ export default (props) => {
       <button onClick={onSuccessPromiseVisit} className="success-promise">
         onSuccess promise
       </button>
+      <button onClick={onSuccessResetValue} className="success-reset-value">
+        onSuccess resets value
+      </button>
+
 
       <button onClick={onErrorVisit} className="error">
         onError
@@ -269,6 +283,9 @@ export default (props) => {
 
       <span className="success-status">Form was {form.wasSuccessful ? '' : 'not '}successful</span>
       <span className="recently-status">Form was {form.recentlySuccessful ? '' : 'not '}recently successful</span>
+
+      <input type="text" className="name-input" value={form.data.name} onChange={e => form.setData('name', e.target.value)} />
+      <input type="checkbox" className="remember-input" checked={form.data.remember} onChange={e => form.setData('remember', e.target.value)} />
     </div>
   )
 }

packages/svelte/src/useForm.ts

@@ -195,12 +195,11 @@ export default function useForm<TForm extends FormDataType>(
           this.clearErrors()
           this.setStore('wasSuccessful', true)
           this.setStore('recentlySuccessful', true)
-          this.defaults(cloneDeep(this.data()))
           recentlySuccessfulTimeoutId = setTimeout(() => this.setStore('recentlySuccessful', false), 2000)
 
-          if (options.onSuccess) {
-            return options.onSuccess(page)
-          }
+          const onSuccess = options.onSuccess ? await options.onSuccess(page) : null
+          this.defaults(cloneDeep(this.data()))
+          return onSuccess
         },
         onError: (errors: Errors) => {
           this.setStore('processing', false)

packages/svelte/test-app/Pages/FormHelper/Events.svelte

@@ -185,6 +185,16 @@
     })
   }
 
+  const onSuccessResetValue = () => {
+    $form.post($page.url, {
+      ...callbacks({
+        onSuccess: (page) => {
+          $form.reset()
+        },
+      }),
+    })
+  }
+
   const onErrorVisit = () => {
     $form.post('/form-helper/events/errors', {
       ...callbacks({
@@ -383,6 +393,7 @@
   <button on:click|preventDefault={onSuccessProcessing} class="success-processing">onSuccess resets processing</button>
   <button on:click|preventDefault={onSuccessResetErrors} class="success-reset-errors">onSuccess resets errors</button>
   <button on:click|preventDefault={onSuccessPromiseVisit} class="success-promise">onSuccess promise</button>
+  <button on:click|preventDefault={onSuccessResetValue} class="success-reset-value">onSuccess resets value</button>
 
   <button on:click|preventDefault={onErrorVisit} class="error">onError</button>
   <button on:click|preventDefault={onErrorProgress} class="error-progress">onError progress property</button>
@@ -394,4 +405,7 @@
 
   <span class="success-status">Form was {$form.wasSuccessful ? '' : 'not '}successful</span>
   <span class="recently-status">Form was {$form.recentlySuccessful ? '' : 'not '}recently successful</span>
+
+  <input type="text" class="name-input" bind:value={$form.name} />
+  <input type="checkbox" class="remember-input" bind:checked={$form.remember} />
 </div>

packages/vue3/test-app/Pages/FormHelper/Events.vue

@@ -187,6 +187,16 @@ const onSuccessPromiseVisit = () => {
   })
 }
 
+const onSuccessResetValue = () => {
+  form.post(page.url, {
+    ...callbacks({
+      onSuccess: (page) => {
+        form.reset()
+      },
+    }),
+  })
+}
+
 const onErrorVisit = () => {
   form.post('/form-helper/events/errors', {
     ...callbacks({
@@ -386,6 +396,7 @@ const progressNoFiles = () => {
     <button @click.prevent="onSuccessProcessing" class="success-processing">onSuccess resets processing</button>
     <button @click.prevent="onSuccessResetErrors" class="success-reset-errors">onSuccess resets errors</button>
     <button @click.prevent="onSuccessPromiseVisit" class="success-promise">onSuccess promise</button>
+    <button @click.prevent="onSuccessResetValue" class="success-reset-value">onSuccess resets value</button>
 
     <button @click.prevent="onErrorVisit" class="error">onError</button>
     <button @click.prevent="onErrorProgress" class="error-progress">onError progress property</button>
@@ -397,5 +408,8 @@ const progressNoFiles = () => {
 
     <span class="success-status">Form was {{ form.wasSuccessful ? '' : 'not ' }}successful</span>
     <span class="recently-status">Form was {{ form.recentlySuccessful ? '' : 'not ' }}recently successful</span>
+
+    <input type="text" class="name-input" v-model="form.name" />
+    <input type="checkbox" class="remember-input" v-model="form.remember" />
   </div>
 </template>

tests/form-helper.spec.ts

@@ -742,6 +742,22 @@ test.describe('Form Helper', () => {
         await expect(page.locator('.success-status')).toHaveText('Form was successful')
         await expect(page.locator('.recently-status')).toHaveText('Form was not recently successful')
       })
+
+      test('resets the input value to the default value', async ({ page }) => {
+        await expect(page.locator('.name-input')).toHaveValue('foo')
+        await expect(page.locator('.remember-input')).not.toBeChecked()
+
+        await page.fill('.name-input', 'bar')
+        await page.check('.remember-input')
+
+        await expect(page.locator('.name-input')).toHaveValue('bar')
+        await expect(page.locator('.remember-input')).toBeChecked()
+
+        await clickAndWaitForResponse(page, 'onSuccess resets value', null, 'button')
+
+        await expect(page.locator('.name-input')).toHaveValue('foo')
+        await expect(page.locator('.remember-input')).not.toBeChecked()
+      })
     })
 
     test.describe('onError', () => {