The form does not reset when it contains an array of objects

[iamohd-zz]

Versions:

• @inertiajs/inertia version: 0.8.5
• @inertiajs/inertia-vue3 version: 0.3.5

Describe the problem:

The form does not reset when it contains an array of objects.

Steps to reproduce:

1. Create an instance of inertia form that has an array attribute

data() {
    return {
        form: this.$inertia.form({
              users: []
        });
    }
}

2. Then push some values into that array

this.form.users.push({id: 1, name: 'first'});

3. Then reset the form

this.form.reset();

The form will not reset and still contains the pushed items.

[reinink]

This is fixed in #575! 🙌

[bayangan]

Versions:
"@inertiajs/vue3": "^1.0.0",

same problem as issue starter. form.reset() not working on empty array. I have to manually set it to empty array again

[yoeriboven]

This problem persists on @inertiajs/vue3@1.0.9.

[reinink]

Going to reopen this one to remind myself to have another look.

In the meantime, if you're able to provide a minimal reproduction as a Git repo that would be much appreciated.

[yoeriboven]

Tried it again without the array and it has the same issue.

I replicated the issue on the form page of playground/vue3.

https://github.com/yoeriboven/inertia/tree/form-reset

Submit the form and then click the reset button. It won't work.

Our setup is a bit more complex but I hope this is the same issue.

111.mov

[reinink]

@yoeriboven great, thanks for sharing, we'll have a look at this 👍

[jessarcher]

Hey @yoeriboven,

Your scenario is a bit different to the original issue. In your case, the behaviour you're experiencing is intentional. Once the form has been submitted, the default form state is updated to the submitted state because that is typically what you'd want on an edit form, where resetting it should reset it back to the current state on the server.

There are two things you can do here.

1. If you want to automatically reset the state to the original defaults, you can use the onSuccess callback to call form.reset() before Inertia updates the defaults:

   const submit = () {
     form.post('/user', {
       onSuccess: () => form.reset(),
     })
   }

2. If you only want the reset to occur when the user presses the "Reset" button, you can pass the defaults as a callback (instead of an object) which allows you to take control what happens:

   const form = useForm(() => ({
     name: '',
     // etc...
   }))

[jessarcher]

@bayangan we were not able to replicate this with an empty array. If you can provide a minimal reproduction repository then we can take another look.

Going to close this one for now.