Fix: made small changes to utility functions to fix #3997, #4314 and #4322 (#4329)

* Fix: made small changes to utility functions to fix #3997 and #4322
Fixes #3997 and #4322
- In `@rjsf/utils`, made the following changes:
  - Updated `mergeDefaultsWithFormData()` to not overwrite a default when the formData has an undefined value
  - Updated `getClosestMatchingOption()` to improve the scoring function so that an object container that matches a key gets an extra point
- In `@rjsf/core`, updated `MultiSchemaField` to call `onChange` after setting the new option in state rather than before
- Updated the `CHANGELOG.md` accordingly

* - In order to avoid regressions, added a new `mergeDefaultsWithFormData` prop to the `Experimental_DefaultFormStateBehavior`
- Updated `mergeDefaultsWithFormData()` to add new optional `defaultSupercedesUndefined` that when true uses the defaults rather than `undefined` formData
- Updated `getDefaultFormState()` to pass true to `mergeDefaultsWithFormData` for `defaultSupercedesUndefined` when `mergeDefaultsIntoFormData` has the value `useDefaultIfFormDataUndefined`
- Updated the documentation for the new capabilities
- Updated the playground to add controls for the new `mergeDefaultsIntoFormData` option
  - moved the `Show Error List` component over one column, making it inline radio buttons rather than a select

* - Improved documentation a teeny bit

* - More doc improvements

* - Responded to reviewer feedback

* - Fixed broken links

* - Added section header for wrapping BaseInputTemplate

* - Updated CHANGELOG.md

Author: heath-freenome

CHANGELOG.md

@@ -18,10 +18,26 @@ should change the heading of the (upcoming) version to include a major version b
 
 # 5.22.0
 
+## @rjsf/core
+
+- Updated `MultiSchemaField` to call the `onChange` handler after setting the new option, fixing [#3997](https://github.com/rjsf-team/react-jsonschema-form/issues/3977) and [#4314](https://github.com/rjsf-team/react-jsonschema-form/issues/4314)
+
 ## @rjsf/utils
 
+- Added `experimental_customMergeAllOf` option to `retrieveSchema()` and `getDefaultFormState()` to allow custom merging of `allOf` schemas
 - Made fields with const property pre-filled and readonly, fixing [#2600](https://github.com/rjsf-team/react-jsonschema-form/issues/2600)
-- Added `experimental_customMergeAllOf` option to `retrieveSchema` to allow custom merging of `allOf` schemas
+- Added `mergeDefaultsIntoFormData` option to `Experimental_DefaultFormStateBehavior` type to control how to handle merging of defaults
+- Updated `mergeDefaultsWithFormData()` to add new optional `defaultSupercedesUndefined` that when true uses the defaults rather than `undefined` formData, fixing [#4322](https://github.com/rjsf-team/react-jsonschema-form/issues/4322)
+- Updated `getDefaultFormState()` to pass true to `mergeDefaultsWithFormData` for `defaultSupercedesUndefined` when `mergeDefaultsIntoFormData` has the value `useDefaultIfFormDataUndefined`, fixing [#4322](https://github.com/rjsf-team/react-jsonschema-form/issues/4322)
+- Updated `getClosestMatchingOption()` to improve the scoring of sub-property objects that are provided over ones that aren't, fixing [#3997](https://github.com/rjsf-team/react-jsonschema-form/issues/3977) and [#4314](https://github.com/rjsf-team/react-jsonschema-form/issues/4314)
+
+## Dev / docs / playground
+
+- Updated the `form-props.md` to add documentation for the new `experimental_customMergeAllOf` props and the `experimental_defaultFormStateBehavior.mergeDefaultsIntoFormData` option
+- Updated the `utility-functions.md` to add documentation for the new optional `defaultSupercedesUndefined` parameter and the two missing optional fields on `getDefaultFormState()`
+- Updated the `custom-templates.md` to add a section header for wrapping `BaseInputTemplate`
+- Updated the playground to add controls for the new `mergeDefaultsIntoFormData` option
+  - In the process, moved the `Show Error List` component over one column, making it inline radio buttons rather than a select
 
 # 5.21.2
 

packages/core/package.json

@@ -14,7 +14,7 @@
     "precommit": "lint-staged",
     "publish-to-npm": "npm run build && npm publish",
     "test": "jest",
-    "test:debug": "node --inspect-brk node_modules/.bin/jest",
+    "test:debug": "node --inspect-brk ../../node_modules/.bin/jest",
     "test:update": "jest --u",
     "test:watch": "jest --watch",
     "test-coverage": "jest --coverage"

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

@@ -128,9 +128,10 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       // so that only the root objects themselves are created without adding undefined children properties
       newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren') as T;
     }
-    onChange(newFormData, undefined, this.getFieldId());
 
-    this.setState({ selectedOption: intOption });
+    this.setState({ selectedOption: intOption }, () => {
+      onChange(newFormData, undefined, this.getFieldId());
+    });
   };
 
   getFieldId() {

packages/docs/docs/advanced-customization/custom-templates.md

@@ -362,6 +362,8 @@ render(
 );
 ```
 
+### Wrapping BaseInputTemplate to customize it
+
 Sometimes you just need to pass some additional properties to the existing `BaseInputTemplate`.
 The way to do this varies based upon whether you are using `core` or some other theme (such as `mui`):
 

packages/docs/docs/api-reference/form-props.md

@@ -251,6 +251,17 @@ render(
 );
 ```
 
+### mergeDefaultsIntoFormData
+
+Optional enumerated flag controlling how the defaults are merged into the form data when dealing with undefined values, defaulting to `useFormDataIfPresent`.
+
+NOTE: If there is a default for a field and the `formData` is unspecified, the default ALWAYS merges.
+
+| Flag Value                      | Description                                                                                                                               |
+| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `useFormDataIfPresent`          | Legacy behavior - Do not merge defaults if there is a value for a field in `formData` even if that value is explicitly set to `undefined` |
+| `useDefaultIfFormDataUndefined` | If the value of a field within the `formData` is `undefined`, then use the default value instead                                          |
+
 ## experimental_customMergeAllOf
 
 The `experimental_customMergeAllOf` function allows you to provide a custom implementation for merging `allOf` schemas. This can be particularly useful in scenarios where the default [json-schema-merge-allof](https://github.com/mokkabonna/json-schema-merge-allof) library becomes a performance bottleneck, especially with large and complex schemas or doesn't satisfy your needs.

packages/docs/docs/api-reference/utility-functions.md

@@ -575,6 +575,7 @@ When merging defaults and form data, we want to merge in this specific way:
 - [defaults]: T | undefined - The defaults to merge
 - [formData]: T | undefined - The form data into which the defaults will be merged
 - [mergeExtraArrayDefaults=false]: boolean - If true, any additional default array entries are appended onto the formData
+- [defaultSupercedesUndefined=false]: boolean - If true, an explicit undefined value will be overwritten by the default value
 
 #### Returns
 
@@ -897,6 +898,8 @@ Returns the superset of `formData` that includes the given set updated to includ
 - [formData]: T | undefined - The current formData, if any, onto which to provide any missing defaults
 - [rootSchema]: S | undefined - The root schema, used to primarily to look up `$ref`s
 - [includeUndefinedValues=false]: boolean | "excludeObjectChildren" - Optional flag, if true, cause undefined values to be added as defaults. If "excludeObjectChildren", cause undefined values for this object and pass `includeUndefinedValues` as false when computing defaults for any nested object properties.
+- [experimental_defaultFormStateBehavior]: Experimental_DefaultFormStateBehavior - See `Form` documentation for the [experimental_defaultFormStateBehavior](./form-props.md#experimental_defaultFormStateBehavior) prop
+- [experimental_customMergeAllOf]: Experimental_CustomMergeAllOf<S> - See `Form` documentation for the [experimental_customMergeAllOf](./form-props.md#experimental_customMergeAllOf) prop
 
 #### Returns
 

packages/playground/src/components/Header.tsx

@@ -63,18 +63,18 @@ const liveSettingsBooleanSchema: RJSFSchema = {
     noValidate: { type: 'boolean', title: 'Disable validation' },
     noHtml5Validate: { type: 'boolean', title: 'Disable HTML 5 validation' },
     focusOnFirstError: { type: 'boolean', title: 'Focus on 1st Error' },
-  },
-};
-
-const liveSettingsSelectSchema: RJSFSchema = {
-  type: 'object',
-  properties: {
     showErrorList: {
       type: 'string',
       default: 'top',
       title: 'Show Error List',
       enum: [false, 'top', 'bottom'],
     },
+  },
+};
+
+const liveSettingsSelectSchema: RJSFSchema = {
+  type: 'object',
+  properties: {
     experimental_defaultFormStateBehavior: {
       title: 'Default Form State Behavior (Experimental)',
       type: 'object',
@@ -157,11 +157,37 @@ const liveSettingsSelectSchema: RJSFSchema = {
             },
           ],
         },
+        mergeDefaultsIntoFormData: {
+          type: 'string',
+          title: 'Merge defaults into formData',
+          default: 'useFormDataIfPresent',
+          oneOf: [
+            {
+              type: 'string',
+              title: 'Use undefined field value if present',
+              enum: ['useFormDataIfPresent'],
+            },
+            {
+              type: 'string',
+              title: 'Use default for undefined field value',
+              enum: ['useDefaultIfFormDataUndefined'],
+            },
+          ],
+        },
       },
     },
   },
 };
 
+const liveSettingsBooleanUiSchema: UiSchema = {
+  showErrorList: {
+    'ui:widget': 'radio',
+    'ui:options': {
+      inline: true,
+    },
+  },
+};
+
 const liveSettingsSelectUiSchema: UiSchema = {
   experimental_defaultFormStateBehavior: {
     'ui:options': {
@@ -282,6 +308,7 @@ export default function Header({
             formData={liveSettings}
             validator={localValidator}
             onChange={handleSetLiveSettings}
+            uiSchema={liveSettingsBooleanUiSchema}
           >
             <div />
           </Form>

packages/utils/src/mergeDefaultsWithFormData.ts

@@ -12,23 +12,31 @@ import { GenericObjectType } from '../src';
  *     are deeply merged; additional entries from the defaults are ignored unless `mergeExtraArrayDefaults` is true, in
  *     which case the extras are appended onto the end of the form data
  *   - when the array is not set in form data, the default is copied over
- * - scalars are overwritten/set by form data
+ * - scalars are overwritten/set by form data unless undefined and there is a default AND `defaultSupercedesUndefined`
+ *   is true
  *
  * @param [defaults] - The defaults to merge
  * @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
  * @returns - The resulting merged form data with defaults
  */
 export default function mergeDefaultsWithFormData<T = any>(
   defaults?: T,
   formData?: T,
-  mergeExtraArrayDefaults = false
+  mergeExtraArrayDefaults = false,
+  defaultSupercedesUndefined = false
 ): T | undefined {
   if (Array.isArray(formData)) {
     const defaultsArray = Array.isArray(defaults) ? defaults : [];
     const mapped = formData.map((value, idx) => {
       if (defaultsArray[idx]) {
-        return mergeDefaultsWithFormData<any>(defaultsArray[idx], value, mergeExtraArrayDefaults);
+        return mergeDefaultsWithFormData<any>(
+          defaultsArray[idx],
+          value,
+          mergeExtraArrayDefaults,
+          defaultSupercedesUndefined
+        );
       }
       return value;
     });
@@ -44,10 +52,14 @@ export default function mergeDefaultsWithFormData<T = any>(
       acc[key as keyof T] = mergeDefaultsWithFormData<T>(
         defaults ? get(defaults, key) : {},
         get(formData, key),
-        mergeExtraArrayDefaults
+        mergeExtraArrayDefaults,
+        defaultSupercedesUndefined
       );
       return acc;
     }, acc);
   }
+  if (defaultSupercedesUndefined && formData === undefined) {
+    return defaults;
+  }
   return formData;
 }

packages/utils/src/schema/getClosestMatchingOption.ts

@@ -51,7 +51,7 @@ export function calculateIndexScore<T = any, S extends StrictRJSFSchema = RJSFSc
   validator: ValidatorType<T, S, F>,
   rootSchema: S,
   schema?: S,
-  formData: any = {}
+  formData?: any
 ): number {
   let totalScore = 0;
   if (schema) {
@@ -83,7 +83,11 @@ export function calculateIndexScore<T = any, S extends StrictRJSFSchema = RJSFSc
             );
           }
           if (value.type === 'object') {
-            return score + calculateIndexScore<T, S, F>(validator, rootSchema, value as S, formValue || {});
+            if (isObject(formValue)) {
+              // If the structure is matching then give it a little boost in score
+              score += 1;
+            }
+            return score + calculateIndexScore<T, S, F>(validator, rootSchema, value as S, formValue);
           }
           if (value.type === guessType(formValue)) {
             // If the types match, then we bump the score by one

packages/utils/src/schema/getDefaultFormState.ts

@@ -586,12 +586,14 @@ export default function getDefaultFormState<
     // No form data? Use schema defaults.
     return defaults;
   }
-  const { mergeExtraDefaults } = experimental_defaultFormStateBehavior?.arrayMinItems || {};
+  const { mergeDefaultsIntoFormData, arrayMinItems = {} } = experimental_defaultFormStateBehavior || {};
+  const { mergeExtraDefaults } = arrayMinItems;
+  const defaultSupercedesUndefined = mergeDefaultsIntoFormData === 'useDefaultIfFormDataUndefined';
   if (isObject(formData)) {
-    return mergeDefaultsWithFormData<T>(defaults as T, formData, mergeExtraDefaults);
+    return mergeDefaultsWithFormData<T>(defaults as T, formData, mergeExtraDefaults, defaultSupercedesUndefined);
   }
   if (Array.isArray(formData)) {
-    return mergeDefaultsWithFormData<T[]>(defaults as T[], formData, mergeExtraDefaults);
+    return mergeDefaultsWithFormData<T[]>(defaults as T[], formData, mergeExtraDefaults, defaultSupercedesUndefined);
   }
   return formData;
 }