Merge branch 'main' into fix-4402

Author: heath-freenome

CHANGELOG.md

@@ -16,7 +16,17 @@ should change the heading of the (upcoming) version to include a major version b
 
 -->
 
-# 5.23.3
+# 5.24.0
+
+## @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)
+- Fixed issue with assigning default values to formData with deeply nested required properties, fixing [#4399](https://github.com/rjsf-team/react-jsonschema-form/issues/4399)
+- Fix for AJV [$data](https://ajv.js.org/guide/combining-schemas.html#data-reference) reference in const property in schema treated as default/const value. The issue is mentioned in [#4361](https://github.com/rjsf-team/react-jsonschema-form/issues/4361).
 
 ## @rjsf/validator-ajv8
 

packages/core/src/components/Form.tsx

@@ -416,7 +416,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.
@@ -459,6 +461,7 @@ export default class Form<
       errors = currentErrors.errors;
       errorSchema = currentErrors.errorSchema;
     }
+
     if (props.extraErrors) {
       const merged = validationDataMerge({ errorSchema, errors }, props.extraErrors);
       errorSchema = merged.errorSchema;
@@ -649,11 +652,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;
@@ -703,6 +708,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,99 @@ 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('should validate AJV $data reference ', () => {
+      const schema = {
+        type: 'object',
+        properties: {
+          email: {
+            type: 'string',
+            title: 'E-mail',
+            format: 'email',
+          },
+          emailConfirm: {
+            type: 'string',
+            const: {
+              $data: '/email',
+            },
+            title: 'Confirm e-mail',
+            format: 'email',
+          },
+        },
+      };
+      const { node, rerender } = createFormComponent({
+        schema,
+        formData: {
+          email: '[email protected]',
+          emailConfirm: '[email protected]',
+        },
+        liveValidate: true,
+      });
+
+      const errorMessages = node.querySelectorAll('#root_emailConfirm__error');
+      expect(errorMessages).to.have.length(1);
+
+      rerender({
+        schema,
+        formData: {
+          email: '[email protected]',
+          emailConfirm: '[email protected]',
+        },
+        liveValidate: true,
+      });
+
+      expect(node.querySelectorAll('#root_foo__error')).to.have.length(0);
+    });
+
     it('Check that when formData changes, the form should re-validate', () => {
       const { node, rerender } = createFormComponent({
         schema,

packages/playground/src/app.tsx

@@ -20,9 +20,11 @@ const esV8Validator = customizeValidator({}, localize_es);
 const AJV8_2019 = customizeValidator({ AjvClass: Ajv2019 });
 const AJV8_2020 = customizeValidator({ AjvClass: Ajv2020 });
 const AJV8_DISC = customizeValidator({ ajvOptionsOverrides: { discriminator: true } });
+const AJV8_DATA_REF = customizeValidator({ ajvOptionsOverrides: { $data: true } });
 
 const validators: PlaygroundProps['validators'] = {
   AJV8: v8Validator,
+  'AJV8 $data reference': AJV8_DATA_REF,
   'AJV8 (discriminator)': AJV8_DISC,
   AJV8_es: esV8Validator,
   AJV8_2019,

packages/playground/src/components/Header.tsx

@@ -306,6 +306,7 @@ export default function Header({
           uiSchema,
           theme,
           liveSettings,
+          validator,
         })
       );
 
@@ -314,7 +315,7 @@ export default function Header({
       setShareURL(null);
       console.error(error);
     }
-  }, [formData, liveSettings, schema, theme, uiSchema, setShareURL]);
+  }, [formData, liveSettings, schema, theme, uiSchema, validator, setShareURL]);
 
   return (
     <div className='page-header'>

packages/playground/src/components/Playground.tsx

@@ -69,6 +69,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
         theme: dataTheme = theme,
         extraErrors,
         liveSettings,
+        validator,
         ...rest
       } = data;
 
@@ -85,6 +86,7 @@ export default function Playground({ themes, validators }: PlaygroundProps) {
       setTheme(theTheme);
       setShowForm(true);
       setLiveSettings(liveSettings);
+      setValidator(validator);
       setOtherFormProps({ fields, templates, ...rest });
     },
     [theme, onThemeSelected, themes]

packages/playground/src/samples/Sample.ts

@@ -1,3 +1,5 @@
 import { FormProps } from '@rjsf/core';
 
-export type Sample = Omit<FormProps, 'validator'>;
+export interface Sample extends Omit<FormProps, 'validator'> {
+  validator: string;
+}

packages/utils/src/constIsAjvDataReference.ts

@@ -0,0 +1,17 @@
+import { CONST_KEY, getSchemaType, isObject } from './';
+import { RJSFSchema, StrictRJSFSchema } from './types';
+import { JSONSchema7Type } from 'json-schema';
+import isString from 'lodash/isString';
+
+/**
+ * Checks if the schema const property value is an AJV $data reference
+ * and the current schema is not an object or array
+ *
+ * @param schema - The schema to check if the const is an AJV $data reference
+ * @returns - true if the schema const property value is an AJV $data reference otherwise false.
+ */
+export default function constIsAjvDataReference<S extends StrictRJSFSchema = RJSFSchema>(schema: S): boolean {
+  const schemaConst = schema[CONST_KEY] as JSONSchema7Type & { $data: string };
+  const schemaType = getSchemaType<S>(schema);
+  return isObject(schemaConst) && isString(schemaConst?.$data) && schemaType !== 'object' && schemaType !== 'array';
+}

packages/utils/src/mergeDefaultsWithFormData.ts

@@ -2,6 +2,7 @@ import get from 'lodash/get';
 
 import isObject from './isObject';
 import { GenericObjectType } from '../src';
+import isNil from 'lodash/isNil';
 
 /** Merges the `defaults` object of type `T` into the `formData` of type `T`
  *
@@ -19,47 +20,78 @@ import { GenericObjectType } from '../src';
  * @param [formData] - The form data into which the defaults will be merged
  * @param [mergeExtraArrayDefaults=false] - If true, any additional default array entries are appended onto the formData
  * @param [defaultSupercedesUndefined=false] - If true, an explicit undefined value will be overwritten by the default value
+ * @param [overrideFormDataWithDefaults=false] - If true, the default value will overwrite the form data value. If the value
+ *        doesn't exist in the default, we take it from formData and in the case where the value is set to undefined in formData.
+ *       This is useful when we have already merged formData with defaults and want to add an additional field from formData
+ *       that does not exist in defaults.
  * @returns - The resulting merged form data with defaults
  */
 export default function mergeDefaultsWithFormData<T = any>(
   defaults?: T,
   formData?: T,
   mergeExtraArrayDefaults = false,
-  defaultSupercedesUndefined = false
+  defaultSupercedesUndefined = false,
+  overrideFormDataWithDefaults = false
 ): T | undefined {
   if (Array.isArray(formData)) {
     const defaultsArray = Array.isArray(defaults) ? defaults : [];
-    const mapped = formData.map((value, idx) => {
-      if (defaultsArray[idx]) {
+
+    // If overrideFormDataWithDefaults is true, we want to override the formData with the defaults
+    const overrideArray = overrideFormDataWithDefaults ? defaultsArray : formData;
+    const overrideOppositeArray = overrideFormDataWithDefaults ? formData : defaultsArray;
+
+    const mapped = overrideArray.map((value, idx) => {
+      if (overrideOppositeArray[idx]) {
         return mergeDefaultsWithFormData<any>(
           defaultsArray[idx],
-          value,
+          formData[idx],
           mergeExtraArrayDefaults,
-          defaultSupercedesUndefined
+          defaultSupercedesUndefined,
+          overrideFormDataWithDefaults
         );
       }
       return value;
     });
+
     // Merge any extra defaults when mergeExtraArrayDefaults is true
-    if (mergeExtraArrayDefaults && mapped.length < defaultsArray.length) {
-      mapped.push(...defaultsArray.slice(mapped.length));
+    // Or when overrideFormDataWithDefaults is true and the default array is shorter than the formData array
+    if ((mergeExtraArrayDefaults || overrideFormDataWithDefaults) && mapped.length < overrideOppositeArray.length) {
+      mapped.push(...overrideOppositeArray.slice(mapped.length));
     }
     return mapped as unknown as T;
   }
   if (isObject(formData)) {
     const acc: { [key in keyof T]: any } = Object.assign({}, defaults); // Prevent mutation of source object.
     return Object.keys(formData as GenericObjectType).reduce((acc, key) => {
+      const keyValue = get(formData, key);
+      const keyExistsInDefaults = isObject(defaults) && key in (defaults as GenericObjectType);
+      const keyExistsInFormData = key in (formData as GenericObjectType);
       acc[key as keyof T] = mergeDefaultsWithFormData<T>(
         defaults ? get(defaults, key) : {},
-        get(formData, key),
+        keyValue,
         mergeExtraArrayDefaults,
-        defaultSupercedesUndefined
+        defaultSupercedesUndefined,
+        // overrideFormDataWithDefaults can be true only when the key value exists in defaults
+        // Or if the key value doesn't exist in formData
+        overrideFormDataWithDefaults && (keyExistsInDefaults || !keyExistsInFormData)
       );
       return acc;
     }, acc);
   }
-  if (defaultSupercedesUndefined && formData === undefined) {
+
+  /**
+   * If the defaultSupercedesUndefined flag is true
+   *    And formData is set to undefined or null and defaults are defined
+   *    Or if formData is a number and is NaN return defaults
+   * Or if overrideFormDataWithDefaults flag is true and formData is set to not undefined/null return defaults
+   */
+  if (
+    (defaultSupercedesUndefined &&
+      ((!isNil(defaults) && isNil(formData)) || (typeof formData === 'number' && isNaN(formData)))) ||
+    (overrideFormDataWithDefaults && !isNil(formData))
+  ) {
     return defaults;
   }
+
   return formData;
 }