Fix 3759 - uneditable & permanent defaults with additional properties

CHANGELOG.md

@@ -15,6 +15,25 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# 5.24.4
+
+## @rjsf/core
+
+- Added `initialDefaultsGenerated` flag to state, which indicates whether the initial generation of defaults has been completed
+- Added `ObjectField` tests for additionalProperties with defaults  
+
+## @rjsf/utils
+
+- Updated `getDefaultFormState` to add a new `initialDefaultsGenerated` prop flag, along with type definitions, fixing uneditable & permanent defaults with additional properties [3759](https://github.com/rjsf-team/react-jsonschema-form/issues/3759)
+- Updated `createSchemaUtils` definition to reflect addition of `initialDefaultsGenerated`
+- Updated existing tests where `getDefaultFormState` is used to reflect addition of `initialDefaultsGenerated`
+
+## @rjsf/docs 
+- Updated docs for `getDefaultFormState` to reflect addition of `initialDefaultsGenerated` prop
+
+## @rjsf/validator-ajv6 @rjsf/validator-avv8
+- Updated `getDefaultFormState` calls to reflect addition of `initialDefaultsGenerated`
+
 # 5.24.3
 
 ## @rjsf/utils

packages/core/src/components/Form.tsx

@@ -252,6 +252,8 @@ export interface FormState<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   // Private
   /** @description result of schemaUtils.retrieveSchema(schema, formData). This a memoized value to avoid re calculate at internal functions (getStateFromProps, onChange) */
   retrievedSchema: S;
+  /** Flag indicating whether the initial form defaults have been generated */
+  initialDefaultsGenerated: boolean;
 }
 
 /** The event data passed when changes have been made to the form, includes everything from the `FormState` except
@@ -423,7 +425,8 @@ export default class Form<
         experimental_customMergeAllOf
       );
     }
-    const formData: T = schemaUtils.getDefaultFormState(schema, inputFormData) as T;
+
+    const formData: T = schemaUtils.getDefaultFormState(schema, inputFormData, state.initialDefaultsGenerated) as T;
     const _retrievedSchema = this.updateRetrievedSchema(
       retrievedSchema ?? schemaUtils.retrieveSchema(schema, formData)
     );
@@ -505,6 +508,7 @@ export default class Form<
       schemaValidationErrors,
       schemaValidationErrorSchema,
       retrievedSchema: _retrievedSchema,
+      initialDefaultsGenerated: true,
     };
     return nextState;
   }
@@ -757,6 +761,7 @@ export default class Form<
       errors: [] as unknown,
       schemaValidationErrors: [] as unknown,
       schemaValidationErrorSchema: {},
+      initialDefaultsGenerated: false,
     } as FormState<T, S, F>;
 
     this.setState(state, () => onChange && onChange({ ...this.state, ...state }));

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

@@ -126,7 +126,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     if (newOption) {
       // Call getDefaultFormState to make sure defaults are populated on change. Pass "excludeObjectChildren"
       // so that only the root objects themselves are created without adding undefined children properties
-      newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren') as T;
+      newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, false, 'excludeObjectChildren') as T;
     }
 
     this.setState({ selectedOption: intOption }, () => {

packages/core/test/Form.test.jsx

@@ -147,6 +147,7 @@ describeRepeated('Form common', (createFormComponent) => {
           schemaValidationErrorSchema: undefined,
           schemaUtils: sinon.match.object,
           retrievedSchema: schema,
+          initialDefaultsGenerated: true,
         });
       });
     });
@@ -1512,6 +1513,7 @@ describeRepeated('Form common', (createFormComponent) => {
           schemaValidationErrorSchema: undefined,
           schemaUtils: sinon.match.object,
           retrievedSchema: formProps.schema,
+          initialDefaultsGenerated: true,
         });
       });
     });

packages/core/test/ObjectField.test.jsx

@@ -1142,6 +1142,165 @@ describe('ObjectField', () => {
       });
     });
 
+    it('should generate the specified default key and value inputs if default is provided outside of additionalProperties schema', () => {
+      const customSchema = {
+        ...schema,
+        default: {
+          defaultKey: 'defaultValue',
+        },
+      };
+      const { onChange } = createFormComponent({
+        schema: customSchema,
+        formData: {},
+      });
+
+      sinon.assert.calledWithMatch(onChange.lastCall, {
+        formData: {
+          defaultKey: 'defaultValue',
+        },
+      });
+    });
+
+    it('should generate the specified default key/value input with custom formData provided', () => {
+      const customSchema = {
+        ...schema,
+        default: {
+          defaultKey: 'defaultValue',
+        },
+      };
+      const { onChange } = createFormComponent({
+        schema: customSchema,
+        formData: {
+          someData: 'someValue',
+        },
+      });
+
+      sinon.assert.calledWithMatch(onChange.lastCall, {
+        formData: {
+          defaultKey: 'defaultValue',
+          someData: 'someValue',
+        },
+      });
+    });
+
+    it('should edit the specified default key without duplicating', () => {
+      const customSchema = {
+        ...schema,
+        default: {
+          defaultKey: 'defaultValue',
+        },
+      };
+      const { node, onChange } = createFormComponent({
+        schema: customSchema,
+        formData: {},
+      });
+
+      fireEvent.blur(node.querySelector('#root_defaultKey-key'), { target: { value: 'newDefaultKey' } });
+
+      sinon.assert.calledWithMatch(onChange.lastCall, {
+        formData: {
+          newDefaultKey: 'defaultValue',
+        },
+      });
+    });
+
+    it('should remove the specified default key/value input item', () => {
+      const customSchema = {
+        ...schema,
+        default: {
+          defaultKey: 'defaultValue',
+        },
+      };
+      const { node, onChange } = createFormComponent({
+        schema: customSchema,
+        formData: {},
+      });
+
+      fireEvent.click(node.querySelector('.array-item-remove'));
+
+      sinon.assert.calledWithMatch(onChange.lastCall, {
+        formData: {},
+      });
+    });
+
+    it('should handle nested additional property default key/value input generation', () => {
+      const customSchema = {
+        ...schema,
+        default: {
+          defaultKey: 'defaultValue',
+        },
+        properties: {
+          nested: {
+            type: 'object',
+            properties: {
+              bar: {
+                type: 'object',
+                additionalProperties: {
+                  type: 'string',
+                },
+                default: {
+                  baz: 'value',
+                },
+              },
+            },
+          },
+        },
+      };
+
+      const { onChange } = createFormComponent({
+        schema: customSchema,
+        formData: {},
+      });
+
+      sinon.assert.calledWithMatch(onChange.lastCall, {
+        formData: {
+          defaultKey: 'defaultValue',
+          nested: {
+            bar: {
+              baz: 'value',
+            },
+          },
+        },
+      });
+    });
+
+    it('should remove nested additional property default key/value input', () => {
+      const customSchema = {
+        ...schema,
+        properties: {
+          nested: {
+            type: 'object',
+            properties: {
+              bar: {
+                type: 'object',
+                additionalProperties: {
+                  type: 'string',
+                },
+                default: {
+                  baz: 'value',
+                },
+              },
+            },
+          },
+        },
+      };
+
+      const { node, onChange } = createFormComponent({
+        schema: customSchema,
+        formData: {},
+      });
+
+      fireEvent.click(node.querySelector('.array-item-remove'));
+
+      sinon.assert.calledWithMatch(onChange.lastCall, {
+        formData: {
+          nested: {
+            bar: {},
+          },
+        },
+      });
+    });
+
     it('should not provide an expand button if length equals maxProperties', () => {
       const { node } = createFormComponent({
         schema: { maxProperties: 1, ...schema },

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

@@ -921,6 +921,7 @@ Returns the superset of `formData` that includes the given set updated to includ
 - theSchema: S - The schema for which the default state is desired
 - [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
+- [initialDefaultsGenerated]: boolean - Flag indicating whether the initial form defaults have been generated
 - [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

packages/utils/src/createSchemaUtils.ts

@@ -103,6 +103,7 @@ class SchemaUtils<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
    *
    * @param schema - The schema for which the default state is desired
    * @param [formData] - The current formData, if any, onto which to provide any missing defaults
+   * @param initialDefaultsGenerated - Indicates whether or not initial defaults have been generated
    * @param [includeUndefinedValues=false] - Optional flag, if true, cause undefined values to be added as defaults.
    *          If "excludeObjectChildren", pass `includeUndefinedValues` as false when computing defaults for any nested
    *          object properties.
@@ -111,13 +112,15 @@ class SchemaUtils<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
   getDefaultFormState(
     schema: S,
     formData?: T,
+    initialDefaultsGenerated?: boolean,
     includeUndefinedValues: boolean | 'excludeObjectChildren' = false
   ): T | T[] | undefined {
     return getDefaultFormState<T, S, F>(
       this.validator,
       schema,
       formData,
       this.rootSchema,
+      initialDefaultsGenerated,
       includeUndefinedValues,
       this.experimental_defaultFormStateBehavior,
       this.experimental_customMergeAllOf

packages/utils/src/schema/getDefaultFormState.ts

@@ -178,6 +178,8 @@ interface ComputeDefaultsProps<T = any, S extends StrictRJSFSchema = RJSFSchema>
    *  The formData should take precedence unless it's not valid. This is useful when for example the value from formData does not exist in the schema 'enum' property, in such cases we take the value from the defaults because the value from the formData is not valid.
    */
   shouldMergeDefaultsIntoFormData?: boolean;
+  /** Indicates whether initial defaults have been generated */
+  initialDefaultsGenerated?: boolean;
 }
 
 /** Computes the defaults for the current `schema` given the `rawFormData` and `parentDefaults` if any. This drills into
@@ -203,6 +205,7 @@ export function computeDefaults<T = any, S extends StrictRJSFSchema = RJSFSchema
     experimental_customMergeAllOf = undefined,
     required,
     shouldMergeDefaultsIntoFormData = false,
+    initialDefaultsGenerated,
   } = computeDefaultsProps;
   const formData: T = (isObject(rawFormData) ? rawFormData : {}) as T;
   const schema: S = isObject(rawSchema) ? rawSchema : ({} as S);
@@ -323,6 +326,7 @@ export function computeDefaults<T = any, S extends StrictRJSFSchema = RJSFSchema
       rawFormData: formData as T,
       required,
       shouldMergeDefaultsIntoFormData,
+      initialDefaultsGenerated,
     });
   }
 
@@ -417,6 +421,7 @@ export function getObjectDefaults<T = any, S extends StrictRJSFSchema = RJSFSche
     experimental_customMergeAllOf = undefined,
     required,
     shouldMergeDefaultsIntoFormData,
+    initialDefaultsGenerated,
   }: ComputeDefaultsProps<T, S> = {},
   defaults?: T | T[] | undefined
 ): T {
@@ -452,6 +457,7 @@ export function getObjectDefaults<T = any, S extends StrictRJSFSchema = RJSFSche
           rawFormData: get(formData, [key]),
           required: retrievedSchema.required?.includes(key),
           shouldMergeDefaultsIntoFormData,
+          initialDefaultsGenerated,
         });
         maybeAddDefaultToObject<T>(
           acc,
@@ -467,7 +473,7 @@ export function getObjectDefaults<T = any, S extends StrictRJSFSchema = RJSFSche
       },
       {}
     ) as T;
-    if (retrievedSchema.additionalProperties) {
+    if (retrievedSchema.additionalProperties && !initialDefaultsGenerated) {
       // as per spec additionalProperties may be either schema or boolean
       const additionalPropertiesSchema = isObject(retrievedSchema.additionalProperties)
         ? retrievedSchema.additionalProperties
@@ -497,6 +503,7 @@ export function getObjectDefaults<T = any, S extends StrictRJSFSchema = RJSFSche
           rawFormData: get(formData, [key]),
           required: retrievedSchema.required?.includes(key),
           shouldMergeDefaultsIntoFormData,
+          initialDefaultsGenerated,
         });
         // Since these are additional properties we don't need to add the `experimental_defaultFormStateBehavior` prop
         maybeAddDefaultToObject<T>(
@@ -532,6 +539,7 @@ export function getArrayDefaults<T = any, S extends StrictRJSFSchema = RJSFSchem
     experimental_customMergeAllOf = undefined,
     required,
     shouldMergeDefaultsIntoFormData,
+    initialDefaultsGenerated,
   }: ComputeDefaultsProps<T, S> = {},
   defaults?: T | T[] | undefined
 ): T | T[] | undefined {
@@ -560,6 +568,7 @@ export function getArrayDefaults<T = any, S extends StrictRJSFSchema = RJSFSchem
         parentDefaults: item,
         required,
         shouldMergeDefaultsIntoFormData,
+        initialDefaultsGenerated,
       });
     }) as T[];
   }
@@ -580,6 +589,7 @@ export function getArrayDefaults<T = any, S extends StrictRJSFSchema = RJSFSchem
           parentDefaults: get(defaults, [idx]),
           required,
           shouldMergeDefaultsIntoFormData,
+          initialDefaultsGenerated,
         });
       }) as T[];
 
@@ -629,6 +639,7 @@ export function getArrayDefaults<T = any, S extends StrictRJSFSchema = RJSFSchem
       experimental_customMergeAllOf,
       required,
       shouldMergeDefaultsIntoFormData,
+      initialDefaultsGenerated,
     })
   ) as T[];
   // then fill up the rest with either the item default or empty, up to minItems
@@ -671,6 +682,7 @@ export function getDefaultBasedOnSchemaType<
  * @param theSchema - The schema for which the default state is desired
  * @param [formData] - The current formData, if any, onto which to provide any missing defaults
  * @param [rootSchema] - The root schema, used to primarily to look up `$ref`s
+ * @param initialDefaultsGenerated - Indicates whether or not initial defaults have been generated
  * @param [includeUndefinedValues=false] - 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.
@@ -687,6 +699,7 @@ export default function getDefaultFormState<
   theSchema: S,
   formData?: T,
   rootSchema?: S,
+  initialDefaultsGenerated?: boolean,
   includeUndefinedValues: boolean | 'excludeObjectChildren' = false,
   experimental_defaultFormStateBehavior?: Experimental_DefaultFormStateBehavior,
   experimental_customMergeAllOf?: Experimental_CustomMergeAllOf<S>
@@ -706,6 +719,7 @@ export default function getDefaultFormState<
     experimental_customMergeAllOf,
     rawFormData: formData,
     shouldMergeDefaultsIntoFormData: true,
+    initialDefaultsGenerated,
   });
 
   // If the formData is an object or an array, add additional properties from formData and override formData with