Fixes rjsf-team#186: Array and Object field TitleField ids. (rjsf-team#187)

Author: n1k0

src/components/fields/ArrayField.js

@@ -15,6 +15,14 @@ import {
 import SelectWidget from "./../widgets/SelectWidget";
 
 
+function ArrayFieldTitle({TitleField, idSchema, title, required}) {
+ if (!title) {
+ return null;
+ }
+ const id = `${idSchema.id}__title`;
+ return <TitleField id={id} title={title} required={required} />;
+}
+
 class ArrayField extends Component {
  static defaultProps = {
  uiSchema: {},
@@ -131,7 +139,11 @@ class ArrayField extends Component {
  return (
  <fieldset
  className={`field field-array field-array-of-${itemsSchema.type}`}>
- {title ? <TitleField title={title} required={required} /> : null}
+ <ArrayFieldTitle
+ TitleField={TitleField}
+ idSchema={idSchema}
+ title={title}
+ required={required} />
  {schema.description ?
  <div className="field-description">{schema.description}</div> : null}
  <div className="row array-item-list">{
@@ -204,7 +216,11 @@ class ArrayField extends Component {
 
  return (
  <fieldset className="field field-array field-array-fixed-items">
- {title ? <TitleField title={title} required={required} /> : null}
+ <ArrayFieldTitle
+ TitleField={TitleField}
+ idSchema={idSchema}
+ title={title}
+ required={required} />
  {schema.description ?
  <div className="field-description">{schema.description}</div> : null}
  <div className="row array-item-list">{

src/components/fields/ObjectField.js

@@ -86,7 +86,10 @@ class ObjectField extends Component {
  }
  return (
  <fieldset>
- {title ? <TitleField title={title} required={required} /> : null}
+ {title ? <TitleField
+ id={`${idSchema.id}__title`}
+ title={title}
+ required={required} /> : null}
  {schema.description ?
  <p className="field-description">{schema.description}</p> : null}
  {

src/components/fields/TitleField.js

@@ -3,15 +3,16 @@ import React, {PropTypes} from "react";
 const REQUIRED_FIELD_SYMBOL = "*";
 
 function TitleField(props) {
- const {title, required} = props;
+ const {id, title, required} = props;
  const legend = required ? title + REQUIRED_FIELD_SYMBOL : title;
- return <legend>{legend}</legend>;
+ return <legend id={id}>{legend}</legend>;
 }
 
 if (process.env.NODE_ENV !== "production") {
  TitleField.propTypes = {
+ id: PropTypes.string,
  title: PropTypes.string,
- required: PropTypes.bool
+ required: PropTypes.bool,
  };
 }
 

test/ArrayField_test.js

@@ -32,8 +32,10 @@ describe("ArrayField", () => {
  it("should render a fieldset legend", () => {
  const {node} = createFormComponent({schema});
 
- expect(node.querySelector("fieldset > legend").textContent)
- .eql("my list");
+ const legend = node.querySelector("fieldset > legend");
+
+ expect(legend.textContent).eql("my list");
+ expect(legend.id).eql("root__title");
  });
 
  it("should contain no field in the list by default", () => {
@@ -261,9 +263,9 @@ describe("ArrayField", () => {
 
  it("should render a fieldset legend", () => {
  const {node} = createFormComponent({schema});
-
- expect(node.querySelector("fieldset > legend").textContent)
-  .eql("List of fixed items");
+ const legend = node.querySelector("fieldset > legend");
+ expect(legend.textContent).eql("List of fixed items");
+ expect(legend.id).eql("root__title");
  });
 
  it("should render field widgets", () => {

test/ObjectField_test.js

@@ -46,8 +46,10 @@ describe("ObjectField", () => {
  it("should render a fieldset legend", () => {
  const {node} = createFormComponent({schema});
 
- expect(node.querySelector("fieldset > legend").textContent)
- .eql("my object");
+ const legend = node.querySelector("fieldset > legend");
+
+ expect(legend.textContent).eql("my object");
+ expect(legend.id).eql("root__title");
  });
 
  it("should render a customized title", () => {

test/TitleField_test.js

@@ -36,6 +36,17 @@ describe("TitleField", () => {
  expect(node.tagName).to.equal("LEGEND");
  });
 
+ it("should have the expected id", () => {
+ const props = {
+ title: "Field title",
+ required: true,
+ id: "sample_id"
+ };
+ const {node} = createComponent(TitleFieldWrapper, props);
+
+ expect(node.id).to.equal("sample_id");
+ });
+
  it("should include only title, when field is not required", () => {
  const props = {
  title: "Field title",