@rjsf/core 6.6.0 → 6.6.2

package/src/components/fields/LayoutGridField.tsx

@@ -1,10 +1,16 @@
-import { ComponentType, ReactNode } from 'react';
-import {
-  ANY_OF_KEY,
+import type { ComponentType, ReactNode } from 'react';
+import type {
   FieldProps,
   FieldPathId,
   FormContextType,
   GenericObjectType,
+  RJSFSchema,
+  Registry,
+  StrictRJSFSchema,
+  UiSchema,
+} from '@rjsf/utils';
+import {
+  ANY_OF_KEY,
   getDiscriminatorFieldFromSchema,
   getTemplate,
   getTestIds,
@@ -15,13 +21,9 @@ import {
   ONE_OF_KEY,
   PROPERTIES_KEY,
   READONLY_KEY,
-  RJSFSchema,
-  Registry,
-  StrictRJSFSchema,
   toFieldPathId,
   UI_OPTIONS_KEY,
   UI_GLOBAL_OPTIONS_KEY,
-  UiSchema,
   ITEMS_KEY,
   useDeepCompareMemo,
 } from '@rjsf/utils';
@@ -73,11 +75,7 @@ export interface GridProps extends GenericObjectType {
   value?: unknown;
 }
 
-export type GridSchemaType = {
-  /** The limited set of props which are keyed using the `GridType` enumeration and return an object
-   */
-  [gridType in GridType]?: object;
-};
+export type GridSchemaType = Partial<Record<GridType, object>>;
 
 /** The types which comprise the possibilities for the `layoutGridSchema` prop
  */
@@ -106,13 +104,16 @@ export const LAYOUT_GRID_UI_OPTION = 'layoutGrid';
 export const LAYOUT_GRID_OPTION = `ui:${LAYOUT_GRID_UI_OPTION}`;
 
 /** Type used to return options list and whether it has a discriminator */
-type OneOfOptionsInfoType<S extends StrictRJSFSchema = RJSFSchema> = { options: S[]; hasDiscriminator: boolean };
+interface OneOfOptionsInfoType<S extends StrictRJSFSchema = RJSFSchema> {
+  options: S[];
+  hasDiscriminator: boolean;
+}
 
 /** Type used to represent a React-based rendering component */
 type RenderComponent = ComponentType<any>;
 
 /** Type used to determine what are the UIComponent and props from the grid schema */
-type UIComponentPropsType = {
+interface UIComponentPropsType {
   /** The name of the component */
   name: string;
   /** The render component if specified */
@@ -121,7 +122,7 @@ type UIComponentPropsType = {
   uiProps: ConfigObject;
   /** The special case where the component is immediately rendered */
   rendered: ReactNode;
-};
+}
 
 /** Returns either the `value` if it is non-nullish or the fallback
  *
@@ -282,6 +283,7 @@ export function computeArraySchemasIfPresent<S extends StrictRJSFSchema = RJSFSc
   fieldPathId: FieldPathId;
 } {
   let rawSchema: S | undefined;
+  let resultPathId = fieldPathId;
   if (isNumericIndex(potentialIndex) && schema && schema?.type === 'array' && has(schema, ITEMS_KEY)) {
     const index = Number(potentialIndex);
     const items = schema[ITEMS_KEY];
@@ -294,12 +296,12 @@ export function computeArraySchemasIfPresent<S extends StrictRJSFSchema = RJSFSc
     } else {
       rawSchema = items as S;
     }
-    fieldPathId = {
+    resultPathId = {
       [ID_KEY]: fieldPathId[ID_KEY],
       path: [...fieldPathId.path.slice(0, fieldPathId.path.length - 1), index],
     };
   }
-  return { rawSchema, fieldPathId };
+  return { rawSchema, fieldPathId: resultPathId };
 }
 
 /** Given a `dottedPath` to a field in the `initialSchema`, iterate through each individual path in the schema until
@@ -453,8 +455,8 @@ export function computeUIComponentPropsFromGridSchema<
         if (isString(prop)) {
           const match: string[] | null = LOOKUP_REGEX.exec(prop);
           if (Array.isArray(match) && match.length > 1) {
-            const name = match[1];
-            uiProps[key] = lookupFromFormContext(registry, name, name);
+            const lookupName = match[1];
+            uiProps[key] = lookupFromFormContext(registry, lookupName, lookupName);
           }
         }
       });

package/src/components/fields/LayoutHeaderField.tsx

@@ -1,13 +1,5 @@
-import {
-  getTemplate,
-  getUiOptions,
-  titleId,
-  FieldProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TemplatesType,
-} from '@rjsf/utils';
+import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+import { getTemplate, getUiOptions, titleId } from '@rjsf/utils';
 
 /** The `LayoutHeaderField` component renders a `TitleFieldTemplate` with an `id` derived from the `fieldPathId`
  * and whether it is `required` from the props. The `title` is derived from the props as follows:

package/src/components/fields/LayoutMultiSchemaField.tsx

@@ -1,25 +1,27 @@
 import { useState, useEffect } from 'react';
+import type {
+  EnumOptionsType,
+  FieldProps,
+  FormContextType,
+  RJSFSchema,
+  SchemaUtilsType,
+  StrictRJSFSchema,
+  UiSchema,
+} from '@rjsf/utils';
 import {
   ANY_OF_KEY,
   CONST_KEY,
   DEFAULT_KEY,
-  EnumOptionsType,
   ERRORS_KEY,
-  FieldProps,
-  FormContextType,
   getDiscriminatorFieldFromSchema,
   hashObject,
   ID_KEY,
   ONE_OF_KEY,
   optionsList,
   PROPERTIES_KEY,
-  RJSFSchema,
   getTemplate,
   getUiOptions,
   getWidget,
-  SchemaUtilsType,
-  StrictRJSFSchema,
-  UiSchema,
 } from '@rjsf/utils';
 import get from 'lodash/get';
 import has from 'lodash/has';
@@ -111,7 +113,7 @@ export default function LayoutMultiSchemaField<
     hideError = false,
   } = props;
   const { widgets, schemaUtils, globalUiOptions } = registry;
-  const [enumOptions, setEnumOptions] = useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData)!);
+  const [enumOptions, setEnumOptions] = useState(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
   const id = get(fieldPathId, ID_KEY);
   const discriminator = getDiscriminatorFieldFromSchema(schema);
   const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, options);
@@ -124,7 +126,7 @@ export default function LayoutMultiSchemaField<
   useEffect(() => {
     setEnumOptions(computeEnumOptions(schema, options, schemaUtils, uiSchema, formData));
     // We are using hashes in place of the dependencies
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [schemaHash, optionsHash, schemaUtils, uiSchemaHash, formDataHash]);
   const {
     widget = discriminator ? 'radio' : 'select',
@@ -142,7 +144,7 @@ export default function LayoutMultiSchemaField<
   const option = getSelectedOption<S>(enumOptions, selectorField, selectedOption);
   // If the subschema doesn't declare a type, infer the type from the parent schema
   optionSchema = optionSchema?.type ? optionSchema : ({ ...optionSchema, type: option?.type || baseType } as S);
-  const Widget = getWidget<T, S, F>(optionSchema!, widget, widgets);
+  const Widget = getWidget<T, S, F>(optionSchema, widget, widgets);
 
   // The following code was copied from `@rjsf`'s `SchemaField`
   // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
@@ -159,6 +161,9 @@ export default function LayoutMultiSchemaField<
    *      will use it as the index of the new option to select
    */
   const onOptionChange = (opt?: unknown) => {
+    if (disabled || readonly) {
+      return;
+    }
     const newOption = getSelectedOption<S>(enumOptions, selectorField, opt);
     const oldOption = getSelectedOption<S>(enumOptions, selectorField, selectedOption);
 

package/src/components/fields/MultiSchemaField.tsx

@@ -1,10 +1,9 @@
 import { Component } from 'react';
+import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema, UiSchema } from '@rjsf/utils';
 import {
   ANY_OF_KEY,
   deepEquals,
   ERRORS_KEY,
-  FieldProps,
-  FormContextType,
   getDiscriminatorFieldFromSchema,
   getTemplate,
   getUiOptions,
@@ -12,23 +11,20 @@ import {
   isFormDataAvailable,
   mergeSchemas,
   ONE_OF_KEY,
-  RJSFSchema,
   shouldRenderOptionalField,
-  StrictRJSFSchema,
   TranslatableString,
-  UiSchema,
 } from '@rjsf/utils';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import omit from 'lodash/omit';
 
 /** Type used for the state of the `AnyOfField` component */
-type AnyOfFieldState<S extends StrictRJSFSchema = RJSFSchema> = {
+interface AnyOfFieldState<S extends StrictRJSFSchema = RJSFSchema> {
   /** The currently selected option */
   selectedOption: number;
   /** The option schemas after retrieving all $refs */
   retrievedOptions: S[];
-};
+}
 
 /** The `AnyOfField` component is used to render a field in the schema that is an `anyOf`, `allOf` or `oneOf`. It tracks
  * the currently selected option and cleans up any irrelevant data in `formData`.
@@ -39,6 +35,12 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
   FieldProps<T, S, F>,
   AnyOfFieldState<S>
 > {
+  /** Flag to skip the formData-change-driven option recalculation when the user just selected an option.
+   * Set to true in the setState callback of onOptionChange (after onChange is called), consumed and reset in
+   * componentDidUpdate. This prevents the matching-option recalculation from overriding a user's explicit choice
+   * when getDefaultFormState populates undefined properties that make deepEquals see a false formData change.
+   */
+  private skipNextOptionRecalculation = false;
   /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
    *
    * @param props - The `FieldProps` for this template
@@ -79,14 +81,19 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       newState = { selectedOption, retrievedOptions };
     }
     if (!deepEquals(formData, prevProps.formData) && fieldPathId.$id === prevProps.fieldPathId.$id) {
-      const { retrievedOptions } = newState;
-      const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
+      if (this.skipNextOptionRecalculation) {
+        this.skipNextOptionRecalculation = false;
+      } else {
+        const { retrievedOptions } = newState;
+        const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
 
-      if (prevState && matchingOption !== selectedOption) {
-        newState = { selectedOption: matchingOption, retrievedOptions };
+        if (prevState && matchingOption !== selectedOption) {
+          newState = { selectedOption: matchingOption, retrievedOptions };
+        }
       }
     }
     if (newState !== this.state) {
+      // oxlint-disable-next-line react/no-did-update-set-state -- guarded to prevent infinite loop
       this.setState(newState);
     }
   }
@@ -116,7 +123,10 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
    */
   onOptionChange = (option?: string) => {
     const { selectedOption, retrievedOptions } = this.state;
-    const { formData, onChange, registry, fieldPathId } = this.props;
+    const { disabled = false, formData, onChange, readonly = false, registry, fieldPathId } = this.props;
+    if (disabled || readonly) {
+      return;
+    }
     const { schemaUtils } = registry;
     const intOption = option !== undefined ? parseInt(option, 10) : -1;
     if (intOption === selectedOption) {
@@ -133,6 +143,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     }
 
     this.setState({ selectedOption: intOption }, () => {
+      this.skipNextOptionRecalculation = true;
       onChange(newFormData, fieldPathId.path, undefined, this.getFieldId());
     });
   };
@@ -160,7 +171,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
     } = this.props;
 
     const { widgets, fields, translateString, globalUiOptions, schemaUtils } = registry;
-    const { SchemaField: _SchemaField } = fields;
+    const { SchemaField: SchemaFieldComponent } = fields;
     const MultiSchemaFieldTemplate = getTemplate<'MultiSchemaFieldTemplate', T, S, F>(
       'MultiSchemaFieldTemplate',
       registry,
@@ -188,9 +199,9 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
 
     if (option) {
       // merge top level required field
-      const { required } = schema;
+      const { required: schemaRequired } = schema;
       // Merge in all the non-oneOf/anyOf properties and also skip the special ADDITIONAL_PROPERTY_FLAG property
-      optionSchema = required ? (mergeSchemas({ required }, option) as S) : option;
+      optionSchema = schemaRequired ? (mergeSchemas({ required: schemaRequired }, option) as S) : option;
     }
 
     // First we will check to see if there is an anyOf/oneOf override for the UI schema
@@ -199,12 +210,14 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       if (Array.isArray(uiSchema[ONE_OF_KEY])) {
         optionsUiSchema = uiSchema[ONE_OF_KEY];
       } else {
+        // oxlint-disable-next-line no-console
         console.warn(`uiSchema.oneOf is not an array for "${title || name}"`);
       }
     } else if (ANY_OF_KEY in schema && uiSchema && ANY_OF_KEY in uiSchema) {
       if (Array.isArray(uiSchema[ANY_OF_KEY])) {
         optionsUiSchema = uiSchema[ANY_OF_KEY];
       } else {
+        // oxlint-disable-next-line no-console
         console.warn(`uiSchema.anyOf is not an array for "${title || name}"`);
       }
     }
@@ -254,7 +267,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
 
     const optionsSchemaField =
       (optionSchema && optionSchema.type !== 'null' && (
-        <_SchemaField {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />
+        <SchemaFieldComponent {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />
       )) ||
       null;
 

package/src/components/fields/NullField.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 /** The `NullField` component is used to render a field in the schema is null. It also ensures that the `formData` is
  * also set to null if it has no value.

package/src/components/fields/NumberField.tsx

@@ -1,6 +1,5 @@
 import { useState, useCallback } from 'react';
-import {
-  asNumber,
+import type {
   ErrorSchema,
   FieldPathList,
   FieldProps,
@@ -8,6 +7,7 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
+import { asNumber } from '@rjsf/utils';
 
 // Matches a string that ends in a . character, optionally followed by a sequence of
 // digits followed by any number of 0 characters up until the end of the line.
@@ -52,23 +52,21 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
    * @param value - The current value for the change occurring
    */
   const handleChange = useCallback(
-    (value: FieldProps<T, S, F>['value'], path: FieldPathList, errorSchema?: ErrorSchema<T>, id?: string) => {
+    (newValue: FieldProps<T, S, F>['value'], path: FieldPathList, errorSchema?: ErrorSchema<T>, id?: string) => {
       // Cache the original value in component state
-      setLastValue(value);
+      setLastValue(newValue);
 
       // Normalize decimals that don't start with a zero character in advance so
       // that the rest of the normalization logic is simpler
-      if (`${value}`.charAt(0) === '.') {
-        value = `0${value}`;
-      }
+      const normalizedValue = `${newValue}`.startsWith('.') ? `0${newValue}` : newValue;
 
       // Check that the value is a string (this can happen if the widget used is a
       // <select>, due to an enum declaration etc) then, if the value ends in a
       // trailing decimal point or multiple zeroes, strip the trailing values
       const processed =
-        typeof value === 'string' && value.match(trailingCharMatcherWithPrefix)
-          ? asNumber(value.replace(trailingCharMatcher, ''))
-          : asNumber(value);
+        typeof normalizedValue === 'string' && normalizedValue.match(trailingCharMatcherWithPrefix)
+          ? asNumber(normalizedValue.replace(trailingCharMatcher, ''))
+          : asNumber(normalizedValue);
 
       onChange(processed as unknown as T, path, errorSchema, id);
     },

package/src/components/fields/ObjectField.tsx

@@ -1,4 +1,16 @@
-import { FocusEvent, useCallback, useRef, useState } from 'react';
+import type { FocusEvent } from 'react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import type {
+  ErrorSchema,
+  FieldPathId,
+  FieldPathList,
+  FieldProps,
+  FormContextType,
+  GenericObjectType,
+  Registry,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   ANY_OF_KEY,
@@ -9,25 +21,16 @@ import {
   shouldRenderOptionalField,
   toFieldPathId,
   useDeepCompareMemo,
-  ErrorSchema,
-  FieldPathId,
-  FieldPathList,
-  FieldProps,
-  FormContextType,
-  GenericObjectType,
   ONE_OF_KEY,
   PROPERTIES_KEY,
   REF_KEY,
-  Registry,
-  RJSFSchema,
-  StrictRJSFSchema,
   TranslatableString,
 } from '@rjsf/utils';
 import get from 'lodash/get';
 import has from 'lodash/has';
 import isObject from 'lodash/isObject';
 import set from 'lodash/set';
-import { Markdown } from 'markdown-to-jsx';
+import { Markdown } from 'markdown-to-jsx/react';
 
 import { ADDITIONAL_PROPERTY_KEY_REMOVE } from '../constants';
 
@@ -38,7 +41,7 @@ import { ADDITIONAL_PROPERTY_KEY_REMOVE } from '../constants';
  * @returns - True if the field `name` is required, false otherwise
  */
 function isRequired<S extends StrictRJSFSchema = RJSFSchema>(schema: S, name: string) {
-  return Array.isArray(schema.required) && schema.required.indexOf(name) !== -1;
+  return Array.isArray(schema.required) && schema.required.includes(name);
 }
 
 /** Returns a default value to be used for a new additional schema property of the given `type`
@@ -86,7 +89,7 @@ interface ObjectFieldPropertyProps<
 
 /** The `ObjectFieldProperty` component is used to render the `SchemaField` for a child property of an object
  */
-function ObjectFieldProperty<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function ObjectFieldPropertyFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: ObjectFieldPropertyProps<T, S, F>,
 ) {
   const {
@@ -125,14 +128,15 @@ function ObjectFieldProperty<T = any, S extends StrictRJSFSchema = RJSFSchema, F
    */
   const onPropertyChange = useCallback(
     (value: T | undefined, path: FieldPathList, newErrorSchema?: ErrorSchema<T>, id?: string) => {
+      // Don't set value = undefined for fields added by additionalProperties. Doing so removes them from the
+      // formData, which causes them to completely disappear (including the input field for the property name). Unlike
+      // fields which are "mandated" by the schema, these fields can be set to undefined by clicking a "delete field"
+      // button, so set empty values to the empty string.
+      let normalizedValue = value;
       if (value === undefined && addedByAdditionalProperties) {
-        // Don't set value = undefined for fields added by additionalProperties. Doing so removes them from the
-        // formData, which causes them to completely disappear (including the input field for the property name). Unlike
-        // fields which are "mandated" by the schema, these fields can be set to undefined by clicking a "delete field"
-        // button, so set empty values to the empty string.
-        value = '' as unknown as T;
+        normalizedValue = '' as unknown as T;
       }
-      onChange(value, path, newErrorSchema, id);
+      onChange(normalizedValue, path, newErrorSchema, id);
     },
     [onChange, addedByAdditionalProperties],
   );
@@ -193,6 +197,8 @@ function ObjectFieldProperty<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   );
 }
 
+const ObjectFieldProperty = memo(ObjectFieldPropertyFn) as typeof ObjectFieldPropertyFn;
+
 /** The `ObjectField` component is used to render a field in the schema that is of type `object`. It tracks whether an
  * additional property key was modified and what it was modified to
  *
@@ -222,8 +228,11 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
   const { OptionalDataControlsField } = fields;
   const formDataRef = useRef(formData);
   formDataRef.current = formData;
-  const schema: S = schemaUtils.retrieveSchema(rawSchema, formData, true);
-  const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+  const schema: S = useMemo(
+    () => schemaUtils.retrieveSchema(rawSchema, formData, true),
+    [schemaUtils, rawSchema, formData],
+  );
+  const uiOptions = useMemo(() => getUiOptions<T, S, F>(uiSchema, globalUiOptions), [uiSchema, globalUiOptions]);
   const { properties: schemaProperties = {} } = schema;
   // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
   const childFieldPathId = props.childFieldPathId ?? fieldPathId;
@@ -243,13 +252,14 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
    * @returns - The name of the next available key from `preferredKey`
    */
   const getAvailableKey = useCallback(
-    (preferredKey: string, formData?: T) => {
+    (preferredKey: string, existingFormData?: T) => {
       const { duplicateKeySuffixSeparator = '-' } = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
 
       let index = 0;
       let newKey = preferredKey;
-      while (has(formData, newKey)) {
-        newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
+      while (has(existingFormData, newKey)) {
+        index += 1;
+        newKey = `${preferredKey}${duplicateKeySuffixSeparator}${index}`;
       }
       return newKey;
     },
@@ -263,7 +273,6 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     if (!(schema.additionalProperties || schema.patternProperties)) {
       return;
     }
-    const { translateString } = registry;
     const newFormData = { ...formData } as T;
     const newKey = getAvailableKey('newKey', newFormData);
     if (schema.patternProperties) {
@@ -279,7 +288,6 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
         defaultValue = schema.additionalProperties.default;
         let apSchema = schema.additionalProperties;
         if (REF_KEY in apSchema) {
-          const { schemaUtils } = registry;
           apSchema = schemaUtils.retrieveSchema({ [REF_KEY]: apSchema[REF_KEY] } as S, formData);
           type = apSchema.type;
           constValue = apSchema.const;
@@ -300,7 +308,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
       lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
     }
     onChange(newFormData, childFieldPathId.path);
-  }, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
+  }, [formData, onChange, translateString, schemaUtils, childFieldPathId, getAvailableKey, schema]);
 
   /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
    * callback will attempt to rename the key and move the existing data to that key, calling `onChange` when it does.
@@ -319,8 +327,9 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
         };
         const newKeys: GenericObjectType = { [oldKey]: actualNewKey };
         const keyValues = Object.keys(newFormData).map((key) => {
-          const newKey = newKeys[key] || key;
-          return { [newKey]: newFormData[key] };
+          // `Object.hasOwn` so a falsy rename target (e.g. `""`) isn't dropped.
+          const mappedKey = Object.hasOwn(newKeys, key) ? newKeys[key] : key;
+          return { [mappedKey]: newFormData[key] };
         });
         const renamedObj = Object.assign({}, ...keyValues);
 
@@ -384,20 +393,20 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     // getDisplayLabel() always returns false for object types, so just check the `uiOptions.label`
     title: uiOptions.label === false ? '' : templateTitle,
     description: uiOptions.label === false ? undefined : description,
-    properties: orderedProperties.map((name) => {
-      const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
-      const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
+    properties: orderedProperties.map((propertyName) => {
+      const addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, propertyName, ADDITIONAL_PROPERTY_FLAG]);
+      const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[propertyName];
       const hidden = getUiOptions<T, S, F>(fieldUiSchema).widget === 'hidden';
       const content = (
         <ObjectFieldProperty<T, S, F>
-          key={getStableKey(name)}
-          propertyName={name}
-          required={isRequired<S>(schema, name)}
-          schema={get(schema, [PROPERTIES_KEY, name], {}) as S}
+          key={getStableKey(propertyName)}
+          propertyName={propertyName}
+          required={isRequired<S>(schema, propertyName)}
+          schema={get(schema, [PROPERTIES_KEY, propertyName], {}) as S}
           uiSchema={fieldUiSchema}
-          errorSchema={get(errorSchema, [name])}
+          errorSchema={get(errorSchema, [propertyName])}
           fieldPathId={childFieldPathId}
-          formData={get(formData, [name])}
+          formData={get(formData, [propertyName])}
           handleKeyRename={handleKeyRename}
           handleRemoveProperty={handleRemoveProperty}
           addedByAdditionalProperties={addedByAdditionalProperties}
@@ -412,7 +421,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
       );
       return {
         content,
-        name,
+        name: propertyName,
         readonly,
         disabled,
         required,

package/src/components/fields/OptionalDataControlsField.tsx

@@ -1,14 +1,16 @@
-import {
+import type {
   FieldProps,
   FormContextType,
+  OptionalDataControlsTemplateProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import {
   getSchemaType,
   getTemplate,
   getUiOptions,
   isFormDataAvailable,
   optionalControlsId,
-  OptionalDataControlsTemplateProps,
-  RJSFSchema,
-  StrictRJSFSchema,
   TranslatableString,
 } from '@rjsf/utils';