Merge branch 'main' into fix/issuse-4426

Author: JinYuSha0

CHANGELOG.md

@@ -24,6 +24,10 @@ should change the heading of the (upcoming) version to include a major version b
 
 # 5.23.3
 
+## @rjsf/core
+
+- Fixed issue with schema if/then/else conditions where switching to then/else subschemas did not reflect the actual validation errors in the onChange event, fixing [#4249](https://github.com/rjsf-team/react-jsonschema-form/issues/4249) and improving performance.
+
 ## @rjsf/utils
 
 - Fixed issue with formData not updating when dependencies change, fixing [#4325](https://github.com/rjsf-team/react-jsonschema-form/issues/4325)
@@ -195,18 +199,18 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/core
 
 - Support allowing raising errors from within a custom Widget [#2718](https://github.com/rjsf-team/react-jsonschema-form/issues/2718)
-- Updated `ArrayField`, `BooleanField` and `StringField` to call `optionsList()` with the additional `UiSchema` parameter, fixing [#4215](https://github.com/rjsf-team/react-jsonschema-form/issues/4215) and  [#4260](https://github.com/rjsf-team/react-jsonschema-form/issues/4260)
+- Updated `ArrayField`, `BooleanField` and `StringField` to call `optionsList()` with the additional `UiSchema` parameter, fixing [#4215](https://github.com/rjsf-team/react-jsonschema-form/issues/4215) and [#4260](https://github.com/rjsf-team/react-jsonschema-form/issues/4260)
 
 ## @rjsf/utils
 
 - Updated the `WidgetProps` type to add `es?: ErrorSchema<T>, id?: string` to the params of the `onChange` handler function
 - Updated `UIOptionsBaseType` to add the new `enumNames` prop to support an alternate way to provide labels for `enum`s in a schema, fixing [#4215](https://github.com/rjsf-team/react-jsonschema-form/issues/4215)
-- Updated `optionsList()` to take an optional `uiSchema` that is used to extract alternate labels for `enum`s or `oneOf`/`anyOf` in a schema, fixing [#4215](https://github.com/rjsf-team/react-jsonschema-form/issues/4215) and  [#4260](https://github.com/rjsf-team/react-jsonschema-form/issues/4260)
+- Updated `optionsList()` to take an optional `uiSchema` that is used to extract alternate labels for `enum`s or `oneOf`/`anyOf` in a schema, fixing [#4215](https://github.com/rjsf-team/react-jsonschema-form/issues/4215) and [#4260](https://github.com/rjsf-team/react-jsonschema-form/issues/4260)
   - NOTE: The generics for `optionsList()` were expanded from `<S extends StrictRJSFSchema = RJSFSchema>` to `<S extends StrictRJSFSchema = RJSFSchema, T = any, F extends FormContextType = any>` to support the `UiSchema`.
 
 ## Dev / docs / playground
 
--  Update the `custom-widget-fields.md` to add documentation for how to raise errors from a custom widget or field
+- Update the `custom-widget-fields.md` to add documentation for how to raise errors from a custom widget or field
 
 # 5.19.4
 

packages/core/src/components/Form.tsx

@@ -421,7 +421,9 @@ export default class Form<
       );
     }
     const formData: T = schemaUtils.getDefaultFormState(schema, inputFormData) as T;
-    const _retrievedSchema = retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData);
+    const _retrievedSchema = this.updateRetrievedSchema(
+      retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData)
+    );
 
     const getCurrentErrors = (): ValidationData<T> => {
       // If the `props.noValidate` option is set or the schema has changed, we reset the error state.
@@ -475,6 +477,7 @@ export default class Form<
         ) as ErrorSchema<T>;
       }
     }
+
     if (props.extraErrors) {
       const merged = validationDataMerge({ errorSchema, errors }, props.extraErrors);
       errorSchema = merged.errorSchema;
@@ -665,11 +668,13 @@ export default class Form<
    */
   onChange = (formData: T | undefined, newErrorSchema?: ErrorSchema<T>, id?: string) => {
     const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
-    const { schemaUtils, schema, retrievedSchema } = this.state;
+    const { schemaUtils, schema } = this.state;
 
+    let retrievedSchema = this.state.retrievedSchema;
     if (isObject(formData) || Array.isArray(formData)) {
-      const newState = this.getStateFromProps(this.props, formData, retrievedSchema);
+      const newState = this.getStateFromProps(this.props, formData);
       formData = newState.formData;
+      retrievedSchema = newState.retrievedSchema;
     }
 
     const mustValidate = !noValidate && liveValidate;
@@ -719,6 +724,20 @@ export default class Form<
     this.setState(state as FormState<T, S, F>, () => onChange && onChange({ ...this.state, ...state }, id));
   };
 
+  /**
+   * If the retrievedSchema has changed the new retrievedSchema is returned.
+   * Otherwise, the old retrievedSchema is returned to persist reference.
+   * -  This ensures that AJV retrieves the schema from the cache when it has not changed,
+   *    avoiding the performance cost of recompiling the schema.
+   *
+   * @param retrievedSchema The new retrieved schema.
+   * @returns The new retrieved schema if it has changed, else the old retrieved schema.
+   */
+  private updateRetrievedSchema(retrievedSchema: S) {
+    const isTheSame = deepEquals(retrievedSchema, this.state?.retrievedSchema);
+    return isTheSame ? this.state.retrievedSchema : retrievedSchema;
+  }
+
   /**
    * Callback function to handle reset form data.
    * - Reset all fields with default values.

packages/core/test/ObjectField.test.jsx

@@ -227,6 +227,56 @@ describe('ObjectField', () => {
       });
     });
 
+    it('Check schema with if/then/else conditions and activate the then/else subschemas, the onChange event should reflect the actual validation errors', () => {
+      const schema = {
+        type: 'object',
+        _const: 'test',
+        required: ['checkbox'],
+        properties: {
+          checkbox: {
+            type: 'boolean',
+          },
+        },
+        if: {
+          required: ['checkbox'],
+          properties: {
+            checkbox: {
+              const: true,
+            },
+          },
+        },
+        then: {
+          required: ['text'],
+          properties: {
+            text: {
+              type: 'string',
+            },
+          },
+        },
+      };
+
+      const { node, onChange } = createFormComponent({
+        schema,
+        formData: {
+          checkbox: true,
+        },
+        liveValidate: true,
+      });
+
+      // Uncheck the checkbox
+      fireEvent.click(node.querySelector('input[type=checkbox]'));
+
+      sinon.assert.calledWithMatch(
+        onChange.lastCall,
+        {
+          formData: { checkbox: false },
+          errorSchema: {},
+          errors: [],
+        },
+        'root_checkbox'
+      );
+    });
+
     it('Check that when formData changes, the form should re-validate', () => {
       const { node, rerender } = createFormComponent({
         schema,