There is no way to clear `extraErrors` state from a `Form`

[TheOneTheOnlyJJ]

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.24.7

Current Behavior

This was discovered along with #4553.

I have the extraErrors state:

const [extraErrors, setExtraErrors] = useState<ErrorSchema<IUserDataBoxConfigCreateInput> | undefined>(undefined);

which I set through this call:

setExtraErrors(
                (prevExtraErrors: ErrorSchema<IUserDataBoxConfigCreateInput> | undefined): ErrorSchema<IUserDataBoxConfigCreateInput> | undefined => {
                  const NEW_ERROR = "Could not get username availability.";
                  if (prevExtraErrors === undefined) {
                    return {
                      name: {
                        __errors: [NEW_ERROR]
                      } satisfies FieldErrors
                    } satisfies ErrorSchema<IUserDataBoxConfigCreateInput>;
                  }
                  return {
                    ...prevExtraErrors,
                    name: {
                      __errors: prevExtraErrors.name?.__errors === undefined ? [NEW_ERROR] : [...prevExtraErrors.name.__errors, NEW_ERROR]
                    } satisfies FieldErrors
                  } satisfies ErrorSchema<IUserDataBoxConfigCreateInput>;
                }
              );

in the Form's onSubmit in a Promise resolve handler, which works fine, but then when I change the form data and/or submit again (I tried both), I want the previous extra error to "go away".

I tried having the onChange Form handler call both

setExtraErrors(undefined);

and

setExtraErrors({ name: { __errors: [] } });

Neither call removed the existing error from that name field.
Then I tried calling the same setState calls in onSubmit as the first thing before any additional async validation was performed. It had no effect there, either.

I then tried setting the specific error field's __errors key to undefined, as the FieldError type allows it with this setState call:

setExtraErrors({ name: { __errors: undefined } });

and I got this error:

Unexpected Application Error!
Cannot read properties of undefined (reading 'map')
TypeError: Cannot read properties of undefined (reading 'map')
    at toErrorList (http://localhost:5173/@fs/C:/Users/Andrei/Desktop/BlackBox/node_modules/.vite/deps/chunk-MRT2QTA2.js?v=19f182d2:9768:58)
    at http://localhost:5173/@fs/C:/Users/Andrei/Desktop/BlackBox/node_modules/.vite/deps/chunk-MRT2QTA2.js?v=19f182d2:9781:26
    at Array.reduce (<anonymous>)
    at toErrorList (http://localhost:5173/@fs/C:/Users/Andrei/Desktop/BlackBox/node_modules/.vite/deps/chunk-MRT2QTA2.js?v=19f182d2:9777:35)
    at validationDataMerge (http://localhost:5173/@fs/C:/Users/Andrei/Desktop/BlackBox/node_modules/.vite/deps/chunk-MRT2QTA2.js?v=19f182d2:9855:16)
    at Form.getStateFromProps (http://localhost:5173/@fs/C:/Users/Andrei/Desktop/BlackBox/node_modules/.vite/deps/chunk-RHIK6ZNR.js?v=19f182d2:2761:22)
    at Form.getSnapshotBeforeUpdate (http://localhost:5173/@fs/C:/Users/Andrei/Desktop/BlackBox/node_modules/.vite/deps/chunk-RHIK6ZNR.js?v=19f182d2:2653:30)
    at commitBeforeMutationEffectsOnFiber (http://localhost:5173/@fs/C:/Users/Andrei/Desktop/BlackBox/node_modules/.vite/deps/chunk-QT63QQJV.js?v=19f182d2:16821:43)
    at commitBeforeMutationEffects_complete (http://localhost:5173/@fs/C:/Users/Andrei/Desktop/BlackBox/node_modules/.vite/deps/chunk-QT63QQJV.js?v=19f182d2:16781:15)
    at commitBeforeMutationEffects_begin (http://localhost:5173/@fs/C:/Users/Andrei/Desktop/BlackBox/node_modules/.vite/deps/chunk-QT63QQJV.js?v=19f182d2:16772:15)

Expected Behavior

I expect the errors to get removed from their field when the entire ErrorSchema is set to undefined or when the specific field's __errors key is set to an empty list, or undefined.

Steps To Reproduce

No response

Environment

Anything else?

No response

[TheOneTheOnlyJJ]

Update: Even using the updated approach that got around the initial #4553, the issue persists.

[TheOneTheOnlyJJ]

Update 2: This actually works as expected.

I was using the external submission feature and also externally validating the form from the same place, only calling submit conditionally if the form data was valid. The reason my custom errors were not getting removed was that if the form data was invalid, the submit would not get called on the ref, thus not running the setExtraErrors([]) call.