Fix corrupted idSchema when the schema has a field named id (rjsf-team#262)

Author: amarnus

src/components/fields/ArrayField.js

@@ -22,15 +22,15 @@ function ArrayFieldTitle({TitleField, idSchema, title, required}) {
  if (!title) {
  return null;
  }
- const id = `${idSchema.id}__title`;
+ const id = `${idSchema.$id}__title`;
  return <TitleField id={id} title={title} required={required} />;
 }
 
 function ArrayFieldDescription({DescriptionField, idSchema, description}) {
  if (!description) {
  return null;
  }
- const id = `${idSchema.id}__description`;
+ const id = `${idSchema.$id}__description`;
  return <DescriptionField id={id} description={description} />;
 }
 
@@ -185,7 +185,7 @@ class ArrayField extends Component {
  <div className="row array-item-list">{
  items.map((item, index) => {
  const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
- const itemIdPrefix = idSchema.id + "_" + index;
+ const itemIdPrefix = idSchema.$id + "_" + index;
  const itemIdSchema = toIdSchema(itemsSchema, itemIdPrefix, definitions);
  return this.renderArrayFieldItem({
  index,
@@ -216,7 +216,7 @@ class ArrayField extends Component {
  const Widget = (multipleCheckboxes) ? CheckboxesWidget : SelectWidget;
  return (
  <Widget
- id={idSchema && idSchema.id}
+ id={idSchema && idSchema.$id}
  multiple
  onChange={this.onSelectChange}
  options={{enumOptions: optionsList(itemsSchema)}}
@@ -235,7 +235,7 @@ class ArrayField extends Component {
  const {items} = this.state;
  return (
  <FileWidget
- id={idSchema && idSchema.id}
+ id={idSchema && idSchema.$id}
  multiple
  onChange={this.onSelectChange}
  schema={schema}
@@ -287,7 +287,7 @@ class ArrayField extends Component {
  const additional = index >= itemSchemas.length;
  const itemSchema = additional ?
  additionalSchema : itemSchemas[index];
- const itemIdPrefix = idSchema.id + "_" + index;
+ const itemIdPrefix = idSchema.$id + "_" + index;
  const itemIdSchema = toIdSchema(itemSchema, itemIdPrefix, definitions);
  const itemUiSchema = additional ?
  uiSchema.additionalItems || {} :

src/components/fields/BooleanField.js

@@ -36,7 +36,7 @@ function BooleanField(props) {
  const widget = uiSchema["ui:widget"];
  const commonProps = {
  schema,
- id: idSchema && idSchema.id,
+ id: idSchema && idSchema.$id,
  onChange,
  label: title || name,
  placeholder: description,

src/components/fields/ObjectField.js

@@ -114,12 +114,12 @@ class ObjectField extends Component {
  return (
  <fieldset>
  {title ? <TitleField
- id={`${idSchema.id}__title`}
+ id={`${idSchema.$id}__title`}
  title={title}
  required={required} /> : null}
  {schema.description ?
  <DescriptionField
- id={`${idSchema.id}__description`}
+ id={`${idSchema.$id}__description`}
  description={schema.description}
  /> : null}
  {

src/components/fields/SchemaField.js

@@ -162,7 +162,7 @@ function SchemaField(props) {
  required={required}
  type={schema.type}
  displayLabel={displayLabel}
- id={idSchema.id}
+ id={idSchema.$id}
  classNames={uiSchema.classNames}>
  <FieldComponent {...props}
  schema={schema}

src/components/fields/StringField.js

@@ -28,7 +28,7 @@ function StringField(props) {
  const widget = uiSchema["ui:widget"] || schema.format;
  const commonProps = {
  schema,
- id: idSchema && idSchema.id,
+ id: idSchema && idSchema.$id,
  label: title || name,
  placeholder: description,
  onChange,

src/utils.js

@@ -301,7 +301,9 @@ export function shouldRender(comp, nextProps, nextState) {
 }
 
 export function toIdSchema(schema, id, definitions) {
- const idSchema = {id: id || "root"};
+ const idSchema = {
+ $id: id || "root"
+ };
  if ("$ref" in schema) {
  const _schema = retrieveSchema(schema, definitions);
  return toIdSchema(_schema, id, definitions);
@@ -314,7 +316,7 @@ export function toIdSchema(schema, id, definitions) {
  }
  for (const name in schema.properties || {}) {
  const field = schema.properties[name];
- const fieldId = idSchema.id + "_" + name;
+ const fieldId = idSchema.$id + "_" + name;
  idSchema[name] = toIdSchema(field, fieldId, definitions);
  }
  return idSchema;

test/performance_test.js

@@ -95,7 +95,7 @@ describe("Rendering performance optimizations", () => {
  foo: {type: "string"}
  }
  };
- const idSchema = {id: "root", foo: {id: "root_plop"}};
+ const idSchema = {$id: "root", foo: {$id: "root_plop"}};
 
  it("should not render if next props are equivalent", () => {
  const {comp} = createComponent(ObjectField, {

test/utils_test.js

@@ -464,7 +464,7 @@ describe("utils", () => {
  it("should return an idSchema for root field", () => {
  const schema = {type: "string"};
 
- expect(toIdSchema(schema)).eql({id: "root"});
+ expect(toIdSchema(schema)).eql({$id: "root"});
  });
 
  it("should return an idSchema for nested objects", () => {
@@ -481,10 +481,10 @@ describe("utils", () => {
  };
 
  expect(toIdSchema(schema)).eql({
- id: "root",
+ $id: "root",
  level1: {
- id: "root_level1",
- level2: {id: "root_level1_level2"}
+ $id: "root_level1",
+ level2: {$id: "root_level1_level2"}
  }
  });
  });
@@ -511,20 +511,44 @@ describe("utils", () => {
  };
 
  expect(toIdSchema(schema)).eql({
- id: "root",
+ $id: "root",
  level1a: {
- id: "root_level1a",
- level1a2a: {id: "root_level1a_level1a2a"},
- level1a2b: {id: "root_level1a_level1a2b"},
+ $id: "root_level1a",
+ level1a2a: {$id: "root_level1a_level1a2a"},
+ level1a2b: {$id: "root_level1a_level1a2b"},
  },
  level1b: {
- id: "root_level1b",
- level1b2a: {id: "root_level1b_level1b2a"},
- level1b2b: {id: "root_level1b_level1b2b"},
+ $id: "root_level1b",
+ level1b2a: {$id: "root_level1b_level1b2a"},
+ level1b2b: {$id: "root_level1b_level1b2b"},
  },
  });
  });
 
+ it("schema with an id property must not corrupt the idSchema", () => {
+ const schema = {
+ type: "object",
+ properties: {
+ metadata: {
+ type: "object",
+ properties: {
+ id: {
+ type: "string"
+ }
+ },
+ required: [ "id" ]
+ }
+ }
+ };
+ expect(toIdSchema(schema)).eql({
+ $id: "root",
+ metadata: {
+ $id: "root_metadata",
+ id: { $id: "root_metadata_id" }
+ }
+ });
+ });
+
  it("should return an idSchema for array item objects", () => {
  const schema = {
  type: "array",
@@ -537,8 +561,8 @@ describe("utils", () => {
  };
 
  expect(toIdSchema(schema)).eql({
- id: "root",
- foo: {id: "root_foo"}
+ $id: "root",
+ foo: {$id: "root_foo"}
  });
  });
 
@@ -557,9 +581,9 @@ describe("utils", () => {
  };
 
  expect(toIdSchema(schema, undefined, schema.definitions)).eql({
- id: "root",
- foo: {id: "root_foo"},
- bar: {id: "root_bar"}
+ $id: "root",
+ foo: {$id: "root_foo"},
+ bar: {$id: "root_bar"}
  });
  });
  });