@rjsf/core 6.6.2 → 6.7.1

package/src/components/fields/CyclicSchemaField.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions, RJSF_REF_CYCLE_KEY } from '@rjsf/utils';
+
+/** The `CyclicSchemaField` component is used to render a field in the schema that is marked with RJSF_REF_CYCLE_KEY ===
+ * true
+ *
+ * @param props - The `FieldProps` for this template
+ */
+export default function CyclicSchemaField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: FieldProps<T, S, F>) {
+  const [expanded, setExpanded] = useState(false);
+  const { name, registry, schema, uiSchema, fieldPathId } = props;
+  const { globalUiOptions } = registry;
+
+  const uiOptions = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+  const CyclicSchemaExpandTemplate = getTemplate<'CyclicSchemaExpandTemplate', T, S, F>(
+    'CyclicSchemaExpandTemplate',
+    registry,
+    uiOptions,
+  );
+  if (!expanded) {
+    return (
+      <CyclicSchemaExpandTemplate
+        registry={registry}
+        schema={schema}
+        uiSchema={uiSchema}
+        name={name}
+        fieldPathId={fieldPathId}
+        onExpand={() => setExpanded(true)}
+      />
+    );
+  }
+  const { fields } = registry;
+  const { SchemaField } = fields;
+  return <SchemaField {...props} schema={{ ...schema, [RJSF_REF_CYCLE_KEY]: false }} />;
+}

package/src/components/fields/MultiSchemaField.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { FieldProps, FormContextType, RJSFSchema, StrictRJSFSchema, UiSchema } from '@rjsf/utils';
 import {
   ANY_OF_KEY,
@@ -8,6 +8,7 @@ import {
   getTemplate,
   getUiOptions,
   getWidget,
+  hashObject,
   isFormDataAvailable,
   mergeSchemas,
   ONE_OF_KEY,
@@ -18,102 +19,86 @@ import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import omit from 'lodash/omit';
 
-/** Type used for the state of the `AnyOfField` component */
-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`.
  *
  * @param props - The `FieldProps` for this template
  */
-class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> extends Component<
-  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
-   */
-  constructor(props: FieldProps<T, S, F>) {
-    super(props);
+function AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: FieldProps<T, S, F>,
+) {
+  const {
+    name,
+    disabled = false,
+    errorSchema = {},
+    formData,
+    fieldPathId,
+    onBlur,
+    onChange,
+    onFocus,
+    options,
+    readonly,
+    registry,
+    required = false,
+    schema,
+    uiSchema,
+  } = props;
+  const { schemaUtils } = registry;
 
-    const {
-      formData,
-      options,
-      registry: { schemaUtils },
-    } = this.props;
-    // cache the retrieved options in state in case they have $refs to save doing it later
-    const retrievedOptions = options.map((opt: S) => schemaUtils.retrieveSchema(opt, formData));
+  // Hash formData by value so the memo only invalidates when data actually changes, not on every
+  // new object reference. hashObject(undefined) throws, so null is used as the fallback.
+  const formDataHash = hashObject(formData ?? null);
 
-    this.state = {
-      retrievedOptions,
-      selectedOption: this.getMatchingOption(0, formData, retrievedOptions),
-    };
-  }
+  // retrievedOptions is purely derived from options — useMemo handles re-derivation automatically
+  // when options, schemaUtils, or formData's value changes, with no render-phase dispatch needed.
+  const retrievedOptions = useMemo(
+    () => options.map((opt: S) => schemaUtils.retrieveSchema(opt, formData)),
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- formDataHash is the value-stable proxy for formData
+    [options, schemaUtils, formDataHash],
+  );
 
-  /** React lifecycle method that is called when the props and/or state for this component is updated. It recomputes the
-   * currently selected option based on the overall `formData`
-   *
-   * @param prevProps - The previous `FieldProps` for this template
-   * @param prevState - The previous `AnyOfFieldState` for this template
+  const [selectedOption, setSelectedOption] = useState<number>(() => {
+    const discriminator = getDiscriminatorFieldFromSchema<S>(schema);
+    return schemaUtils.getClosestMatchingOption(formData, retrievedOptions, 0, discriminator);
+  });
+
+  /** Flag to skip the formData-change-driven option recalculation when the user just selected an option.
+   * Set to true in onOptionChange (before onChange is called), consumed and reset in the update effect.
+   * 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.
    */
-  componentDidUpdate(prevProps: Readonly<FieldProps<T, S, F>>, prevState: Readonly<AnyOfFieldState>) {
-    const { formData, options, fieldPathId } = this.props;
-    const { selectedOption } = this.state;
-    let newState = this.state;
-    if (!deepEquals(prevProps.options, options)) {
-      const {
-        registry: { schemaUtils },
-      } = this.props;
-      // re-cache the retrieved options in state in case they have $refs to save doing it later
-      const retrievedOptions = options.map((opt: S) => schemaUtils.retrieveSchema(opt, formData));
-      newState = { selectedOption, retrievedOptions };
-    }
-    if (!deepEquals(formData, prevProps.formData) && fieldPathId.$id === prevProps.fieldPathId.$id) {
-      if (this.skipNextOptionRecalculation) {
-        this.skipNextOptionRecalculation = false;
-      } else {
-        const { retrievedOptions } = newState;
-        const matchingOption = this.getMatchingOption(selectedOption, formData, retrievedOptions);
+  const skipNextOptionRecalculation = useRef(false);
+  const prevFormDataRef = useRef<T | undefined>(formData);
+  const prevFieldIdRef = useRef(fieldPathId.$id);
+
+  // Mirrors componentDidUpdate: re-match selectedOption when formData changes on the same field.
+  // Runs after every render (no deps array) to compare against prev values stored in refs.
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    const prevFormData = prevFormDataRef.current;
+    const prevFieldId = prevFieldIdRef.current;
+    prevFormDataRef.current = formData;
+    prevFieldIdRef.current = fieldPathId.$id;
 
-        if (prevState && matchingOption !== selectedOption) {
-          newState = { selectedOption: matchingOption, retrievedOptions };
-        }
+    if (!deepEquals(formData, prevFormData) && fieldPathId.$id === prevFieldId) {
+      if (skipNextOptionRecalculation.current) {
+        skipNextOptionRecalculation.current = false;
+        return;
+      }
+      const discriminator = getDiscriminatorFieldFromSchema<S>(schema);
+      const matchingOption = schemaUtils.getClosestMatchingOption(
+        formData,
+        retrievedOptions,
+        selectedOption,
+        discriminator,
+      );
+      if (matchingOption !== selectedOption) {
+        setSelectedOption(matchingOption);
       }
     }
-    if (newState !== this.state) {
-      // oxlint-disable-next-line react/no-did-update-set-state -- guarded to prevent infinite loop
-      this.setState(newState);
-    }
-  }
+  });
 
-  /** Determines the best matching option for the given `formData` and `options`.
-   *
-   * @param formData - The new formData
-   * @param options - The list of options to choose from
-   * @return - The index of the `option` that best matches the `formData`
-   */
-  getMatchingOption(selectedOption: number, formData: T | undefined, options: S[]) {
-    const {
-      schema,
-      registry: { schemaUtils },
-    } = this.props;
-
-    const discriminator = getDiscriminatorFieldFromSchema<S>(schema);
-    const option = schemaUtils.getClosestMatchingOption(formData, options, selectedOption, discriminator);
-    return option;
-  }
+  const fieldId = `${fieldPathId.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
 
   /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
    * to remove properties that are not part of the newly selected option schema, and then the updated data is passed to
@@ -121,166 +106,152 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
    *
    * @param option - The new option value being selected
    */
-  onOptionChange = (option?: string) => {
-    const { selectedOption, retrievedOptions } = this.state;
-    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) {
-      return;
-    }
-    const newOption = intOption >= 0 ? retrievedOptions[intOption] : undefined;
-    const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : undefined;
-
-    let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
-    if (newOption) {
-      // Call getDefaultFormState to make sure defaults are populated on change. Pass "excludeObjectChildren"
-      // so that only the root objects themselves are created without adding undefined children properties
-      newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren') as T;
-    }
-
-    this.setState({ selectedOption: intOption }, () => {
-      this.skipNextOptionRecalculation = true;
-      onChange(newFormData, fieldPathId.path, undefined, this.getFieldId());
-    });
-  };
+  const onOptionChange = useCallback(
+    (option?: string) => {
+      if (disabled || readonly) {
+        return;
+      }
+      const intOption = option !== undefined ? parseInt(option, 10) : -1;
+      if (intOption === selectedOption) {
+        return;
+      }
+      const newOption = intOption >= 0 ? retrievedOptions[intOption] : undefined;
+      const oldOption = selectedOption >= 0 ? retrievedOptions[selectedOption] : undefined;
 
-  getFieldId() {
-    const { fieldPathId, schema } = this.props;
-    return `${fieldPathId.$id}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`;
-  }
+      let newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
+      if (newOption) {
+        // Call getDefaultFormState to make sure defaults are populated on change. Pass "excludeObjectChildren"
+        // so that only the root objects themselves are created without adding undefined children properties
+        newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren') as T;
+      }
 
-  /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
-   */
-  render() {
-    const {
-      name,
-      disabled = false,
-      errorSchema = {},
-      formData,
-      onBlur,
-      onFocus,
-      readonly,
-      required = false,
-      registry,
-      schema,
-      uiSchema,
-    } = this.props;
+      setSelectedOption(intOption);
+      skipNextOptionRecalculation.current = true;
+      onChange(newFormData, fieldPathId.path, undefined, fieldId);
+    },
+    // setSelectedOption is stable (guaranteed by useState); skipNextOptionRecalculation is a ref
+    [selectedOption, retrievedOptions, disabled, readonly, schemaUtils, formData, fieldPathId, onChange, fieldId],
+  );
 
-    const { widgets, fields, translateString, globalUiOptions, schemaUtils } = registry;
-    const { SchemaField: SchemaFieldComponent } = fields;
-    const MultiSchemaFieldTemplate = getTemplate<'MultiSchemaFieldTemplate', T, S, F>(
-      'MultiSchemaFieldTemplate',
-      registry,
-      globalUiOptions,
-    );
-    const isOptionalRender = shouldRenderOptionalField<T, S, F>(registry, schema, required, uiSchema);
-    const hasFormData = isFormDataAvailable<T>(formData);
+  const { widgets, fields, translateString, globalUiOptions } = registry;
+  const { SchemaField: SchemaFieldComponent } = fields;
+  const MultiSchemaFieldTemplate = getTemplate<'MultiSchemaFieldTemplate', T, S, F>(
+    'MultiSchemaFieldTemplate',
+    registry,
+    globalUiOptions,
+  );
+  const isOptionalRender = shouldRenderOptionalField<T, S, F>(registry, schema, required, uiSchema);
+  const hasFormData = isFormDataAvailable<T>(formData);
 
-    const { selectedOption, retrievedOptions } = this.state;
-    const {
-      widget = 'select',
-      placeholder,
-      autofocus,
-      autocomplete,
-      title = schema.title,
-      ...uiOptions
-    } = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
-    const Widget = getWidget<T, S, F>({ type: 'number' }, widget, widgets);
-    const rawErrors = get(errorSchema, ERRORS_KEY, []);
-    const fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
-    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
+  const {
+    widget = 'select',
+    placeholder,
+    autofocus,
+    autocomplete,
+    title = schema.title,
+    ...uiOptions
+  } = getUiOptions<T, S, F>(uiSchema, globalUiOptions);
+  const Widget = getWidget<T, S, F>({ type: 'number' }, widget, widgets);
+  const rawErrors = get(errorSchema, ERRORS_KEY, []);
+  const fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
+  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
 
-    const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
-    let optionSchema: S | undefined | null;
+  const option = selectedOption >= 0 ? retrievedOptions[selectedOption] || null : null;
+  let optionSchema: S | undefined | null;
 
-    if (option) {
-      // merge top level required field
-      const { required: schemaRequired } = schema;
-      // Merge in all the non-oneOf/anyOf properties and also skip the special ADDITIONAL_PROPERTY_FLAG property
-      optionSchema = schemaRequired ? (mergeSchemas({ required: schemaRequired }, option) as S) : option;
+  if (option) {
+    const { required: schemaRequired, type: schemaType } = schema;
+    const parentProps: Partial<S> = {};
+    if (schemaRequired) {
+      parentProps.required = schemaRequired as S['required'];
+    }
+    // Propagate the parent schema type to options that don't define their own.
+    // This is necessary when the parent constrains the type (e.g. { type: 'string',
+    // oneOf: [{ pattern: '...' }, { pattern: '...' }] }) but the option sub-schemas
+    // omit the type — without it, getSchemaType returns undefined and the option
+    // renders as FallbackField instead of the correct widget (e.g. StringField).
+    if (schemaType !== undefined && !('type' in option)) {
+      parentProps.type = schemaType;
     }
+    // Merge in all the non-oneOf/anyOf properties and also skip the special ADDITIONAL_PROPERTY_FLAG property
+    optionSchema = Object.keys(parentProps).length > 0 ? (mergeSchemas(parentProps, option) as S) : option;
+  }
 
-    // First we will check to see if there is an anyOf/oneOf override for the UI schema
-    let optionsUiSchema: UiSchema<T, S, F>[] = [];
-    if (ONE_OF_KEY in schema && uiSchema && ONE_OF_KEY in uiSchema) {
-      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}"`);
-      }
+  // First we will check to see if there is an anyOf/oneOf override for the UI schema
+  let optionsUiSchema: UiSchema<T, S, F>[] = [];
+  if (ONE_OF_KEY in schema && uiSchema && ONE_OF_KEY in uiSchema) {
+    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}"`);
     }
-    // Then we pick the one that matches the selected option index, if one exists otherwise default to the main uiSchema
-    let optionUiSchema = uiSchema;
-    if (selectedOption >= 0 && optionsUiSchema.length > selectedOption) {
-      optionUiSchema = optionsUiSchema[selectedOption];
+  } 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}"`);
     }
+  }
+  // Then we pick the one that matches the selected option index, if one exists otherwise default to the main uiSchema
+  let optionUiSchema = uiSchema;
+  if (selectedOption >= 0 && optionsUiSchema.length > selectedOption) {
+    optionUiSchema = optionsUiSchema[selectedOption];
+  }
 
-    const translateEnum: TranslatableString = title
-      ? TranslatableString.TitleOptionPrefix
-      : TranslatableString.OptionPrefix;
-    const translateParams = title ? [title] : [];
-    const enumOptions = retrievedOptions.map((opt: { title?: string }, index: number) => {
-      // Also see if there is an override title in the uiSchema for each option, otherwise use the title from the option
-      const { title: uiTitle = opt.title } = getUiOptions<T, S, F>(optionsUiSchema[index]);
-      return {
-        label: uiTitle || translateString(translateEnum, translateParams.concat(String(index + 1))),
-        value: index,
-      };
-    });
-
-    const selector =
-      !isOptionalRender || hasFormData ? (
-        <Widget
-          id={this.getFieldId()}
-          name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
-          schema={{ type: 'number', default: 0 } as S}
-          onChange={this.onOptionChange}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          disabled={disabled || isEmpty(enumOptions)}
-          multiple={false}
-          rawErrors={rawErrors}
-          errorSchema={fieldErrorSchema}
-          value={selectedOption >= 0 ? selectedOption : undefined}
-          options={{ enumOptions, ...uiOptions }}
-          registry={registry}
-          placeholder={placeholder}
-          autocomplete={autocomplete}
-          autofocus={autofocus}
-          label={title ?? name}
-          hideLabel={!displayLabel}
-          readonly={readonly}
-        />
-      ) : undefined;
-
-    const optionsSchemaField =
-      (optionSchema && optionSchema.type !== 'null' && (
-        <SchemaFieldComponent {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />
-      )) ||
-      null;
+  const translateEnum: TranslatableString = title
+    ? TranslatableString.TitleOptionPrefix
+    : TranslatableString.OptionPrefix;
+  const translateParams = title ? [title] : [];
+  const enumOptions = retrievedOptions.map((opt: { title?: string }, index: number) => {
+    const { title: uiTitle = opt.title } = getUiOptions<T, S, F>(optionsUiSchema[index]);
+    return {
+      label: uiTitle || translateString(translateEnum, translateParams.concat(String(index + 1))),
+      value: index,
+    };
+  });
 
-    return (
-      <MultiSchemaFieldTemplate
-        schema={schema}
+  const selector =
+    !isOptionalRender || hasFormData ? (
+      <Widget
+        id={fieldId}
+        name={`${name}${schema.oneOf ? '__oneof_select' : '__anyof_select'}`}
+        schema={{ type: 'number', default: 0 } as S}
+        onChange={onOptionChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        disabled={disabled || isEmpty(enumOptions)}
+        multiple={false}
+        rawErrors={rawErrors}
+        errorSchema={fieldErrorSchema}
+        value={selectedOption >= 0 ? selectedOption : undefined}
+        options={{ enumOptions, ...uiOptions }}
         registry={registry}
-        uiSchema={uiSchema}
-        selector={selector}
-        optionSchemaField={optionsSchemaField}
+        placeholder={placeholder}
+        autocomplete={autocomplete}
+        autofocus={autofocus}
+        label={title ?? name}
+        hideLabel={!displayLabel}
+        readonly={readonly}
       />
-    );
-  }
+    ) : undefined;
+
+  const optionsSchemaField =
+    (optionSchema && optionSchema.type !== 'null' && (
+      <SchemaFieldComponent {...props} schema={optionSchema} uiSchema={optionUiSchema} />
+    )) ||
+    null;
+
+  return (
+    <MultiSchemaFieldTemplate
+      schema={schema}
+      registry={registry}
+      uiSchema={uiSchema}
+      selector={selector}
+      optionSchemaField={optionsSchemaField}
+    />
+  );
 }
 
 export default AnyOfField;

package/src/components/fields/NumberField.tsx

@@ -7,18 +7,10 @@ import type {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
-import { asNumber } from '@rjsf/utils';
+import { asNumber, getDecimalSeparator, getUiOptions, optionsList } 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.
-// Ensuring that there is at least one prefixed character is important so that
-// you don't incorrectly match against "0".
+// Static matchers for standard '.' separator used during normalization inside handleChange
 const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
-
-// This is used for trimming the trailing 0 and . characters without affecting
-// the rest of the string. Its possible to use one RegEx with groups for this
-// functionality, but it is fairly complex compared to simply defining two
-// different matchers.
 const trailingCharMatcher = /[0.]0*$/;
 
 /**
@@ -45,6 +37,9 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
   const [lastValue, setLastValue] = useState(initialValue);
   const { StringField } = registry.fields;
 
+  const separator = getDecimalSeparator();
+  const escapedSeparator = separator === '.' ? '\\.' : separator;
+
   let value = formData;
 
   /** Handle the change from the `StringField` to properly convert to a number
@@ -56,28 +51,31 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
       // Cache the original value in component state
       setLastValue(newValue);
 
+      // Convert locale separator to standard '.' first
+      const standardValue = typeof newValue === 'string' ? newValue.replace(separator, '.') : newValue;
+
       // Normalize decimals that don't start with a zero character in advance so
       // that the rest of the normalization logic is simpler
-      const normalizedValue = `${newValue}`.startsWith('.') ? `0${newValue}` : newValue;
+      const normalizedValue = `${standardValue}`.startsWith('.') ? `0${standardValue}` : standardValue;
 
       // 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 normalizedValue === 'string' && normalizedValue.match(trailingCharMatcherWithPrefix)
+        typeof normalizedValue === 'string' && trailingCharMatcherWithPrefix.exec(normalizedValue)
           ? asNumber(normalizedValue.replace(trailingCharMatcher, ''))
           : asNumber(normalizedValue);
 
       onChange(processed as unknown as T, path, errorSchema, id);
     },
-    [onChange],
+    [onChange, separator],
   );
 
   if (typeof lastValue === 'string' && typeof value === 'number') {
     // Construct a regular expression that checks for a string that consists
-    // of the formData value suffixed with zero or one '.' characters and zero
+    // of the formData value suffixed with zero or one locale separator characters and zero
     // or more '0' characters
-    const re = new RegExp(`^(${String(value).replace('.', '\\.')})?\\.?0*$`);
+    const re = new RegExp(`^(${String(value).replace('.', escapedSeparator)})?${escapedSeparator}?0*$`);
 
     // If the cached "lastValue" is a match, use that instead of the formData
     // value to prevent the input value from changing in the UI
@@ -86,7 +84,23 @@ function NumberField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends
     }
   }
 
-  return <StringField {...props} formData={value} onChange={handleChange} />;
+  // Format value to use the locale separator for rendering if it is a number
+  let displayValue: T | undefined = value;
+  if (typeof value === 'number' && separator !== '.') {
+    const { schema, uiSchema } = props;
+    const { schemaUtils } = registry;
+    const enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema, uiSchema) : undefined;
+    const defaultWidget = enumOptions ? 'select' : 'text';
+    const { widget = defaultWidget } = getUiOptions(uiSchema);
+
+    // Do not convert the value to a locale-specific string for radio, select,
+    // or hidden widgets because option matching relies on the original numeric value.
+    if (widget !== 'radio' && widget !== 'select' && widget !== 'hidden') {
+      displayValue = String(value).replace('.', separator) as unknown as T;
+    }
+  }
+
+  return <StringField {...props} formData={displayValue} onChange={handleChange} />;
 }
 
 export default NumberField;