fix(core): use ref to prevent stale formData in rapid additional property renames (#5031)

* fix(core): use ref to prevent stale formData in rapid additional property renames

* docs: add changelog entry for #5021 stale formData fix

Author: restareaByWeezy

CHANGELOG.md

@@ -35,6 +35,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Included `button` elements in `focusOnError` querySelector so that radio and checkbox groups receive focus on validation error, fixing [#4870](https://github.com/rjsf-team/react-jsonschema-form/issues/4870)
 - Fixed focus being lost when renaming additional property keys by preserving React key for renamed properties ([#4999](https://github.com/rjsf-team/react-jsonschema-form/issues/4999))
 - Removed `expandUiSchemaDefinitions` call at form init, now handled at runtime by `resolveUiSchema`, fixing [#4986](https://github.com/rjsf-team/react-jsonschema-form/issues/4986)
+- Used `useRef` to track latest `formData` in `handleKeyRename`, preventing stale closure data when multiple additional property keys are renamed in quick succession, fixing [#5021](https://github.com/rjsf-team/react-jsonschema-form/issues/5021)
 
 ## @rjsf/daisyui
 

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

@@ -220,6 +220,8 @@ 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;
@@ -310,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) => {
@@ -321,14 +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

packages/core/test/ObjectField.test.tsx

@@ -1163,6 +1163,38 @@ describe('ObjectField', () => {
       );
     });
 
+    it('should preserve all properties when two keys are renamed in quick succession', () => {
+      const formData = {
+        first: 1,
+        second: 2,
+        third: 3,
+      };
+      const { node, onChange } = createFormComponent({
+        schema,
+        formData,
+      });
+
+      const firstKeyNode = node.querySelector('#root_first-key');
+      const secondKeyNode = node.querySelector('#root_second-key');
+
+      act(() => {
+        fireEvent.blur(firstKeyNode!, {
+          target: { value: 'renamedFirst' },
+        });
+        fireEvent.blur(secondKeyNode!, {
+          target: { value: 'renamedSecond' },
+        });
+      });
+
+      expect(onChange).toHaveBeenCalledTimes(2);
+      expect(onChange).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          formData: { renamedFirst: 1, renamedSecond: 2, third: 3 },
+        }),
+        'root',
+      );
+    });
+
     it('should preserve focus across consecutive renames of the same property', () => {
       const { node } = createFormComponent({
         schema,