Fix: Reworked the additional properties remove code (#4852)

Fixes: #4850 by moving the deleting of an additional property from `ObjectField` to `Form`
- In `@rjsf/utils` added a special `ADDITIONAL_PROPERTY_KEY_REMOVE` symbol to `constants.ts`
- In `@rjsf/core`:
  - Updated `ObjectField`'s `handleRemoveProperty()` to call `onChange()` with `ADDITIONAL_PROPERTY_KEY_REMOVE` and the `fieldPathId.path` + `key`
    - Made the `key` for the `ObjectFieldProperty` render stable
  - Updated `Form`'s `processPendingChange()` to detect when the `newValue` is `ADDITIONAL_PROPERTY_KEY_REMOVE` and remove the data instead.
- Updated the `CHANGELOG.md` accordingly

Author: heath-freenome

CHANGELOG.md

@@ -32,6 +32,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Fixed duplicate label and description rendering in `CheckboxWidget` by conditionally rendering them based on widget type
     - Updated `CheckboxWidget` to handle label and description rendering consistently
     - Modified `FieldTemplate` to skip label and description rendering for checkbox widgets, fixing ([#4742](https://github.com/rjsf-team/react-jsonschema-form/issues/4742))
+- Updated `ObjectField` to change the removal of an additional property to defer the work to the `processPendingChange()` handler in `Form`, fixing [#4850](https://github.com/rjsf-team/react-jsonschema-form/issues/4850)
 
 ## @rjsf/fluentui-rc
 
@@ -65,6 +66,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/utils
 
 - Updated `getDefaultFormState()` to not save an undefined field value into an object when the type is `null` and `excludeObjectChildren` is provided, fixing [#4821](https://github.com/rjsf-team/react-jsonschema-form/issues/4821)
+- Added new `ADDITIONAL_PROPERTY_KEY_REMOVE` constant
 
 ## Dev / docs / playground
 

packages/core/src/components/Form.tsx

@@ -1,5 +1,6 @@
 import { Component, ElementType, FormEvent, ReactNode, Ref, RefObject, createRef } from 'react';
 import {
+  ADDITIONAL_PROPERTY_KEY_REMOVE,
   createSchemaUtils,
   CustomValidator,
   deepEquals,
@@ -51,6 +52,7 @@ import _isEmpty from 'lodash/isEmpty';
 import _pick from 'lodash/pick';
 import _set from 'lodash/set';
 import _toPath from 'lodash/toPath';
+import _unset from 'lodash/unset';
 
 import getDefaultRegistry from '../getDefaultRegistry';
 
@@ -875,7 +877,10 @@ export default class Form<
     let retrievedSchema = this.state.retrievedSchema;
     let formData = isRootPath ? newValue : _cloneDeep(oldFormData);
     if (isObject(formData) || Array.isArray(formData)) {
-      if (!isRootPath) {
+      if (newValue === ADDITIONAL_PROPERTY_KEY_REMOVE) {
+        // For additional properties, we were given the special remove this key value, so unset it
+        _unset(formData, path);
+      } else if (!isRootPath) {
         // If the newValue is not on the root path, then set it into the form data
         _set(formData, path, newValue);
       }

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

@@ -1,10 +1,10 @@
 import { FocusEvent, useCallback, useState } from 'react';
 import {
+  ADDITIONAL_PROPERTY_KEY_REMOVE,
   ADDITIONAL_PROPERTY_FLAG,
   ANY_OF_KEY,
   getTemplate,
   getUiOptions,
-  hashObject,
   isFormDataAvailable,
   orderProperties,
   shouldRenderOptionalField,
@@ -29,7 +29,6 @@ import get from 'lodash/get';
 import has from 'lodash/has';
 import isObject from 'lodash/isObject';
 import set from 'lodash/set';
-import unset from 'lodash/unset';
 
 /** Returns a flag indicating whether the `name` field is required in the object schema
  *
@@ -220,7 +219,6 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
   const schema: S = schemaUtils.retrieveSchema(rawSchema, formData, true);
   const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
   const { properties: schemaProperties = {} } = schema;
-  const formDataHash = hashObject(formData || {});
   // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
   const childFieldPathId = props.childFieldPathId ?? fieldPathId;
 
@@ -320,15 +318,14 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     [formData, onChange, childFieldPathId, getAvailableKey],
   );
 
-  /** Handles the remove click which removes the old `key` data and calls the `onChange` callback with it
+  /** Handles the remove click which calls the `onChange` callback with the special ADDITIONAL_PROPERTY_FIELD_REMOVE
+   * value for the path plus the key to be removed
    */
   const handleRemoveProperty = useCallback(
     (key: string) => {
-      const copiedFormData = { ...formData } as T;
-      unset(copiedFormData, key);
-      onChange(copiedFormData, childFieldPathId.path);
+      onChange(ADDITIONAL_PROPERTY_KEY_REMOVE as T, [...childFieldPathId.path, key]);
     },
-    [onChange, childFieldPathId, formData],
+    [onChange, childFieldPathId],
   );
 
   if (!renderOptionalField || hasFormData) {
@@ -364,10 +361,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
       const hidden = getUiOptions<T, S, F>(fieldUiSchema).widget === 'hidden';
       const content = (
         <ObjectFieldProperty<T, S, F>
-          // For regular properties, the key is just the name. For additionalProperties, the key is a combination of the
-          // name and the hash of the formData so that react rerenders the components with the updated additional
-          // property related callback which will change due to formData changes
-          key={addedByAdditionalProperties ? `${name}-${formDataHash}` : name}
+          key={name}
           propertyName={name}
           required={isRequired<S>(schema, name)}
           schema={get(schema, [PROPERTIES_KEY, name], {}) as S}

packages/utils/src/constants.ts

@@ -4,6 +4,7 @@
  * utility.
  */
 export const ADDITIONAL_PROPERTY_FLAG = '__additional_property';
+export const ADDITIONAL_PROPERTY_KEY_REMOVE = Symbol('remove-this-key');
 export const ADDITIONAL_PROPERTIES_KEY = 'additionalProperties';
 export const ALL_OF_KEY = 'allOf';
 export const ANY_OF_KEY = 'anyOf';