[Vue 3] useForm composable unexpectedly overwrites defaults after a successful form request

[shengslogar]

Version:

• @inertiajs/vue3 version: 1.0.14

Describe the problem:

useForm({}).reset() is not functional after a successful submission. This is due to the form's internal onSuccess hook setting defaults to the current form state (line 172).

While this may make sense when updating existing resources (e.g. after a PATCH /users/2 request, it would be nice to have defaults updated to any newly-saved state), this doesn't make sense for a form that creates new resources (e.g. POST /users) — i.e. there's no way to get the form back to its original state without calling form.defaults({...}) && form.reset() each time.

inertia/packages/vue3/src/useForm.ts

Lines 163 to 175 in 0fc4b1c

	onSuccess: async (page) => {
	this.processing = false
	this.progress = null
	this.clearErrors()
	this.wasSuccessful = true
	this.recentlySuccessful = true
	recentlySuccessfulTimeoutId = setTimeout(() => (this.recentlySuccessful = false), 2000)
	const onSuccess = options.onSuccess ? await options.onSuccess(page) : null
	defaults = cloneDeep(this.data())
	this.isDirty = false
	return onSuccess
	},

I was initially debating opening a discussion question, but peeking at the source code for React and Svelte, as well as looking at the expected behavior of a previous discussion question leads me to believe this is indeed a bug. Older versions of the Vue codebase also do not have this line of code.

Steps to reproduce:

1. Set up a new form

import { useForm } from '@inertiajs/vue3'

const form = useForm({ email: '' })

2. Dirty-ify form

form.email = 'foo@bar.com`

3. Submit form

form.post/patch/etc...

At this point, assuming the form request was successful, form.isDirty === false && form.email === 'foo@bar.com. form.reset() yields no changes.

Workaround:

import { useForm } from '@inertiajs/vue3'

const formDefaults = { email: '' }
const form = useForm(formDefaults)

function resetForm() {
    form.defaults(formDefaults)
    form.reset()
}