final-form / react-final-form

🏁 High performance subscription-based form state management for React
https://final-form.org/react
MIT License
7.39k stars 481 forks source link

Validation error not cleared after unmounting Field with validate #615

Open aczekajski opened 5 years ago

aczekajski commented 5 years ago

Are you submitting a bug report or a feature request?

Bug report or request for making clear in docs that doing the following is forbidden

What is the current behavior?

  1. Use the Field with the same name more then once and specify some validation on one of them
  2. Unmount only the one with validate prop on it
  3. See the validation error never being cleared nor changed even if you change the field value

On the following example you can mount and unmount Field with validate on it by using checkbox. Below the errors, valid and values of form are shown. https://codesandbox.io/embed/react-final-form-unmounting-validation-bug-doocv

What is the expected behavior?

Unmounting Field should also clear validation errors previously produced by validate on this Field.

Additional info: desired behaviour can be observed if you unmount all occurences of Field with the same name.

Sandbox Link

https://codesandbox.io/embed/react-final-form-unmounting-validation-bug-doocv

What's your environment?

As seen in CodeSandbox example: "final-form": "4.8.15", "react": "16.9.0", "react-dom": "16.9.0", "react-final-form": "6.3.0"

Run on Chrome 74, Windows.

Other information

Desired behaviour can be observed if you unmount all occurences of Field with the same name.

highflying commented 5 years ago

I have found a problem similar to this. I'm changing a field's validate function (to make it required/not required) and the old validation remained after changing the validate function, the field had to get focus before clearing out the old errors. I can confirm that I was also changing the key as per the documentation.

farshmachine commented 1 year ago

@highflying Have you tried to reach something like this? https://codesandbox.io/s/agitated-david-qzyq98?file=/src/App.tsx