Issue / Question regarding how useForm initialState is handled

[Aram1d]

What package has an issue

@mantine/form

Describe the bug

I have a component showing 2 informations (They are passed with props). Since it's so small, I decided to incorporate an edit modal and handle the two fields state with useForm Hook.

useForm only take in account initialValues at first call, then place the values in a React ref. This leads to a bug after my 2 informations are changed a first time: For the second edition, form will be dirty without changes, and even worse, the dirty flag will be false if you bring back the values which were present BEFORE the first Edition.

I wrote a reproduction app on CodeSandbox: sandbox here

Reproduction step:

• Click edit, change the name and first name, (Ex: Mikhail Gourevitch), validate changes
• Click edit again, and bring back the exact name and first name which was here first: Mikoïan, Artem
• The form will be dirty before the changes, and not dirty after.

Are initialValues placed into a react ref on purpose? Is there any reason?

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

5.3.0

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

https://codesandbox.io/s/mantine-useform-issue-z4350f?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

As we have to make a deep equal comparison between actual state and initial state I wonder why we can't update the initialState if the value passed to the hook call changes? Whats the interest of placing it into a react ref?

[rtivital]

Call form.resetDirty when your form is submitted – https://codesandbox.io/s/mantine-useform-issue-forked-fcsvl8?file=/src/App.tsx

[Aram1d]

Hi @rtivital For me this looks not satisfying.

Let me explain more context:
I have several live-queries in the app and the data object they return can change. As I use useForm in a Modal, the component having useForm is never unmounted.

Actually your implementation require that I do the following into a useEffect to have the complete useForm state reset :

• setValues(myNewValues)
• resetDirty()
• clearErrors().

some thoughts:
We can pass initialValues as a dependency of the useCallback generating your reset fn, then calling form.reset will setup useForm inner state as if it was first-called.

I understand this break the immutable identity reset fn has now. This is a weakness of React we can patch with using a ref and useLayoutEffect see this Thread if you want to keep the constant identity of reset.

[RedFour]

Just ran into this issue as well. If my form's initialValues are set to props that eventually defined, the initialValues will remain undefined.

[reza-ebrahimi]

Just ran into this issue as well. If my form's initialValues are set to props that eventually defined, the initialValues will remain undefined.

@RedFour Instead of passing any props to initial values, just left them empty, and use form.setValues in useEffect hook to fill/update the form.

Example from: https://mantine.dev/form/recipes/

  useEffect(() => {
    const storedValue = window.localStorage.getItem('user-form');
    if (storedValue) {
      try {
        form.setValues(JSON.parse(window.localStorage.getItem('user-form')));
      } catch (e) {
        console.log('Failed to parse stored value');
      }
    }
  }, []);