@rjsf/core 6.4.2 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/core",
-  "version": "6.4.2",
+  "version": "6.5.0",
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "compileReplacer": "tsc -p tsconfig.replacer.json && move-file lodashReplacer.js lodashReplacer.cjs",
@@ -70,20 +70,20 @@
     "react": ">=18"
   },
   "dependencies": {
-    "lodash": "^4.17.23",
-    "lodash-es": "^4.17.23",
+    "lodash": "^4.18.1",
+    "lodash-es": "^4.18.1",
     "markdown-to-jsx": "^8.0.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rjsf/snapshot-tests": "6.4.2",
-    "@rjsf/utils": "6.4.2",
-    "@rjsf/validator-ajv8": "6.4.2",
+    "@rjsf/snapshot-tests": "6.5.0",
+    "@rjsf/utils": "6.5.0",
+    "@rjsf/validator-ajv8": "6.5.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/react-portal": "^4.0.7",
-    "ajv": "^8.17.1",
+    "ajv": "^8.18.0",
     "atob": "^2.1.2",
     "eslint": "^8.57.1",
     "jsdom": "^27.0.1",

package/src/components/Form.tsx

@@ -6,7 +6,6 @@ import {
   ErrorSchema,
   ErrorSchemaBuilder,
   ErrorTransformer,
-  expandUiSchemaDefinitions,
   FieldPathId,
   FieldPathList,
   FormContextType,
@@ -22,6 +21,7 @@ import {
   RegistryWidgetsType,
   RJSFSchema,
   RJSFValidationError,
+  removeOptionalEmptyObjects,
   SchemaUtilsType,
   shouldRender,
   SUBMIT_BTN_OPTIONS_KEY,
@@ -208,6 +208,12 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    * called. Set to `false` by default.
    */
   omitExtraData?: boolean;
+  /** If set to true, optional object properties whose fields are all empty (undefined, null, or empty string)
+   * will be automatically removed from formData. This prevents the scenario where interacting with fields inside
+   * an optional object "activates" it permanently, making the form unsubmittable when the optional object has
+   * required inner fields. This works independently of `omitExtraData`. Set to `false` by default.
+   */
+  removeEmptyOptionalObjects?: boolean;
   /** When this prop is set to `top` or 'bottom', a list of errors (or the custom error list defined in the `ErrorList`) will also
    * show. When set to false, only inline input validation errors will be shown. Set to `top` by default
    */
@@ -663,11 +669,6 @@ export default class Form<
     const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
     const registry = deepEquals(state.registry, newRegistry) ? state.registry : newRegistry;
 
-    // Pre-expand ui:definitions into the uiSchema structure (must happen after registry is created)
-    const expandedUiSchema: UiSchema<T, S, F> = registry.uiSchemaDefinitions
-      ? expandUiSchemaDefinitions<T, S, F>(rootSchema, uiSchema, registry)
-      : uiSchema;
-
     // Only compute a new `fieldPathId` when the `idPrefix` is different than the existing fieldPathId's ID_KEY
     const fieldPathId =
       state.fieldPathId && state.fieldPathId?.[ID_KEY] === registry.globalFormOptions.idPrefix
@@ -676,7 +677,7 @@ export default class Form<
     const nextState: FormState<T, S, F> = {
       schemaUtils,
       schema: rootSchema,
-      uiSchema: expandedUiSchema,
+      uiSchema,
       fieldPathId,
       formData,
       edit,
@@ -892,7 +893,8 @@ export default class Form<
     this._isProcessingUserChange = true;
     const { newValue, path, id } = this.pendingChanges[0];
     const { newErrorSchema } = this.pendingChanges[0];
-    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
+    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange, removeEmptyOptionalObjects } =
+      this.props;
     const { formData: oldFormData, schemaUtils, schema, fieldPathId, schemaValidationErrorSchema, errors } = this.state;
     let { customErrors, errorSchema: originalErrorSchema } = this.state;
     const rootPathId = fieldPathId.path[0] || '';
@@ -937,6 +939,19 @@ export default class Form<
       };
     }
 
+    if (removeEmptyOptionalObjects) {
+      newFormData = removeOptionalEmptyObjects(
+        schemaUtils.getValidator(),
+        schema,
+        schemaUtils.getRootSchema(),
+        newFormData,
+      ) as T;
+      state = {
+        ...state,
+        formData: newFormData,
+      };
+    }
+
     if (newErrorSchema) {
       // First check to see if there is an existing validation error on this path...
       // @ts-expect-error TS2590, because getting from the error schema is confusing TS
@@ -1051,19 +1066,28 @@ export default class Form<
    * @param data - The data associated with the field that was blurred
    */
   onBlur = (id: string, data: any) => {
-    const { onBlur, omitExtraData, liveOmit, liveValidate } = this.props;
+    const { onBlur, omitExtraData, liveOmit, liveValidate, removeEmptyOptionalObjects } = this.props;
     if (onBlur) {
       onBlur(id, data);
     }
     if ((omitExtraData === true && liveOmit === 'onBlur') || liveValidate === 'onBlur') {
       const { onChange, extraErrors } = this.props;
-      const { formData } = this.state;
+      const { formData, schemaUtils, schema } = this.state;
       let newFormData: T | undefined = formData;
       let state: Partial<FormState<T, S, F>> = { formData: newFormData };
       if (omitExtraData === true && liveOmit === 'onBlur') {
         newFormData = this.omitExtraData(formData);
         state = { formData: newFormData };
       }
+      if (removeEmptyOptionalObjects) {
+        newFormData = removeOptionalEmptyObjects(
+          schemaUtils.getValidator(),
+          schema,
+          schemaUtils.getRootSchema(),
+          newFormData,
+        ) as T;
+        state = { ...state, formData: newFormData };
+      }
       if (liveValidate === 'onBlur') {
         const { schema, schemaUtils, errorSchema, customErrors, retrievedSchema } = this.state;
         const liveValidation = this.liveValidate(
@@ -1121,13 +1145,23 @@ export default class Form<
     }
 
     event.persist();
-    const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
+    const { omitExtraData, extraErrors, noValidate, onSubmit, removeEmptyOptionalObjects } = this.props;
     let { formData: newFormData } = this.state;
 
     if (omitExtraData === true) {
       newFormData = this.omitExtraData(newFormData);
     }
 
+    if (removeEmptyOptionalObjects) {
+      const { schemaUtils, schema } = this.state;
+      newFormData = removeOptionalEmptyObjects(
+        schemaUtils.getValidator(),
+        schema,
+        schemaUtils.getRootSchema(),
+        newFormData,
+      ) as T;
+    }
+
     if (noValidate || this.validateFormWithFormData(newFormData)) {
       // There are no errors generated through schema validation.
       // Check for user provided errors and update state accordingly.
@@ -1234,8 +1268,9 @@ export default class Form<
     const elementId = path.join(idSeparator);
     let field = this.formElement.current.elements[elementId];
     if (!field) {
-      // if not an exact match, try finding an input starting with the element id (like radio buttons or checkboxes)
-      field = this.formElement.current.querySelector(`input[id^="${elementId}"`);
+      // if not an exact match, try finding a focusable element starting with the element id (like radio buttons or checkboxes)
+      // some themes (e.g. shadcn) use button elements instead of native inputs for radio groups
+      field = this.formElement.current.querySelector(`input[id^="${elementId}"], button[id^="${elementId}"]`);
     }
     if (field && field.length) {
       // If we got a list with length > 0
@@ -1310,11 +1345,20 @@ export default class Form<
    * @returns - True if the form is valid, false otherwise.
    */
   validateForm() {
-    const { omitExtraData } = this.props;
+    const { omitExtraData, removeEmptyOptionalObjects } = this.props;
     let { formData: newFormData } = this.state;
     if (omitExtraData === true) {
       newFormData = this.omitExtraData(newFormData);
     }
+    if (removeEmptyOptionalObjects) {
+      const { schemaUtils, schema } = this.state;
+      newFormData = removeOptionalEmptyObjects(
+        schemaUtils.getValidator(),
+        schema,
+        schemaUtils.getRootSchema(),
+        newFormData,
+      ) as T;
+    }
     return this.validateFormWithFormData(newFormData);
   }
 

package/src/components/fields/ObjectField.tsx

@@ -1,4 +1,4 @@
-import { FocusEvent, useCallback, useState } from 'react';
+import { FocusEvent, useCallback, useRef, useState } from 'react';
 import {
   ADDITIONAL_PROPERTY_FLAG,
   ANY_OF_KEY,
@@ -220,11 +220,14 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
   } = props;
   const { fields, schemaUtils, translateString, globalUiOptions } = registry;
   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 { properties: schemaProperties = {} } = schema;
   // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
   const childFieldPathId = props.childFieldPathId ?? fieldPathId;
+  const lastRenamedProperty = useRef({ previousKey: '', currentKey: undefined as string | undefined });
 
   const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
   const description = uiOptions.description ?? schema.description;
@@ -292,6 +295,10 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
       set(newFormData as GenericObjectType, newKey, newValue);
     }
 
+    if (lastRenamedProperty.current.previousKey === newKey) {
+      lastRenamedProperty.current.currentKey = newKey;
+      lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
+    }
     onChange(newFormData, childFieldPathId.path);
   }, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
 
@@ -305,9 +312,10 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
   const handleKeyRename = useCallback(
     (oldKey: string, newKey: string) => {
       if (oldKey !== newKey) {
-        const actualNewKey = getAvailableKey(newKey, formData);
+        const currentFormData = formDataRef.current;
+        const actualNewKey = getAvailableKey(newKey, currentFormData);
         const newFormData: GenericObjectType = {
-          ...(formData as GenericObjectType),
+          ...(currentFormData as GenericObjectType),
         };
         const newKeys: GenericObjectType = { [oldKey]: actualNewKey };
         const keyValues = Object.keys(newFormData).map((key) => {
@@ -316,10 +324,15 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
         });
         const renamedObj = Object.assign({}, ...keyValues);
 
+        formDataRef.current = renamedObj as T;
+        if (oldKey !== lastRenamedProperty.current.currentKey) {
+          lastRenamedProperty.current.previousKey = oldKey;
+        }
+        lastRenamedProperty.current.currentKey = actualNewKey;
         onChange(renamedObj, childFieldPathId.path);
       }
     },
-    [formData, onChange, childFieldPathId, getAvailableKey],
+    [onChange, childFieldPathId, getAvailableKey],
   );
 
   /** Handles the remove click which calls the `onChange` callback with the special ADDITIONAL_PROPERTY_FIELD_REMOVE
@@ -332,6 +345,18 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     [onChange, childFieldPathId],
   );
 
+  /** Returns the stable React key for a property. For the most recently renamed
+   * additional property, returns the previous key so that React reuses the
+   * existing component instance instead of unmounting/remounting it. This
+   * preserves DOM focus naturally without manual focus management.
+   */
+  const getStableKey = useCallback((property: string) => {
+    if (lastRenamedProperty.current.currentKey === property) {
+      return lastRenamedProperty.current.previousKey;
+    }
+    return property;
+  }, []);
+
   if (!renderOptionalField || hasFormData) {
     try {
       const properties = Object.keys(schemaProperties);
@@ -365,7 +390,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>
-          key={name}
+          key={getStableKey(name)}
           propertyName={name}
           required={isRequired<S>(schema, name)}
           schema={get(schema, [PROPERTIES_KEY, name], {}) as S}

package/src/components/templates/WrapIfAdditionalTemplate.tsx

@@ -68,6 +68,7 @@ export default function WrapIfAdditionalTemplate<
             {displayLabel && <Label label={keyLabel} required={required} id={`${id}-key`} />}
             {displayLabel && rawDescription && <div>&nbsp;</div>}
             <input
+              key={label}
               className='form-control'
               type='text'
               id={`${id}-key`}

package/src/components/widgets/CheckboxesWidget.tsx

@@ -1,10 +1,12 @@
 import { ChangeEvent, FocusEvent, useCallback } from 'react';
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
   enumOptionsDeselectValue,
   enumOptionsIsSelected,
   enumOptionsSelectValue,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   optionId,
   FormContextType,
   WidgetProps,
@@ -20,7 +22,7 @@ import {
 function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
   disabled,
-  options: { inline = false, enumOptions, enumDisabled, emptyValue },
+  options,
   value,
   autofocus = false,
   readonly,
@@ -29,19 +31,22 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   onFocus,
   htmlName,
 }: WidgetProps<T, S, F>) {
+  const { inline = false, enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
-      onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
-    [onBlur, id, enumOptions, emptyValue],
+      onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onBlur, id, enumOptions, emptyValue, optionValueFormat],
   );
 
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
-      onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
-    [onFocus, id, enumOptions, emptyValue],
+      onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onFocus, id, enumOptions, emptyValue, optionValueFormat],
   );
+
   return (
     <div className='checkboxes' id={id}>
       {Array.isArray(enumOptions) &&
@@ -65,7 +70,7 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
                 id={optionId(id, index)}
                 name={htmlName || id}
                 checked={checked}
-                value={String(index)}
+                value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
                 disabled={disabled || itemDisabled || readonly}
                 autoFocus={autofocus && index === 0}
                 onChange={handleChange}

package/src/components/widgets/RadioWidget.tsx

@@ -1,8 +1,10 @@
 import { FocusEvent, useCallback } from 'react';
 import {
   ariaDescribedByIds,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
   enumOptionsIsSelected,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   optionId,
   FormContextType,
   RJSFSchema,
@@ -29,17 +31,18 @@ function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   htmlName,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
-      onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
-    [onBlur, enumOptions, emptyValue, id],
+      onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onBlur, enumOptions, emptyValue, id, optionValueFormat],
   );
 
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
-      onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue)),
-    [onFocus, enumOptions, emptyValue, id],
+      onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onFocus, enumOptions, emptyValue, id, optionValueFormat],
   );
 
   return (
@@ -60,7 +63,7 @@ function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
                 checked={checked}
                 name={htmlName || id}
                 required={required}
-                value={String(i)}
+                value={enumOptionValueEncoder(option.value, i, optionValueFormat)}
                 disabled={disabled || itemDisabled || readonly}
                 autoFocus={autofocus && i === 0}
                 onChange={handleChange}

package/src/components/widgets/SelectWidget.tsx

@@ -1,8 +1,10 @@
 import { ChangeEvent, FocusEvent, SyntheticEvent, useCallback } from 'react';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -42,32 +44,33 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : '';
+  const optionValueFormat = getOptionValueFormat(options);
 
   const handleFocus = useCallback(
     (event: FocusEvent<HTMLSelectElement>) => {
       const newValue = getValue(event, multiple);
-      return onFocus(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
+      return onFocus(id, enumOptionValueDecoder<S>(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onFocus, id, multiple, enumOptions, optEmptyVal],
+    [onFocus, id, multiple, enumOptions, optEmptyVal, optionValueFormat],
   );
 
   const handleBlur = useCallback(
     (event: FocusEvent<HTMLSelectElement>) => {
       const newValue = getValue(event, multiple);
-      return onBlur(id, enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
+      return onBlur(id, enumOptionValueDecoder<S>(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onBlur, id, multiple, enumOptions, optEmptyVal],
+    [onBlur, id, multiple, enumOptions, optEmptyVal, optionValueFormat],
   );
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLSelectElement>) => {
       const newValue = getValue(event, multiple);
-      return onChange(enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal));
+      return onChange(enumOptionValueDecoder<S>(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onChange, multiple, enumOptions, optEmptyVal],
+    [onChange, multiple, enumOptions, optEmptyVal, optionValueFormat],
   );
 
-  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+  const selectValue = enumOptionSelectedValue<S>(value, enumOptions, multiple, optionValueFormat, emptyValue);
   const showPlaceholderOption = !multiple && schema.default === undefined;
 
   return (
@@ -77,7 +80,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
       multiple={multiple}
       role='combobox'
       className='form-control'
-      value={typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes}
+      value={selectValue}
       required={required}
       disabled={disabled || readonly}
       autoFocus={autofocus}
@@ -91,7 +94,7 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
         enumOptions.map(({ value, label }, i) => {
           const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
           return (
-            <option key={i} value={String(i)} disabled={disabled}>
+            <option key={i} value={enumOptionValueEncoder(value, i, optionValueFormat)} disabled={disabled}>
               {label}
             </option>
           );