@rjsf/core 6.6.2 → 6.7.0

package/src/components/fields/SchemaField.tsx

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import { useCallback, Component } from 'react';
+import { useCallback, memo } from 'react';
 import type {
   ErrorSchema,
   Field,
@@ -9,6 +9,7 @@ import type {
   FieldTemplateProps,
   FormContextType,
   Registry,
+  RJSFMarkedSchema,
   RJSFSchema,
   StrictRJSFSchema,
   UIOptionsType,
@@ -16,6 +17,7 @@ import type {
 import {
   ADDITIONAL_PROPERTY_FLAG,
   ANY_OF_KEY,
+  deepEquals,
   descriptionId,
   getSchemaType,
   getTemplate,
@@ -24,7 +26,8 @@ import {
   isFormDataAvailable,
   ONE_OF_KEY,
   resolveUiSchema,
-  shouldRender,
+  RJSF_REF_CYCLE_KEY,
+  shallowEquals,
   shouldRenderOptionalField,
   toFieldPathId,
   TranslatableString,
@@ -59,7 +62,7 @@ function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   registry: Registry<T, S, F>,
 ): ComponentType<FieldProps<T, S, F>> {
   const { field } = uiOptions;
-  const { fields } = registry;
+  const { fields, schemaUtils } = registry;
   if (typeof field === 'function') {
     return field;
   }
@@ -77,9 +80,13 @@ function getFieldComponent<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     componentName = schemaId;
   }
 
-  // If the type is not defined and the schema uses 'anyOf' or 'oneOf', don't
-  // render a field and let the MultiSchemaField component handle the form display
-  if (!componentName && (schema.anyOf || schema.oneOf)) {
+  // If the schema uses 'anyOf' or 'oneOf' and is not a pure select (all-constant options),
+  // let the MultiSchemaField component handle the form display entirely.
+  // ObjectField is excluded: it renders shared properties (defined at the parent schema
+  // level) alongside the XxxOfField option selector.
+  // All other field types — including primitives and arrays — have no shared renderable
+  // properties, so the outer FieldComponent would only produce a spurious duplicate input.
+  if ((schema.anyOf || schema.oneOf) && !schemaUtils.isSelect(schema) && componentName !== 'ObjectField') {
     return () => null;
   }
 
@@ -111,18 +118,7 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     wasPropertyKeyModified = false,
   } = props;
   const { schemaUtils, globalFormOptions, globalUiOptions, fields } = registry;
-  const { AnyOfField: _AnyOfField, OneOfField: _OneOfField } = fields;
-  const uiSchema = resolveUiSchema<T, S, F>(_schema, _uiSchema, registry);
-  const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
-  const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, uiOptions);
-  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
-    'DescriptionFieldTemplate',
-    registry,
-    uiOptions,
-  );
-  const FieldHelpTemplate = getTemplate<'FieldHelpTemplate', T, S, F>('FieldHelpTemplate', registry, uiOptions);
-  const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, uiOptions);
-  const schema = schemaUtils.retrieveSchema(_schema, formData);
+  const { AnyOfField: _AnyOfField, OneOfField: _OneOfField, CyclicSchemaField } = fields;
   const fieldId = fieldPathId[ID_KEY];
 
   /** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
@@ -136,6 +132,24 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     [fieldId, onChange],
   );
 
+  // Stop $ref cycles: when resolveAllReferences detects a repeated property $ref it tags the schema with this flag.
+  // The check must come after all hook calls to satisfy React's rules of hooks.
+  if ((_schema as RJSFMarkedSchema)[RJSF_REF_CYCLE_KEY]) {
+    return <CyclicSchemaField {...props} />;
+  }
+
+  const uiSchema = resolveUiSchema<T, S, F>(_schema, _uiSchema, registry);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+  const FieldTemplate = getTemplate<'FieldTemplate', T, S, F>('FieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    uiOptions,
+  );
+  const FieldHelpTemplate = getTemplate<'FieldHelpTemplate', T, S, F>('FieldHelpTemplate', registry, uiOptions);
+  const FieldErrorTemplate = getTemplate<'FieldErrorTemplate', T, S, F>('FieldErrorTemplate', registry, uiOptions);
+  const schema = schemaUtils.retrieveSchema(_schema, formData);
+
   const FieldComponent = getFieldComponent<T, S, F>(schema, uiOptions, registry);
 
   const isDeprecated = Boolean(schema.deprecated);
@@ -327,24 +341,22 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   );
 }
 
-/** The `SchemaField` component determines whether it is necessary to rerender the component based on any props changes
- * and if so, calls the `SchemaFieldRender` component with the props.
+/** The `SchemaField` component wraps `SchemaFieldRender` with a custom memoization comparator that  determines whether it is necessary to rerender the component based on any props changes
+ * using `experimental_componentUpdateStrategy`.
+ *
+ * The cast to `typeof SchemaFieldRender` preserves the generic type signature (<T, S, F>) for consumers,
+ * since React.memo's return type erases generic parameters.
  */
-class SchemaField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends Component<
-  FieldProps<T, S, F>
-> {
-  shouldComponentUpdate(nextProps: Readonly<FieldProps<T, S, F>>) {
-    const {
-      registry: { globalFormOptions },
-    } = this.props;
-    const { experimental_componentUpdateStrategy = 'customDeep' } = globalFormOptions;
-
-    return shouldRender(this, nextProps, this.state, experimental_componentUpdateStrategy);
+const SchemaField = memo(SchemaFieldRender, (prevProps, nextProps) => {
+  const { experimental_componentUpdateStrategy = 'customDeep' } = nextProps.registry.globalFormOptions;
+  if (experimental_componentUpdateStrategy === 'always') {
+    return false; // always re-render — never consider props equal
   }
-
-  render() {
-    return <SchemaFieldRender<T, S, F> {...this.props} />;
+  if (experimental_componentUpdateStrategy === 'shallow') {
+    return shallowEquals(prevProps, nextProps);
   }
-}
+  // default: 'customDeep'
+  return deepEquals(prevProps, nextProps);
+}) as unknown as typeof SchemaFieldRender;
 
 export default SchemaField;

package/src/components/fields/index.ts

@@ -2,6 +2,7 @@ import type { Field, FormContextType, RegistryFieldsType, RJSFSchema, StrictRJSF
 
 import ArrayField from './ArrayField';
 import BooleanField from './BooleanField';
+import CyclicSchemaField from './CyclicSchemaField';
 import FallbackField from './FallbackField';
 import LayoutGridField from './LayoutGridField';
 import LayoutHeaderField from './LayoutHeaderField';
@@ -24,6 +25,7 @@ function fields<
     ArrayField: ArrayField as unknown as Field<T, S, F>,
     // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
     BooleanField,
+    CyclicSchemaField,
     FallbackField,
     LayoutGridField,
     LayoutHeaderField,

package/src/components/templates/BaseInputTemplate.tsx

@@ -64,12 +64,9 @@ export default function BaseInputTemplate<
       onChange(newValue === '' ? options.emptyValue : newValue),
     [onChange, options],
   );
-  const handleBlur = useCallback(
-    ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value),
-    [onBlur, id],
-  );
+  const handleBlur = useCallback(({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target?.value), [onBlur, id]);
   const handleFocus = useCallback(
-    ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value),
+    ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target?.value),
     [onFocus, id],
   );
   const handleClear = useCallback(

package/src/components/templates/CyclicSchemaExpandTemplate.tsx

@@ -0,0 +1,31 @@
+import type { CyclicSchemaExpandProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ID_KEY, TranslatableString } from '@rjsf/utils';
+
+/** The `CyclicSchemaExpandTemplate` is the template to use to render the cyclic schema expand message and controls
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function CyclicSchemaExpandTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: CyclicSchemaExpandProps<T, S, F>) {
+  const { name, fieldPathId, registry, onExpand } = props;
+  const { translateString } = registry;
+  const buttonId = `${fieldPathId[ID_KEY]}-button`;
+  return (
+    <div style={{ marginTop: '1rem' }}>
+      <div className='text-danger'>{translateString(TranslatableString.CycleDetected, [name])}</div>
+      <div>
+        <button
+          id={buttonId}
+          type='button'
+          className='btn btn-sm btn-warning'
+          onClick={() => onExpand(fieldPathId[ID_KEY])}
+        >
+          {translateString(TranslatableString.ExpandButton)}
+        </button>{' '}
+      </div>
+    </div>
+  );
+}

package/src/components/templates/UnsupportedField.tsx

@@ -14,7 +14,7 @@ function UnsupportedField<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
   const { translateString } = registry;
   let translateEnum: TranslatableString = TranslatableString.UnsupportedField;
   const translateParams: string[] = [];
-  if (fieldPathId && fieldPathId.$id) {
+  if (fieldPathId?.$id) {
     translateEnum = TranslatableString.UnsupportedFieldWithId;
     translateParams.push(fieldPathId.$id);
   }

package/src/components/templates/index.ts

@@ -7,6 +7,7 @@ import ArrayFieldTemplate from './ArrayFieldTemplate';
 import ArrayFieldTitleTemplate from './ArrayFieldTitleTemplate';
 import BaseInputTemplate from './BaseInputTemplate';
 import ButtonTemplates from './ButtonTemplates';
+import CyclicSchemaExpandTemplate from './CyclicSchemaExpandTemplate';
 import DescriptionField from './DescriptionField';
 import ErrorList from './ErrorList';
 import FallbackFieldTemplate from './FallbackFieldTemplate';
@@ -34,6 +35,7 @@ function templates<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends F
     ArrayFieldTitleTemplate,
     ButtonTemplates: ButtonTemplates<T, S, F>(),
     BaseInputTemplate,
+    CyclicSchemaExpandTemplate,
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,
     FallbackFieldTemplate,

package/src/components/widgets/CheckboxesWidget.tsx

@@ -35,13 +35,13 @@ function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
 
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
-      onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      onBlur(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, emptyValue)),
     [onBlur, id, enumOptions, emptyValue, optionValueFormat],
   );
 
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
-      onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      onFocus(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, emptyValue)),
     [onFocus, id, enumOptions, emptyValue, optionValueFormat],
   );
 

package/src/components/widgets/RadioWidget.tsx

@@ -33,13 +33,13 @@ function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
 
   const handleBlur = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
-      onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      onBlur(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, emptyValue)),
     [onBlur, enumOptions, emptyValue, id, optionValueFormat],
   );
 
   const handleFocus = useCallback(
     ({ target }: FocusEvent<HTMLInputElement>) =>
-      onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      onFocus(id, enumOptionValueDecoder<S>(target?.value, enumOptions, optionValueFormat, emptyValue)),
     [onFocus, enumOptions, emptyValue, id, optionValueFormat],
   );
 

package/src/components/widgets/SelectWidget.tsx

@@ -7,6 +7,8 @@ import {
   enumOptionValueDecoder,
   enumOptionValueEncoder,
   getOptionValueFormat,
+  logUnsupportedDefaultForEnum,
+  SelectedOptionDescription,
 } from '@rjsf/utils';
 
 function getValue(event: SyntheticEvent<HTMLSelectElement>, multiple: boolean) {
@@ -39,6 +41,8 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
   onFocus,
   placeholder,
   htmlName,
+  registry,
+  uiSchema,
 }: WidgetProps<T, S, F>) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : '';
@@ -70,38 +74,49 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
 
   const selectValue = enumOptionSelectedValue<S>(value, enumOptions, multiple, optionValueFormat, emptyValue);
   const showPlaceholderOption = !multiple && schema.default === undefined;
+  logUnsupportedDefaultForEnum<S>(id, schema, enumOptions, multiple);
 
   return (
-    // oxlint-disable-next-line jsx-a11y/no-autofocus
-    <select
-      id={id}
-      name={htmlName || id}
-      multiple={multiple}
-      className='form-control'
-      value={selectValue}
-      required={required}
-      disabled={disabled || readonly}
-      autoFocus={autofocus}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      onChange={handleChange}
-      aria-describedby={ariaDescribedByIds(id)}
-    >
-      {showPlaceholderOption && <option value=''>{placeholder}</option>}
-      {Array.isArray(enumOptions) &&
-        enumOptions.map(({ value: enumValue, label: enumLabel }, i) => {
-          const isDisabled = enumDisabled && enumDisabled.includes(enumValue);
-          return (
-            <option
-              key={String(enumValue)}
-              value={enumOptionValueEncoder(enumValue, i, optionValueFormat)}
-              disabled={isDisabled}
-            >
-              {enumLabel}
-            </option>
-          );
-        })}
-    </select>
+    <>
+      <SelectedOptionDescription
+        id={id}
+        multiple={multiple}
+        options={options}
+        registry={registry}
+        uiSchema={uiSchema}
+        value={value}
+      />
+      {/* oxlint-disable-next-line jsx-a11y/no-autofocus */}
+      <select
+        id={id}
+        name={htmlName || id}
+        multiple={multiple}
+        className='form-control'
+        value={selectValue}
+        required={required}
+        disabled={disabled || readonly}
+        autoFocus={autofocus}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        onChange={handleChange}
+        aria-describedby={ariaDescribedByIds(id)}
+      >
+        {showPlaceholderOption && <option value=''>{placeholder}</option>}
+        {Array.isArray(enumOptions) &&
+          enumOptions.map(({ value: enumValue, label: enumLabel }, i) => {
+            const isDisabled = enumDisabled && enumDisabled.includes(enumValue);
+            return (
+              <option
+                key={String(enumValue)}
+                value={enumOptionValueEncoder(enumValue, i, optionValueFormat)}
+                disabled={isDisabled}
+              >
+                {enumLabel}
+              </option>
+            );
+          })}
+      </select>
+    </>
   );
 }
 

package/src/components/widgets/TextareaWidget.tsx

@@ -9,7 +9,7 @@ import { ariaDescribedByIds } from '@rjsf/utils';
  */
 function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
   id,
-  options = {},
+  options,
   placeholder,
   value,
   required,
@@ -28,12 +28,12 @@ function TextareaWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F exte
   );
 
   const handleBlur = useCallback(
-    ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target && target.value),
+    ({ target }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, target?.value),
     [onBlur, id],
   );
 
   const handleFocus = useCallback(
-    ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target && target.value),
+    ({ target }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, target?.value),
     [id, onFocus],
   );