additionalProperties: retain object title when renaming key (rjsf-team#1751)

Fixes rjsf-team#1749. This reverts part of rjsf-team#1401 (the conditional setting of the title in the wasPropertyKeyModified logic in ObjectField.js) -- this piece of logic doesn't seem to contribute to the fix in rjsf-team#1401, and it's what caused rjsf-team#1749. Additionally, the test that was added in rjsf-team#1401 didn't actually check to make sure the issue it was solving was resolved; that test passed even before rjsf-team#1401 was merged. The issue that rjsf-team#1401 was that onChange was called with the new key, but the new key did not show up in the DOM. I've updated that test to check for this behavior (updating the new key in the DOM) now.

Author: epicfaace

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

@@ -214,14 +214,7 @@ class ObjectField extends Component {
  const { SchemaField, TitleField, DescriptionField } = fields;
  const schema = retrieveSchema(this.props.schema, rootSchema, formData);
 
- // 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 title = schema.title === undefined ? name : schema.title;
  const description = uiSchema["ui:description"] || schema.description;
  let orderedProperties;
  try {

packages/core/test/ObjectField_test.js

@@ -565,7 +565,7 @@ describe("ObjectField", () => {
  });
  });
 
- it("should retain user-input data if key-value pair has a title present in the schema", () => {
+ it("should retain and display user-input data if key-value pair has a title present in the schema when renaming key", () => {
  const { node, onChange } = createFormComponent({
  schema: {
  type: "object",
@@ -585,6 +585,35 @@ describe("ObjectField", () => {
  sinon.assert.calledWithMatch(onChange.lastCall, {
  formData: { "Renamed custom title": 1 },
  });
+
+ const keyInput = node.querySelector("#root_Renamed\\ custom\\ title-key");
+ expect(keyInput.value).eql("Renamed custom title");
+
+ const keyInputLabel = node.querySelector(
+ 'label[for="root_Renamed\\ custom\\ title-key"]'
+ );
+ expect(keyInputLabel.textContent).eql("Renamed custom title Key");
+ });
+
+ it("should retain object title when renaming key", () => {
+ const { node } = createFormComponent({
+ schema: {
+ title: "Object title",
+ type: "object",
+ additionalProperties: {
+ type: "string",
+ },
+ },
+ formData: { "Custom title": 1 },
+ });
+
+ const textNode = node.querySelector("#root_Custom\\ title-key");
+ Simulate.blur(textNode, {
+ target: { value: "Renamed custom title" },
+ });
+
+ const title = node.querySelector("#root__title");
+ expect(title.textContent).eql("Object title");
  });
 
  it("should keep order of renamed key-value pairs while renaming key", () => {