diff --git a/src/components/fields/ObjectField.js b/src/components/fields/ObjectField.js index c4ab7cf802..4b7edb41f3 100644 --- a/src/components/fields/ObjectField.js +++ b/src/components/fields/ObjectField.js @@ -96,7 +96,7 @@ 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; @@ -104,13 +104,19 @@ class ObjectField extends Component { 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, diff --git a/test/ObjectField_test.js b/test/ObjectField_test.js index 04dab222c4..a0554e4b5f 100644 --- a/test/ObjectField_test.js +++ b/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,