Change defaults values order in onSuccess callback of useForm

[yilanboy]

I found a weird issue in Svelte useForm.

The $form.reset() in onSuccess callback won't work, but in onErrorcallback, it works just fine.

const form = useForm({
  current_password: "",
  password: "",
  password_confirmation: "",
});

// type the new password and submit
// I think the $form.reset() will reset all the input to empty string
// but it doesn't

$form.put(route('password.update'), {
  preserveScroll: true,
  // reset in onSuccess won't work
  onSuccess: () => $form.reset(),
  onError: (errors: any) => {
     // reset in onError callback is work
     $form.reset()
  },
});

After diving into the codebase, I found the task order in Svelte onSuccess is a little different with Vue version.

In the Vue onSuccess, the user's callback will execute before defaults = cloneDeep(this.data()), so the user can use form.reset() to reset the form values, then set the form values as the default values.

// inertia/packages/vue3/src/useForm.ts

const onSuccess = options.onSuccess ? await options.onSuccess(page) : null
defaults = cloneDeep(this.data())

But in the Svelte onSuccess, the user's callback will execute after this.defaults(cloneDeep(this.data())).

// inertia/packages/svelte/src/useForm.ts

this.defaults(cloneDeep(this.data()))

// ...

if (options.onSuccess) {
  return options.onSuccess(page)
}

I think this is the issue, because this.defaults() has already changed the value to user type before, $form.reset() does not set form values to the empty string. I think this may not be what the user expects.

So I just change the task order below.

// inertia/packages/svelte/src/useForm.ts

let onSuccess = null

if (options.onSuccess) {
  onSuccess = options.onSuccess(page)
}

// call defaults function after user's callback
this.defaults(cloneDeep(this.data()))

return onSuccess

[pascalbaljet]

Thanks, makes sense! Could you please add a test for it? (in the test.describe('onSuccess') section)

[yilanboy]

I added the tests to all the adapters. Please help me check the test code. Thanks!

The tests folder structure is super clear, even if a frontend newbie like me can understand how to write the tests.
Thanks for the contributing guide. 👍

[pascalbaljet]

Great! Thank you!