The forms initialValues cannot be updated with new data without remounting the component

[btmnk]

What package has an issue

@mantine/form

Describe the bug

Heya,

it currently is (afaict) not possible to update the initialValues with new data.
When I update the form with the new values as such:

const myNewValues = getResultOfMyRequest();
form.setValues(myNewValues);
form.resetDirty(myNewValues);

It only updates the valuesSnapshot which are used to compose the dirty states.
If I now call form.reset() it would reset the form back to the first values before the async data was set.

My use case is that in this particular case the form never gets "remounted" after submitting so the initialValues are not updated.
Another case would be that whenever we set the form values with async data the form.reset() call would result in the form being cleared instead of the values being set to their "new original" values.

The only way to do this right now would be to not use the form.reset() and manually set the values with form.setValues().
I'm not sure if it is worth it to implement a solution here but I would be willing to provide a PR.

My thoughts were to add a new callback such as form.setInitialValues() and a corresponding state which would be used in the reset calls instead. This could also be used for setting initial values with async data.

Best Regards

What version of @mantine/hooks page do you have in package.json?

6.0.16

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/agitated-cray-49fq3g?file=/src/App.tsx

Do you know how to fix the issue

Yes

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

My thoughts were to add a new callback such as form.setInitialValues() and a corresponding state which would be used in the reset calls instead. This could also be used for setting initial values with async data.

[rtivital]

I do not see a reason to add this – you can update form state with form.setValues.

[btmnk]

I agree, though the advantage I see is that you wouldn't need to always do both form.setValues and form.resetDirty to update your forms initial state and you would still be able to use form.reset in these cases which seems to me to be semantically more correct. But I see that there is no functional advantage over the current implementation as it can still be done.

If this is no issue for anyone else but me I'm fine with closing the issue.

[Merott]

Here's a scenario where it makes sense to update the initial values:

1. Form mounts
2. The user makes changes
3. The user submits the form
4. The changes are saved, but the form remains mounted
5. The user makes additional changes, but they reset the form instead of submitting
6. The form should reset to the latest saved state

I've created my own wrapper around useForm to support this scenario, but it would be nice if Mantine supported it out of the box. At the very least, a parameterised reset function would make it clearer and more explicit what data will be used for the reset.

Here's my wrapper:

import { useForm as useMantineForm } from '@mantine/form'
import type { UseFormInput, _TransformValues } from '@mantine/form/lib/types'
import { useCallback, useRef } from 'react'

export function useForm<
  Values = Record<string, unknown>,
  TransformValues extends _TransformValues<Values> = (values: Values) => Values,
>(options: UseFormInput<Values, TransformValues>) {
  // use a ref only to avoid *entirely* ignoring react-hooks/exhaustive-deps
  const unstableForm = useMantineForm(options)
  const form = useRef(unstableForm)
  form.current = unstableForm

  // use a ref to make sure we're always referencing the latest initialValues
  const initialValues = useRef(options?.initialValues)
  initialValues.current = options?.initialValues

  return {
    ...form.current,

    reset: useCallback((withLatestInitialValues?: boolean) => {
      form.current.reset()

      if (withLatestInitialValues && initialValues.current) {
        form.current.setValues(initialValues.current)
        form.current.clearErrors()
        form.current.resetDirty()
        form.current.resetTouched()
      }
    }, []),
  }
}

[yildirim2189]

I have same request. After saving changes on form, if request is failed, need to reset form and take back changes to latest successful update. Yes, I can use setValues() each time, but in some cases, i want to trigger reset from different components and it's becoming inconvenient, brings complexity. Thanks.

[eraoul]

Same here. Has this been changed in the past 1.5 years or does this require manual work to update the form state? I assumed form.reset() would handle this sort of thing out of the box. Merott's scenario above is just what I noticed, my first time trying use-form.