Key-value pair in additional properties retains order when edited (rj…

…sf-team#1101)

* Make key-value pair stay at the same place and remove strange behavior with label

* Handle case when you click input and immediately unclick

* Add two test cases

src/components/fields/ObjectField.js

@@ -96,21 +96,27 @@ class ObjectField extends Component {
   getAvailableKey = (preferredKey, formData) => {
     var index = 0;
     var newKey = preferredKey;
-    while (this.props.formData.hasOwnProperty(newKey)) {
+    while (formData.hasOwnProperty(newKey)) {
       newKey = `${preferredKey}-${++index}`;
     }
     return newKey;
   };
 
   onKeyChange = oldValue => {
     return (value, errorSchema) => {
+      if (oldValue === value) {
+        return;
+      }
       value = this.getAvailableKey(value, this.props.formData);
       const newFormData = { ...this.props.formData };
-      const property = newFormData[oldValue];
-      delete newFormData[oldValue];
-      newFormData[value] = property;
+      const newKeys = { [oldValue]: value };
+      const keyValues = Object.keys(newFormData).map(key => {
+        const newKey = newKeys[key] || key;
+        return { [newKey]: newFormData[key] };
+      });
+      const renamedObj = Object.assign({}, ...keyValues);
       this.props.onChange(
-        newFormData,
+        renamedObj,
         errorSchema &&
           this.props.errorSchema && {
             ...this.props.errorSchema,

test/ObjectField_test.js

@@ -520,6 +520,24 @@ describe("ObjectField", () => {
       expect(comp.state.formData.newFirst).eql(1);
     });
 
+    it("should keep order of renamed key-value pairs while renaming key", () => {
+      const { comp, node } = createFormComponent({
+        schema,
+        formData: { first: 1, second: 2, third: 3 },
+      });
+
+      const textNode = node.querySelector("#root_second-key");
+      Simulate.blur(textNode, {
+        target: { value: "newSecond" },
+      });
+
+      expect(Object.keys(comp.state.formData)).eql([
+        "first",
+        "newSecond",
+        "third",
+      ]);
+    });
+
     it("should attach suffix to formData key if new key already exists when key input is renamed", () => {
       const formData = {
         first: 1,
@@ -538,6 +556,21 @@ describe("ObjectField", () => {
       expect(comp.state.formData["second-1"]).eql(1);
     });
 
+    it("should not attach suffix when input is only clicked", () => {
+      const formData = {
+        first: 1,
+      };
+      const { comp, node } = createFormComponent({
+        schema,
+        formData,
+      });
+
+      const textNode = node.querySelector("#root_first-key");
+      Simulate.blur(textNode);
+
+      expect(comp.state.formData.hasOwnProperty("first")).to.be.true;
+    });
+
     it("should continue incrementing suffix to formData key until that key name is unique after a key input collision", () => {
       const formData = {
         first: 1,