When I add extraError prop in react, the form refreshes its state

[inspiring71]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.x

Current Behavior

When the extraError prop is passed to the Form component, any updates to extraError cause the library to remove all dynamically added array fields and refresh the UI components unexpectedly.

Screen.Recording.2024-10-29.at.11.19.36.AM.mov

You can find the check the example code here:
https://codesandbox.io/p/devbox/2gvwxk

Expected Behavior

I expect the fields to remain on the page and not disappear.

Steps To Reproduce

1. Pass the extraError prop to the Form component.
2. Provide a schema with an array.
3. Add a couple of array elements
4. Update the extraError value.
5. Observe that all previously added array fields are removed, and the UI refreshes.

Environment

- OS: Mac and Ubuntu
- Node: 22.2
- npm: 10.7

Anything else?

I was trying to implement this feature when face with this error:
#617 (comment)

Also, Let me thank you for all the hard works, I know it is not easy to be an OSS developer.

BTW, I am willing to fix the issue myself but as I am new to this repo, needs some pointers on where this problem is originated.

[abdalla-rko]

Hi @inspiring71, the form refreshes its state because it rerenders when you call setErrors() in blurHandler and the formData is not passed as a prop, that's why you lose that state. The formData needs to be passed as a prop so that when you rerender the form doesn't think you have cleared the formData . I have changed the code in your example to make it work, click here to see it.

[inspiring71]

Thanks @abdalla-rko , both for the tip and the attached sandbox. As you know your ways around this library better than me, I was wondering if there is any straightforward way to get the field path of an input when onBlur event is called?

I found a hack that works fine for now, but it seems like finding the field path of the element that invoked the event should be more straight forward. Any idea?

[heath-freenome]

Thanks @abdalla-rko , both for the tip and the attached sandbox. As you know your ways around this library better than me, I was wondering if there is any straightforward way to get the field path of an input when onBlur event is called?

I found a hack that works fine for now, but it seems like finding the field path of the element that invoked the event should be more straight forward. Any idea?

@inspiring71 you can use the idSeparator prop on the form to change to use a . and then you can split on . to get the field path array that you can use in lodash.

Also, all of the onBlur() callbacks should be passing in the field id as the first parameter.

[inspiring71]

Thanks for the response @heath-freenome . I will try idSeparator and I think it would simplify what I am doing drastically. I will close this issue now.