Fix 4631: preserve additional property order for numeric keys (#5156)

* Fix 4631: preserve additional property order for numeric keys

* Add pull request link to changelog

* Reduce additional property order work during render

* Address additional property order review

* Test additional property dedupe after schema updates

---------

Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>

Author: wanxiankai

CHANGELOG.md

@@ -33,6 +33,12 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Updated `utility-functions.md` to document `getDecimalSeparator()`
 
+# 6.7.1
+
+## @rjsf/core
+
+- Fixed `ObjectField` to preserve the insertion order of additional and pattern properties when keys are renamed to integers, fixing [#4631](https://github.com/rjsf-team/react-jsonschema-form/issues/4631) ([#5156](https://github.com/rjsf-team/react-jsonschema-form/pull/5156))
+
 # 6.7.0
 
 ## @rjsf/antd

packages/core/src/components/fields/ObjectField.tsx

@@ -72,6 +72,16 @@ function getDefaultValue<T = any, S extends StrictRJSFSchema = RJSFSchema, F ext
   }
 }
 
+function isAdditionalPropertySchema(schema: unknown) {
+  return Boolean((schema as RJSFMarkedSchema)?.[ADDITIONAL_PROPERTY_FLAG]);
+}
+
+function getAdditionalPropertyOrder<S extends StrictRJSFSchema = RJSFSchema>(
+  schemaProperties: NonNullable<S['properties']>,
+) {
+  return Object.keys(schemaProperties).filter((property) => isAdditionalPropertySchema(schemaProperties[property]));
+}
+
 /** Props for the `ObjectFieldProperty` component */
 interface ObjectFieldPropertyProps<
   T = any,
@@ -234,10 +244,17 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     [schemaUtils, rawSchema, formData],
   );
   const uiOptions = useMemo(() => getUiOptions<T, S, F>(uiSchema, globalUiOptions), [uiSchema, globalUiOptions]);
-  const { properties: schemaProperties = {} } = schema;
+  const schemaProperties = useMemo(() => schema.properties ?? {}, [schema.properties]);
   // 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 [additionalPropertyOrder, setAdditionalPropertyOrder] = useState(() =>
+    getAdditionalPropertyOrder<S>(schemaProperties),
+  );
+  const definedPropertyOrder = useMemo(() => {
+    const additionalPropertySet = new Set(getAdditionalPropertyOrder<S>(schemaProperties));
+    return Object.keys(schemaProperties).filter((property) => !additionalPropertySet.has(property));
+  }, [schemaProperties]);
 
   const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
   const description = uiOptions.description ?? schema.description;
@@ -308,6 +325,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
       lastRenamedProperty.current.currentKey = newKey;
       lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
     }
+    setAdditionalPropertyOrder((order) => [...order, newKey]);
     onChange(newFormData, childFieldPathId.path);
   }, [formData, onChange, translateString, schemaUtils, childFieldPathId, getAvailableKey, schema]);
 
@@ -339,6 +357,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
           lastRenamedProperty.current.previousKey = oldKey;
         }
         lastRenamedProperty.current.currentKey = actualNewKey;
+        setAdditionalPropertyOrder((order) => order.map((property) => (property === oldKey ? actualNewKey : property)));
         onChange(renamedObj, childFieldPathId.path);
       }
     },
@@ -350,6 +369,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
    */
   const handleRemoveProperty = useCallback(
     (key: string) => {
+      setAdditionalPropertyOrder((order) => order.filter((property) => property !== key));
       onChange(ADDITIONAL_PROPERTY_KEY_REMOVE as T, [...childFieldPathId.path, key]);
     },
     [onChange, childFieldPathId],
@@ -369,8 +389,11 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
 
   if (!renderOptionalField || hasFormData) {
     try {
-      const properties = Object.keys(schemaProperties);
-      orderedProperties = orderProperties(properties, uiOptions.order);
+      const definedPropertySet = new Set(definedPropertyOrder);
+      const currentAdditionalProperties = additionalPropertyOrder.filter(
+        (property) => Object.hasOwn(schemaProperties, property) && !definedPropertySet.has(property),
+      );
+      orderedProperties = orderProperties([...definedPropertyOrder, ...currentAdditionalProperties], uiOptions.order);
     } catch (err) {
       return (
         <div>
@@ -395,9 +418,7 @@ export default function ObjectField<T = any, S extends StrictRJSFSchema = RJSFSc
     title: uiOptions.label === false ? '' : templateTitle,
     description: uiOptions.label === false ? undefined : description,
     properties: orderedProperties.map((propertyName) => {
-      const addedByAdditionalProperties = Boolean(
-        (schema.properties?.[propertyName] as RJSFMarkedSchema)?.[ADDITIONAL_PROPERTY_FLAG],
-      );
+      const addedByAdditionalProperties = isAdditionalPropertySchema(schema.properties?.[propertyName]);
       const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[propertyName];
       const hidden = getUiOptions<T, S, F>(fieldUiSchema).widget === 'hidden';
       const content = (

packages/core/test/ObjectField.test.tsx

@@ -992,6 +992,67 @@ describe('ObjectField', () => {
       expectToHaveBeenCalledWithFormData(onChange, { first: 1, newSecond: 2, third: 3 }, 'root');
     });
 
+    it('should keep a numeric pattern property in place when renaming its key', async () => {
+      const { node } = createFormComponent({
+        schema: {
+          type: 'object',
+          patternProperties: {
+            '(.*?)': { type: 'string' },
+          },
+        },
+        formData: { first: 'one', second: 'two' },
+      });
+
+      const textNode = node.querySelector('#root_second-key')!;
+      await user.clear(textNode);
+      await user.type(textNode, '1');
+      await user.tab();
+
+      const propertyKeys = [...node.querySelectorAll<HTMLInputElement>('input[id$="-key"]')].map(
+        (input) => input.value,
+      );
+      expect(propertyKeys).toEqual(['first', '1']);
+    });
+
+    it('should not duplicate an additional property that becomes schema-defined after rerender', () => {
+      const initialSchema: RJSFSchema = {
+        type: 'object',
+        additionalProperties: {
+          type: 'string',
+        },
+      };
+      const updatedSchema: RJSFSchema = {
+        type: 'object',
+        properties: {
+          promoted: {
+            type: 'string',
+          },
+        },
+        additionalProperties: {
+          type: 'string',
+        },
+      };
+      const formData = { first: 'one', promoted: 'two' };
+      const { node, rerender } = createFormComponent({
+        schema: initialSchema,
+        formData,
+      });
+
+      rerender({
+        schema: updatedSchema,
+        formData,
+      });
+
+      const promotedInputs = node.querySelectorAll<HTMLInputElement>('input[id="root_promoted"]');
+      expect(promotedInputs).toHaveLength(1);
+      expect(promotedInputs[0]).toHaveValue('two');
+
+      const propertyKeys = [...node.querySelectorAll<HTMLInputElement>('input[id$="-key"]')].map(
+        (input) => input.value,
+      );
+      expect(propertyKeys).toEqual(['first']);
+    });
+
     it('should rename nested additionalProperties key when key input is blurred', async () => {
       const nestedSchema: RJSFSchema = {
         type: 'object',