Fix 4796 by simplifying Form onChange error processing (#4799)

* Fix 4796 by simplifying Form onChange error processing
Fixes #4796 by simplifying `Form.onChange` error processing and removing old code in `LayoutGridField`
- In `@rjsf/utils`
  - Updated `validationDataMerge()` to add an additional, optional parameter `preventDuplicates = false`, that causes the `mergeObjects()` call to receive `preventDuplicates` instead of `true`
- In `@rjsf/core`, updated `Form` as follows to fix [#4796](#4796)
  - Refactored the `liveValidate()` and `mergeErrors()` functions out of `getStateFromProp()` and `processPendingChange()`
  - Added new, optional `customErrors?: ErrorSchemaBuilder<T>` to the `FormState`, updating the `IChangeEvent` interface to remove all of the private variables
  - Reworked the `newErrorSchema` handling in `processPendingChange()` to simplify the handling since `newErrorSchema` is now path-specific, adding `newErrorSchema` to `customErrors` when they don't match an existing validator-based validation
    - This rework resulted in any custom errors passed from custom widgets/fields will now be remembered during the validation stage
  - Removed the now unused `getPreviousCustomValidateErrors()` and `filterErrorsBasedOnSchema()` methods
  - Also, updated `LayoutGridField` to simplify `onFieldChange()` to just return the given `errorSchema` now that it is path-specific, fixing [#4796](#4796)
  - Also, updated `NullField` to pass `fieldPathId.path` for the `onChange()` instead of `[name]`
  - Updated the tests for `StringField`, `ArrayField` and `ObjectField` to verify all of the new error processing logic in `onChange()`
- Updated `utility-functions.md` to update the `validationDataMerge()` function's new parameter
- Updated `custom-widgets-fields.md` to change the documentation around passing errors via `onChange()` to reflect the new reality
- Updated the `CHANGELOG.md` accordingly

# Conflicts:
#	CHANGELOG.md

* - Updated `v6.x upgrade guide.md` to document the changes mentioned above

* - Updated `CHANGELOG.md` to merge a few comments

* - More `CHANGELOG.md` changes

* Update packages/docs/docs/migration-guides/v6.x upgrade guide.md

Co-authored-by: Nick Grosenbacher <[email protected]>

---------

Co-authored-by: Nick Grosenbacher <[email protected]>

Author: heath-freenome

CHANGELOG.md

@@ -37,6 +37,14 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated `ArrayField` and `ObjectField` to check whether it `shouldRenderOptionalData()` and if true, calls `ObjectDataControlsField` and passes the result to its associated render template as `optionalDataControl`
 - Updated `ArrayFieldTemplate`, `ObjectFieldTemplate`, `TitleField` to add support for the new `optionalDataControl` feature
   - Added the new `OptionalDataControlTemplate` to the theme, adding it to the `templates` list
+- Updated `Form` as follows to fix [#4796](https://github.com/rjsf-team/react-jsonschema-form/issues/4796)
+    - Refactored the `liveValidate()` and `mergeErrors()` functions out of `getStateFromProp()` and `processPendingChange()`
+    - Added new, optional `customErrors?: ErrorSchemaBuilder<T>` to the `FormState`, updating the `IChangeEvent` interface to remove all of the private variables
+    - Reworked the `newErrorSchema` handling in `processPendingChange()` to simplify the handling since `newErrorSchema` is now path-specific, adding `newErrorSchema` to `customErrors` when they don't match an existing validator-based validation
+        - This rework resulted in any custom errors passed from custom widgets/fields will now be remembered during the validation stage
+    - Removed the now unused `getPreviousCustomValidateErrors()` and `filterErrorsBasedOnSchema()` methods
+- Updated `LayoutGridField` to simplify `onFieldChange()` to just return the given `errorSchema` now that it is path-specific, fixing [#4796](https://github.com/rjsf-team/react-jsonschema-form/issues/4796)
+- Updated `NullField` to pass `fieldPathId.path` for the `onChange()` instead of `[name]`
 
 ## @rjsf/daisyui
 
@@ -99,16 +107,18 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated `getDefaultFormState` to fix an issue where optional array props had their default set to an empty array when they shouldn't be
 - Updated the `TranslatableString` enum to add three new strings in support of the new feature: `OptionalObjectAdd`, `OptionalObjectRemove` and `OptionalObjectEmptyMsg`
 - Added four new utility functions: `isFormDataAvailable()`, `isRootSchema()`, `optionalControlsId()`, and `shouldRenderOptionalField()`
+- Updated `validationDataMerge()` to add an additional, optional parameter `preventDuplicates = false`, that causes the `mergeObjects()` call to receive `preventDuplicates` instead of `true`
 
 ## Dev / docs / playground
 
 - Updated docs for `getDefaultFormState` to reflect addition of the `initialDefaultsGenerated` prop
-- Updated `utility-function.me` docs to add documentation for the new functions
+- Updated `utility-function.me` docs to add documentation for the new functions and to update the `validationDataMerge()` function's new parameter
   - Also updated docs for `retrieveSchema` and `SchemaUtilsType` for the new prop
 - Updated `uiSchema.md` to add documentation for the new `enableOptionalDataFieldForType` prop
-- Updated the `v6x upgrade guide.md` to document the new feature and utility functions and changes to `retrieveSchema`
 - Updated the playground to add a new `Optional Data Controls` example
 - Updated the snapshot and jest tests for `Form` to test the new `Optional Data Controls` feature
+- Updated `custom-widgets-fields.md` to change the documentation around passing errors via `onChange()` to reflect the new reality
+- Updated the `v6x upgrade guide.md` to document the new feature, utility functions and changes to existing method parameters
 
 # 6.0.0-beta-20
 

packages/core/src/components/Form.tsx

@@ -26,7 +26,6 @@ import {
   UiSchema,
   ITEMS_KEY,
 } from '@rjsf/utils';
-import cloneDeep from 'lodash/cloneDeep';
 import each from 'lodash/each';
 import flatten from 'lodash/flatten';
 import get from 'lodash/get';
@@ -705,13 +704,8 @@ export default class LayoutGridField<
    */
   onFieldChange = (dottedPath: string) => {
     return (value: T | undefined, path: FieldPathList, errSchema?: ErrorSchema<T>, id?: string) => {
-      const { onChange, errorSchema } = this.props;
-      let newErrorSchema = errorSchema;
-      if (errSchema && errorSchema) {
-        newErrorSchema = cloneDeep(errorSchema);
-        set(newErrorSchema, dottedPath, errSchema);
-      }
-      onChange(value, path, newErrorSchema, id);
+      const { onChange } = this.props;
+      onChange(value, path, errSchema, id);
     };
   };
 

packages/core/src/components/fields/LayoutGridField.tsx

@@ -9,12 +9,12 @@ import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf
 function NullField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: FieldProps<T, S, F>,
 ) {
-  const { name, formData, onChange } = props;
+  const { formData, onChange, fieldPathId } = props;
   useEffect(() => {
     if (formData === undefined) {
-      onChange(null as unknown as T, [name]);
+      onChange(null as unknown as T, fieldPathId.path);
     }
-  }, [name, formData, onChange]);
+  }, [fieldPathId, formData, onChange]);
 
   return null;
 }

packages/core/src/components/fields/NullField.tsx

@@ -3337,6 +3337,38 @@ describe('ArrayField', () => {
       expect(errorMessages).to.have.length(0);
     });
 
+    it('should clear an error if value is entered correctly', () => {
+      const { node } = createFormComponent({
+        schema,
+        formData: [
+          {
+            text: 'y',
+          },
+        ],
+        templates,
+        fields: {
+          ArrayField: ArrayFieldTest,
+        },
+      });
+
+      const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]');
+      act(() => {
+        fireEvent.change(inputs[0], { target: { value: 'test' } });
+      });
+
+      let errorMessages = node.querySelectorAll('#root_0_text__error');
+      expect(errorMessages).to.have.length(1);
+      const errorMessageContent = node.querySelector('#root_0_text__error .text-danger').textContent;
+      expect(errorMessageContent).to.contain('Value must be "Appie"');
+
+      act(() => {
+        fireEvent.change(inputs[0], { target: { value: 'Appie' } });
+      });
+
+      errorMessages = node.querySelectorAll('#root_0_text__error');
+      expect(errorMessages).to.have.length(0);
+    });
+
     it('raise an error and check if the error is displayed using custom text widget', () => {
       const { node } = createFormComponent({
         schema,
@@ -3384,6 +3416,38 @@ describe('ArrayField', () => {
       const errorMessages = node.querySelectorAll('#root_0_text__error');
       expect(errorMessages).to.have.length(0);
     });
+
+    it('should clear an error if value is entered correctly using custom text widget', () => {
+      const { node } = createFormComponent({
+        schema,
+        formData: [
+          {
+            text: 'y',
+          },
+        ],
+        templates,
+        widgets: {
+          TextWidget: TextWidgetTest,
+        },
+      });
+
+      const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]');
+      act(() => {
+        fireEvent.change(inputs[0], { target: { value: 'hello' } });
+      });
+
+      let errorMessages = node.querySelectorAll('#root_0_text__error');
+      expect(errorMessages).to.have.length(1);
+      const errorMessageContent = node.querySelector('#root_0_text__error .text-danger').textContent;
+      expect(errorMessageContent).to.contain('Value must be "test"');
+
+      act(() => {
+        fireEvent.change(inputs[0], { target: { value: 'test' } });
+      });
+
+      errorMessages = node.querySelectorAll('#root_0_text__error');
+      expect(errorMessages).to.have.length(0);
+    });
   });
 
   describe('Dynamic uiSchema.items function', () => {

packages/core/test/ArrayField.test.jsx

@@ -1448,7 +1448,7 @@ describe('LayoutGridField', () => {
     expect(props.onFocus).toHaveBeenCalledWith(fieldId, '');
     // Type to trigger the onChange
     await userEvent.type(input, 'foo');
-    expect(props.onChange).toHaveBeenCalledWith('foo', fieldPathId.path, props.errorSchema, fieldId);
+    expect(props.onChange).toHaveBeenCalledWith('foo', fieldPathId.path, undefined, fieldId);
     // Tab out of the input field to cause the blur
     await userEvent.tab();
     expect(props.onBlur).toHaveBeenCalledWith(fieldId, 'foo');
@@ -1474,7 +1474,7 @@ describe('LayoutGridField', () => {
     expect(props.onFocus).toHaveBeenCalledWith(fieldId, '');
     // Type to trigger the onChange
     await userEvent.type(input, 'foo');
-    expect(props.onChange).toHaveBeenCalledWith('foo', fieldPathId.path, props.errorSchema, fieldId);
+    expect(props.onChange).toHaveBeenCalledWith('foo', fieldPathId.path, undefined, fieldId);
     // Tab out of the input field to cause the blur
     await userEvent.tab();
     expect(props.onBlur).toHaveBeenCalledWith(fieldId, 'foo');
@@ -1500,7 +1500,7 @@ describe('LayoutGridField', () => {
     expect(props.onFocus).toHaveBeenCalledWith(fieldId, '');
     // Type to trigger the onChange
     await userEvent.type(input, 'foo');
-    expect(props.onChange).toHaveBeenCalledWith('foo', fieldPathId.path, props.errorSchema, fieldId);
+    expect(props.onChange).toHaveBeenCalledWith('foo', fieldPathId.path, undefined, fieldId);
     // Tab out of the input field to cause the blur
     await userEvent.tab();
     expect(props.onBlur).toHaveBeenCalledWith(fieldId, 'foo');
@@ -1654,8 +1654,7 @@ describe('LayoutGridField', () => {
     const input = within(fields[0]).getByRole('textbox');
     expect(input).toHaveValue(props.formData[fieldName]);
     await userEvent.type(input, '!');
-    const expectedErrors = new ErrorSchemaBuilder().addErrors(ERRORS, fieldName).ErrorSchema;
-    expect(props.onChange).toHaveBeenCalledWith('foo!', fieldPathId.path, expectedErrors, fieldId);
+    expect(props.onChange).toHaveBeenCalledWith('foo!', fieldPathId.path, EXTRA_ERROR, fieldId);
   });
   test('renderCondition, condition fails, field and null value, NONE operator, no data', () => {
     const gridProps = { operator: Operators.NONE, field: 'simpleString', value: null };

packages/core/test/LayoutGridField.test.tsx

@@ -376,6 +376,32 @@ describe('ObjectField', () => {
       expect(errorMessages).to.have.length(0);
     });
 
+    it('should clear an error if value is entered correctly', () => {
+      const { node } = createFormComponent({
+        schema,
+        fields: {
+          ObjectField: ObjectFieldTest,
+        },
+      });
+
+      const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]');
+      act(() => {
+        fireEvent.change(inputs[0], { target: { value: 'hello' } });
+      });
+
+      let errorMessages = node.querySelectorAll('#root_foo__error');
+      expect(errorMessages).to.have.length(1);
+      const errorMessageContent = node.querySelector('#root_foo__error .text-danger').textContent;
+      expect(errorMessageContent).to.contain('Value must be "test"');
+
+      act(() => {
+        fireEvent.change(inputs[0], { target: { value: 'test' } });
+      });
+
+      errorMessages = node.querySelectorAll('#root_foo__error');
+      expect(errorMessages).to.have.length(0);
+    });
+
     it('raise an error and check if the error is displayed using custom text widget', () => {
       const { node } = createFormComponent({
         schema,
@@ -411,6 +437,31 @@ describe('ObjectField', () => {
       const errorMessages = node.querySelectorAll('#root_foo__error');
       expect(errorMessages).to.have.length(0);
     });
+
+    it('should clear an error if value is entered correctly using custom text widget', () => {
+      const { node } = createFormComponent({
+        schema,
+        widgets: {
+          TextWidget: TextWidgetTest,
+        },
+      });
+
+      const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]');
+      act(() => {
+        fireEvent.change(inputs[0], { target: { value: 'hello' } });
+      });
+
+      let errorMessages = node.querySelectorAll('#root_foo__error');
+      expect(errorMessages).to.have.length(1);
+      const errorMessageContent = node.querySelector('#root_foo__error .text-danger').textContent;
+      expect(errorMessageContent).to.contain('Value must be "test"');
+      act(() => {
+        fireEvent.change(inputs[0], { target: { value: 'test' } });
+      });
+
+      errorMessages = node.querySelectorAll('#root_foo__error');
+      expect(errorMessages).to.have.length(0);
+    });
   });
 
   describe('fields ordering', () => {

packages/core/test/ObjectField.test.jsx

@@ -351,6 +351,32 @@ describe('StringField', () => {
       expect(errorMessages).to.have.length(0);
     });
 
+    it('should clear an error if value is entered correctly', () => {
+      const { node } = createFormComponent({
+        schema: { type: 'string' },
+        fields: {
+          StringField: StringFieldTest,
+        },
+      });
+
+      const inputs = node.querySelectorAll('.rjsf-field-string input[type=text]');
+      act(() => {
+        fireEvent.change(inputs[0], { target: { value: 'hello' } });
+      });
+
+      let errorMessages = node.querySelectorAll('#root__error');
+      expect(errorMessages).to.have.length(1);
+      const errorMessageContent = node.querySelector('#root__error .text-danger').textContent;
+      expect(errorMessageContent).to.contain('Value must be "test"');
+
+      act(() => {
+        fireEvent.change(inputs[0], { target: { value: 'test' } });
+      });
+
+      errorMessages = node.querySelectorAll('#root__error');
+      expect(errorMessages).to.have.length(0);
+    });
+
     it('raise an error and check if the error is displayed using custom text widget', () => {
       const { node } = createFormComponent({
         schema: { type: 'string' },

packages/core/test/StringField.test.jsx

@@ -100,12 +100,11 @@ The default widgets you can override are:
 ## Raising errors from within a custom widget or field
 
 You can raise custom 'live validation' errors by overriding the `onChange` method to provide feedback while users are actively changing the form data.
-Note that these errors are temporary and are not recognized during the form validation process.
+If you do set errors this way, you must also clear them this way by passing `undefined` to the `onChange()` for the `errorSchema` parameter.
 
 :::warning
 
-This method of raising errors _only_ runs during `onChange`, i.e. when the user is changing data. This will not catch errors `onSubmit`, i.e when submitting the form.
-If you wish to add generic validation logic for your component, you should use the [`customValidate` Form prop](../api-reference/form-props.md#customvalidate).
+While these errors are retained during validation, it is still preferred for you to use the [`customValidate` Form prop](../api-reference/form-props.md#customvalidate) mechanism instead.
 
 :::
 

packages/docs/docs/advanced-customization/custom-widgets-fields.md

@@ -1055,6 +1055,7 @@ If no `additionalErrorSchema` is passed, then `validationData` is returned.
 
 - validationData: ValidationData<T> - The current `ValidationData` into which to merge the additional errors
 - [additionalErrorSchema]: ErrorSchema<T> | undefined - The optional additional set of errors in an `ErrorSchema`
+- [preventDuplicates=false]: boolean - Optional flag, if true, will call `mergeObjects()` with `preventDuplicates`
 
 #### Returns