[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.

https://github.com/inertiajs/inertia/blob/0fc4b1c8b91639ed58b44fafe8833f2108496de6/packages/vue3/src/useForm.ts#L163-L175

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 = '[email protected]`

3. Submit form

form.post/patch/etc...

At this point, assuming the form request was successful, form.isDirty === false && form.email === '[email protected]. 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()
}

[WillRy]

Hello everyone,

I came across the same problem today, it really seems like a bug

[khaines0625]

This is a bug. A fix would be appreciated!