Key changes on additionalProperties items no longer suffer data loss. (rjsf-team#1401)

* Key changes on additionalProperties items no longer suffer data loss. Resolves rjsf-team#1382 * Adding a unit test.

Author: erunion

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,