Fix duplicate descriptions. (rjsf-team#265)

Author: n1k0

playground/samples/simple.js

@@ -1,6 +1,7 @@
 module.exports = {
  schema: {
  title: "A registration form",
+ description: "A simple form example.",
  type: "object",
  required: ["firstName", "lastName"],
  properties: {

src/components/fields/DescriptionField.js

@@ -2,7 +2,11 @@ import React, {PropTypes} from "react";
 
 function DescriptionField(props) {
  const {id, description} = props;
- return <div id={id} className="field-description">{description}</div>;
+ if (typeof description === "string") {
+ return <p id={id} className="field-description">{description}</p>;
+ } else {
+ return <div id={id} className="field-description">{description}</div>;
+ }
 }
 
 if (process.env.NODE_ENV !== "production") {

src/components/fields/SchemaField.js

@@ -97,7 +97,8 @@ function Wrapper({
  return (
  <div className={classList}>
  {displayLabel && label ? getLabel(label, required, id) : null}
- {description ? <DescriptionField id={`${id}__description`} description={description} /> : null}
+ {displayLabel && description ?
+ <DescriptionField id={`${id}__description`} description={description} /> : null}
  {children}
  {isError ? <ErrorList errors={errors} /> : <div/>}
  {renderHelp(help)}

test/ArrayField_test.js

@@ -44,7 +44,7 @@ describe("ArrayField", () => {
  it("should render a description", () => {
  const {node} = createFormComponent({schema});
 
- const description = node.querySelector("fieldset > div.field-description");
+ const description = node.querySelector("fieldset > .field-description");
 
  expect(description.textContent).eql("my description");
  expect(description.id).eql("root__description");

test/DescriptionField_test.js

@@ -26,15 +26,24 @@ describe("DescriptionField", () => {
  }
  }
 
- it("should return a div", () => {
+ it("should return a div for a custom component", () => {
  const props = {
- description: "Field description",
+ description: <em>description</em>,
  };
  const {node} = createComponent(DescriptionFieldWrapper, props);
 
  expect(node.tagName).to.equal("DIV");
  });
 
+ it("should return a p for a description text", () => {
+ const props = {
+ description: "description",
+ };
+ const {node} = createComponent(DescriptionFieldWrapper, props);
+
+ expect(node.tagName).to.equal("P");
+ });
+
  it("should have the expected id", () => {
  const props = {
  description: "Field description",

test/SchemaField_test.js

@@ -149,7 +149,8 @@ describe("SchemaField", () => {
 
  it("should render description if available from the schema", () => {
  const {node} = createFormComponent({schema});
- expect(node.querySelectorAll("div#root_foo__description"))
+
+ expect(node.querySelectorAll("#root_foo__description"))
  .to.have.length.of(1);
  });
 
@@ -169,14 +170,16 @@ describe("SchemaField", () => {
  }
  };
  const {node} = createFormComponent({schema: schemaWithReference});
- const matches = node.querySelectorAll("div#root_foo__description");
+
+ const matches = node.querySelectorAll("#root_foo__description");
  expect(matches).to.have.length.of(1);
  expect(matches[0].textContent).to.equal("A Foo field");
  });
 
  it("should not render description if not available from schema", () => {
  const {node} = createFormComponent({schema});
- expect(node.querySelectorAll("div#root_bar__description"))
+
+ expect(node.querySelectorAll("#root_bar__description"))
  .to.have.length.of(0);
  });
  });