Key changes on additionalProperties items no longer suffer data loss. (…

…#1401)

* Key changes on additionalProperties items no longer suffer data loss.

Resolves #1382

* Adding a unit test.

src/components/fields/ObjectField.js

@@ -70,6 +70,7 @@ class ObjectField extends Component {
   };
 
   state = {
+    wasPropertyKeyModified: false,
     additionalProperties: {},
   };
 
@@ -128,6 +129,7 @@ class ObjectField extends Component {
       if (oldValue === value) {
         return;
       }
+
       value = this.getAvailableKey(value, this.props.formData);
       const newFormData = { ...this.props.formData };
       const newKeys = { [oldValue]: value };
@@ -136,6 +138,9 @@ class ObjectField extends Component {
         return { [newKey]: newFormData[key] };
       });
       const renamedObj = Object.assign({}, ...keyValues);
+
+      this.setState({ wasPropertyKeyModified: true });
+
       this.props.onChange(
         renamedObj,
         errorSchema &&
@@ -191,10 +196,19 @@ class ObjectField extends Component {
       onFocus,
       registry = getDefaultRegistry(),
     } = this.props;
+
     const { definitions, fields, formContext } = registry;
     const { SchemaField, TitleField, DescriptionField } = fields;
     const schema = retrieveSchema(this.props.schema, definitions, formData);
-    const title = schema.title === undefined ? name : schema.title;
+
+    // If this schema has a title defined, but the user has set a new key/label, retain their input.
+    let title;
+    if (this.state.wasPropertyKeyModified) {
+      title = name;
+    } else {
+      title = schema.title === undefined ? name : schema.title;
+    }
+
     const description = uiSchema["ui:description"] || schema.description;
     let orderedProperties;
     try {
@@ -242,6 +256,7 @@ class ObjectField extends Component {
               idSchema={idSchema[name]}
               idPrefix={idPrefix}
               formData={(formData || {})[name]}
+              wasPropertyKeyModified={this.state.wasPropertyKeyModified}
               onKeyChange={this.onKeyChange(name)}
               onChange={this.onPropertyChange(
                 name,

src/components/fields/SchemaField.js

@@ -235,6 +235,7 @@ function SchemaFieldRender(props) {
     onDropPropertyClick,
     required,
     registry = getDefaultRegistry(),
+    wasPropertyKeyModified = false,
   } = props;
   const { definitions, fields, formContext } = registry;
   const FieldTemplate =
@@ -296,8 +297,15 @@ function SchemaFieldRender(props) {
 
   const { type } = schema;
   const id = idSchema.$id;
-  const label =
-    uiSchema["ui:title"] || props.schema.title || schema.title || name;
+
+  // If this schema has a title defined, but the user has set a new key/label, retain their input.
+  let label;
+  if (wasPropertyKeyModified) {
+    label = name;
+  } else {
+    label = uiSchema["ui:title"] || props.schema.title || schema.title || name;
+  }
+
   const description =
     uiSchema["ui:description"] ||
     props.schema.description ||

test/ObjectField_test.js

@@ -552,6 +552,26 @@ describe("ObjectField", () => {
       expect(comp.state.formData.newFirst).eql(1);
     });
 
+    it("should retain user-input data if key-value pair has a title present in the schema", () => {
+      const { comp, node } = createFormComponent({
+        schema: {
+          type: "object",
+          additionalProperties: {
+            title: "Custom title",
+            type: "string",
+          },
+        },
+        formData: { "Custom title": 1 },
+      });
+
+      const textNode = node.querySelector("#root_Custom\\ title-key");
+      Simulate.blur(textNode, {
+        target: { value: "Renamed custom title" },
+      });
+
+      expect(comp.state.formData["Renamed custom title"]).eql(1);
+    });
+
     it("should keep order of renamed key-value pairs while renaming key", () => {
       const { comp, node } = createFormComponent({
         schema,