Don't pass consumed error to child schema (#381)

Author: olzraiti

src/components/fields/SchemaField.js

@@ -157,20 +157,23 @@ function SchemaField(props) {
     displayLabel = false;
   }
 
+  const {__errors, ...fieldErrorSchema} = errorSchema;
+
   const field = (
     <FieldComponent {...props}
       schema={schema}
       disabled={disabled}
       readonly={readonly}
       autofocus={autofocus}
+      errorSchema={fieldErrorSchema}
       formContext={formContext}/>
   );
 
   const {type} = schema;
   const id = idSchema.$id;
   const label = props.schema.title || schema.title || name;
   const description = props.schema.description || schema.description;
-  const errors = errorSchema.__errors;
+  const errors = __errors;
   const help = uiSchema["ui:help"];
   const hidden = uiSchema["ui:widget"] === "hidden";
   const classNames = [

test/SchemaField_test.js

@@ -1,5 +1,6 @@
 import React from "react";
 import {expect} from "chai";
+import {Simulate} from "react-addons-test-utils";
 
 import SchemaField from "../src/components/fields/SchemaField";
 import TitleField from "../src/components/fields/TitleField";
@@ -195,4 +196,52 @@ describe("SchemaField", () => {
         .to.eql("A Foo field");
     });
   });
+
+  describe("errors", () => {
+    const schema = {
+      type: "object",
+      properties: {
+        foo: {type: "string"}
+      }
+    };
+
+    const uiSchema = {
+      "ui:field": (props) => {
+        const {uiSchema, ...fieldProps} = props; //eslint-disable-line
+        return <SchemaField {...fieldProps}/>;
+      }
+    };
+
+    function validate(formData, errors) {
+      errors.addError("container");
+      errors.foo.addError("test");
+      return errors;
+    }
+
+    function submit(node) {
+      try {
+        Simulate.submit(node);
+      } catch (e) {
+        // Silencing error thrown as failure is expected here
+      }
+    }
+
+    it("should render it's own errors", () => {
+      const {node} = createFormComponent({schema, uiSchema, validate});
+      submit(node);
+
+      const matches = node.querySelectorAll("form > .form-group > div > .error-detail .text-danger");
+      expect(matches).to.have.length.of(1);
+      expect(matches[0].textContent).to.eql("container");
+    });
+
+    it("should pass errors to child component", () => {
+      const {node} = createFormComponent({schema, uiSchema, validate});
+      submit(node);
+
+      const matches = node.querySelectorAll("form .form-group .form-group .text-danger");
+      expect(matches).to.have.length.of(1);
+      expect(matches[0].textContent).to.contain("test");
+    });
+  });
 });