mantinedev/mantine

array form value changes into object after setting with onChange

Closed this issue · 1 comments

Dependencies check up

  • I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.15.2

What package has an issue?

@mantine/form

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Not applicable – issue is not related to the browser

Describe the bug

I am using the mantine form. I am trying to handle an array as a form value.
when I assign the onChange function from getInputProps with the path name as below, the type of form.values is changed into object from array.

 const form = useForm({
         initialValues: [{serialCode: 'test'}, {serialCode: 'text2}]
    });

return form.values.map((value, index) => (
<TextInput ...form.getInputProps(`${index}.serialCode`}>
))

so after the onChange function, the error comes up because form.values is not an array anymore.
but if I use an object with array value as below, it works fine.

 const form = useForm({
         initialValues: {
            data: [{serialCode: 'test'}, {serialCode: 'text2}]
        },
    });

return form.values.data.map((value, index) => (
<TextInput ...form.getInputProps(`${index}.serialCode`}>
))

if I am using the path to get props in a wrong way, please let me know.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

  • I would be willing to implement a fix for this issue

Array as form value is not supported, use nested data property like in your example.