@rjsf/core 6.1.2 → 6.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/core",
-  "version": "6.1.2",
+  "version": "6.2.4",
   "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",
@@ -66,7 +66,7 @@
     "node": ">=20"
   },
   "peerDependencies": {
-    "@rjsf/utils": "^6.x",
+    "@rjsf/utils": "^6.2.x",
     "react": ">=18"
   },
   "dependencies": {
@@ -76,21 +76,18 @@
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rjsf/snapshot-tests": "^6.x",
-    "@rjsf/utils": "^6.x",
-    "@rjsf/validator-ajv8": "^6.x",
+    "@rjsf/snapshot-tests": "^6.2.0",
+    "@rjsf/utils": "^6.2.0",
+    "@rjsf/validator-ajv8": "^6.2.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/react-portal": "^4.0.7",
     "ajv": "^8.17.1",
     "atob": "^2.1.2",
-    "chai": "^3.5.0",
     "eslint": "^8.57.1",
-    "html": "^1.0.0",
     "jsdom": "^27.0.1",
-    "mocha": "^11.7.4",
-    "react-portal": "^4.3.0",
-    "sinon": "^9.2.4"
+    "react-portal": "^4.3.0"
   },
   "directories": {
     "test": "test"

package/src/components/Form.tsx

@@ -9,13 +9,11 @@ import {
   FieldPathId,
   FieldPathList,
   FormContextType,
-  GenericObjectType,
   getChangedFields,
   getTemplate,
   getUiOptions,
   isObject,
   mergeObjects,
-  NAME_KEY,
   PathSchema,
   StrictRJSFSchema,
   Registry,
@@ -23,7 +21,6 @@ import {
   RegistryWidgetsType,
   RJSFSchema,
   RJSFValidationError,
-  RJSF_ADDITIONAL_PROPERTIES_FLAG,
   SchemaUtilsType,
   shouldRender,
   SUBMIT_BTN_OPTIONS_KEY,
@@ -44,6 +41,8 @@ import {
   ERRORS_KEY,
   ID_KEY,
   NameGeneratorFunction,
+  getUsedFormData,
+  getFieldNames,
 } from '@rjsf/utils';
 import _cloneDeep from 'lodash/cloneDeep';
 import _get from 'lodash/get';
@@ -365,6 +364,11 @@ export default class Form<
    */
   pendingChanges: PendingChange<T>[] = [];
 
+  /** Flag to track when we're processing a user-initiated field change.
+   * This prevents componentDidUpdate from reverting oneOf/anyOf option switches.
+   */
+  private _isProcessingUserChange = false;
+
   /** Constructs the `Form` from the `props`. Will setup the initial state from the props. It will also call the
    * `onChange` handler if the initially provided `formData` is modified to add missing default values as part of the
    * state construction.
@@ -459,11 +463,19 @@ export default class Form<
   ) {
     if (snapshot.shouldUpdate) {
       const { nextState } = snapshot;
-      if (
-        !deepEquals(nextState.formData, this.props.formData) &&
-        !deepEquals(nextState.formData, prevState.formData) &&
-        this.props.onChange
-      ) {
+
+      // Prevent oneOf/anyOf option switches from reverting when getStateFromProps
+      // re-evaluates and produces stale formData.
+      const nextStateDiffersFromProps = !deepEquals(nextState.formData, this.props.formData);
+      const wasProcessingUserChange = this._isProcessingUserChange;
+      this._isProcessingUserChange = false;
+
+      if (wasProcessingUserChange && nextStateDiffersFromProps) {
+        // Skip - the user's option switch is already applied via processPendingChange
+        return;
+      }
+
+      if (nextStateDiffersFromProps && !deepEquals(nextState.formData, prevState.formData) && this.props.onChange) {
         this.props.onChange(toIChangeEvent(nextState));
       }
       this.setState(nextState);
@@ -757,73 +769,32 @@ export default class Form<
    *
    * @param formData - The data for the `Form`
    * @param fields - The fields to keep while filtering
+   * @deprecated - To be removed as an exported `Form` function in a future release; there isn't a planned replacement
    */
-  getUsedFormData = (formData: T | undefined, fields: string[][]): T | undefined => {
-    // For the case of a single input form
-    if (fields.length === 0 && typeof formData !== 'object') {
-      return formData;
-    }
-
-    // _pick has incorrect type definition, it works with string[][], because lodash/hasIn supports it
-    const data: GenericObjectType = _pick(formData, fields as unknown as string[]);
-    if (Array.isArray(formData)) {
-      return Object.keys(data).map((key: string) => data[key]) as unknown as T;
-    }
-
-    return data as T;
+  getUsedFormData = (formData: T | undefined, fields: string[]): T | undefined => {
+    return getUsedFormData(formData, fields);
   };
 
   /** Returns the list of field names from inspecting the `pathSchema` as well as using the `formData`
    *
    * @param pathSchema - The `PathSchema` object for the form
    * @param [formData] - The form data to use while checking for empty objects/arrays
+   * @deprecated - To be removed as an exported `Form` function in a future release; there isn't a planned replacement
    */
   getFieldNames = (pathSchema: PathSchema<T>, formData?: T): string[][] => {
-    const formValueHasData = (value: T, isLeaf: boolean) =>
-      typeof value !== 'object' || _isEmpty(value) || (isLeaf && !_isEmpty(value));
-    const getAllPaths = (_obj: GenericObjectType, acc: string[][] = [], paths: string[][] = [[]]) => {
-      const objKeys = Object.keys(_obj);
-      objKeys.forEach((key: string) => {
-        const data = _obj[key];
-        if (typeof data === 'object') {
-          const newPaths = paths.map((path) => [...path, key]);
-          // If an object is marked with additionalProperties, all its keys are valid
-          if (data[RJSF_ADDITIONAL_PROPERTIES_FLAG] && data[NAME_KEY] !== '') {
-            acc.push(data[NAME_KEY]);
-          } else {
-            getAllPaths(data, acc, newPaths);
-          }
-        } else if (key === NAME_KEY && data !== '') {
-          paths.forEach((path) => {
-            const formValue = _get(formData, path);
-            const isLeaf = objKeys.length === 1;
-            // adds path to fieldNames if it points to a value or an empty object/array which is not a leaf
-            if (
-              formValueHasData(formValue, isLeaf) ||
-              (Array.isArray(formValue) && formValue.every((val) => formValueHasData(val, isLeaf)))
-            ) {
-              acc.push(path);
-            }
-          });
-        }
-      });
-      return acc;
-    };
-
-    return getAllPaths(pathSchema);
+    return getFieldNames(pathSchema, formData);
   };
 
   /** Returns the `formData` after filtering to remove any extra data not in a form field
    *
    * @param formData - The data for the `Form`
    * @returns The `formData` after omitting extra data
+   * @deprecated - To be removed as an exported `Form` function in a future release, use `SchemaUtils.omitExtraData`
+   *               instead.
    */
   omitExtraData = (formData?: T): T | undefined => {
     const { schema, schemaUtils } = this.state;
-    const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-    const pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', formData);
-    const fieldNames = this.getFieldNames(pathSchema, formData);
-    return this.getUsedFormData(formData, fieldNames);
+    return schemaUtils.omitExtraData(schema, formData);
   };
 
   /** Allows a user to set a value for the provided `fieldPath`, which must be either a dotted path to the field OR a
@@ -868,6 +839,9 @@ export default class Form<
     if (this.pendingChanges.length === 0) {
       return;
     }
+    // Mark that we're processing a user-initiated change.
+    // This prevents componentDidUpdate from reverting oneOf/anyOf option switches.
+    this._isProcessingUserChange = true;
     const { newValue, path, id } = this.pendingChanges[0];
     const { newErrorSchema } = this.pendingChanges[0];
     const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
@@ -878,6 +852,18 @@ export default class Form<
     const isRootPath = !path || path.length === 0 || (path.length === 1 && path[0] === rootPathId);
     let retrievedSchema = this.state.retrievedSchema;
     let formData = isRootPath ? newValue : _cloneDeep(oldFormData);
+
+    // When switching from null to an object option in oneOf, MultiSchemaField sends
+    // an object with property names but undefined values (e.g., {types: undefined, content: undefined}).
+    // In this case, pass undefined to getStateFromProps to trigger fresh default computation.
+    // Only do this when the previous formData was null/undefined (switching FROM null).
+    const hasOnlyUndefinedValues =
+      isObject(formData) &&
+      Object.keys(formData as object).length > 0 &&
+      Object.values(formData as object).every((v) => v === undefined);
+    const wasPreviouslyNull = oldFormData === null || oldFormData === undefined;
+    const inputForDefaults = hasOnlyUndefinedValues && wasPreviouslyNull ? undefined : formData;
+
     if (isObject(formData) || Array.isArray(formData)) {
       if (newValue === ADDITIONAL_PROPERTY_KEY_REMOVE) {
         // For additional properties, we were given the special remove this key value, so unset it
@@ -887,7 +873,7 @@ export default class Form<
         _set(formData, path, newValue);
       }
       // Pass true to skip live validation in `getStateFromProps()` since we will do it a bit later
-      const newState = this.getStateFromProps(this.props, formData, undefined, undefined, undefined, true);
+      const newState = this.getStateFromProps(this.props, inputForDefaults, undefined, undefined, undefined, true);
       formData = newState.formData;
       retrievedSchema = newState.retrievedSchema;
     }

package/src/components/fields/LayoutMultiSchemaField.tsx

@@ -183,6 +183,7 @@ export default function LayoutMultiSchemaField<
 
   return (
     <FieldTemplate
+      fieldPathId={fieldPathId}
       id={id}
       schema={schema}
       label={(title || schema.title) ?? ''}

package/src/components/fields/SchemaField.tsx

@@ -264,6 +264,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     rawHelp: typeof help === 'string' ? help : undefined,
     errors: errorsComponent,
     rawErrors: hideError ? undefined : __errors,
+    fieldPathId,
     id,
     label,
     hidden,

package/src/components/templates/BaseInputTemplate.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
 import {
   ariaDescribedByIds,
   BaseInputTemplateProps,
@@ -42,6 +42,7 @@ export default function BaseInputTemplate<
     hideError, // remove this from ...rest
     ...rest
   } = props;
+  const { ClearButton } = registry.templates.ButtonTemplates;
 
   // Note: since React 15.2.0 we can't forward unknown element attributes, so we
   // exclude the "options" and "schema" ones here.
@@ -73,6 +74,14 @@ export default function BaseInputTemplate<
     ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value),
     [onFocus, id],
   );
+  const _onClear = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onChange(options.emptyValue ?? '');
+    },
+    [onChange, options.emptyValue],
+  );
 
   return (
     <>
@@ -91,6 +100,9 @@ export default function BaseInputTemplate<
         onFocus={_onFocus}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />
+      {options.allowClearTextInputs && !readonly && !disabled && inputValue && (
+        <ClearButton registry={registry} onClick={_onClear} />
+      )}
       {Array.isArray(schema.examples) && (
         <datalist key={`datalist_${id}`} id={examplesId(id)}>
           {(schema.examples as string[])

package/src/components/templates/ButtonTemplates/IconButton.tsx

@@ -48,3 +48,27 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     <IconButton title={translateString(TranslatableString.RemoveButton)} {...props} iconType='danger' icon='remove' />
   );
 }
+
+export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  className,
+  onClick,
+  disabled,
+  registry,
+  ...props
+}: IconButtonProps<T, S, F>) {
+  const { translateString } = registry;
+  return (
+    <IconButton
+      id={id}
+      iconType='default'
+      icon='remove'
+      className='btn-clear col-xs-12'
+      title={translateString(TranslatableString.ClearButton)}
+      onClick={onClick}
+      disabled={disabled}
+      registry={registry}
+      {...props}
+    />
+  );
+}

package/src/components/templates/ButtonTemplates/index.ts

@@ -2,7 +2,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@r
 
 import SubmitButton from './SubmitButton';
 import AddButton from './AddButton';
-import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton';
+import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton, ClearButton } from './IconButton';
 
 function buttonTemplates<
   T = any,
@@ -16,6 +16,7 @@ function buttonTemplates<
     MoveDownButton,
     MoveUpButton,
     RemoveButton,
+    ClearButton,
   };
 }
 

package/src/components/templates/ObjectFieldTemplate.tsx

@@ -46,6 +46,15 @@ export default function ObjectFieldTemplate<
     registry,
     options,
   );
+
+  // For "pure union" schemas (oneOf/anyOf without properties), skip rendering the empty fieldset wrapper.
+  // The AnyOfField/OneOfField will handle rendering the union selector and selected variant's content directly.
+  const isPureUnionSchema = (schema.oneOf || schema.anyOf) && !schema.properties && properties.length === 0;
+
+  if (isPureUnionSchema) {
+    return null;
+  }
+
   const showOptionalDataControlInTitle = !readonly && !disabled;
   // Button templates are not overridden in the uiSchema
   const {

package/src/components/widgets/TextareaWidget.tsx

@@ -54,9 +54,4 @@ function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
   );
 }
 
-TextareaWidget.defaultProps = {
-  autofocus: false,
-  options: {},
-};
-
 export default TextareaWidget;