pass raw errors to field widgets (#826)

* pass raw errors to  field widgets

* fixed formatting

* fixing line endings

* Pass raw errors into Field at creation; object destructuring; added test for passing of raw errors; removed unused prop from ArrayField.

* fix lineEndings

src/components/fields/BooleanField.js

@@ -21,6 +21,7 @@ function BooleanField(props) {
     readonly,
     autofocus,
     onChange,
+    rawErrors,
   } = props;
   const { title } = schema;
   const { widgets, formContext } = registry;
@@ -44,6 +45,7 @@ function BooleanField(props) {
       registry={registry}
       formContext={formContext}
       autofocus={autofocus}
+      rawErrors={rawErrors}
     />
   );
 }
@@ -67,6 +69,7 @@ if (process.env.NODE_ENV !== "production") {
       definitions: PropTypes.object.isRequired,
       formContext: PropTypes.object.isRequired,
     }),
+    rawErrors: PropTypes.arrayOf(PropTypes.string),
   };
 }
 

src/components/fields/SchemaField.js

@@ -206,6 +206,7 @@ function SchemaFieldRender(props) {
       autofocus={autofocus}
       errorSchema={fieldErrorSchema}
       formContext={formContext}
+      rawErrors={__errors}
     />
   );
 

src/components/fields/StringField.js

@@ -24,6 +24,7 @@ function StringField(props) {
     onBlur,
     onFocus,
     registry = getDefaultRegistry(),
+    rawErrors,
   } = props;
   const { title, format } = schema;
   const { widgets, formContext } = registry;
@@ -51,6 +52,7 @@ function StringField(props) {
       autofocus={autofocus}
       registry={registry}
       placeholder={placeholder}
+      rawErrors={rawErrors}
     />
   );
 }
@@ -77,6 +79,7 @@ if (process.env.NODE_ENV !== "production") {
     disabled: PropTypes.bool,
     readonly: PropTypes.bool,
     autofocus: PropTypes.bool,
+    rawErrors: PropTypes.arrayOf(PropTypes.string),
   };
 }
 

src/components/widgets/BaseInput.js

@@ -22,14 +22,17 @@ function BaseInput(props) {
   const _onChange = ({ target: { value } }) => {
     return props.onChange(value === "" ? options.emptyValue : value);
   };
+
+  const { rawErrors, ...cleanProps } = inputProps;
+
   return (
     <input
       className="form-control"
       readOnly={readonly}
       disabled={disabled}
       autoFocus={autofocus}
       value={value == null ? "" : value}
-      {...inputProps}
+      {...cleanProps}
       onChange={_onChange}
       onBlur={onBlur && (event => onBlur(inputProps.id, event.target.value))}
       onFocus={onFocus && (event => onFocus(inputProps.id, event.target.value))}

test/SchemaField_test.js

@@ -321,5 +321,25 @@ describe("SchemaField", () => {
       expect(matches).to.have.length.of(1);
       expect(matches[0].textContent).to.contain("test");
     });
+
+    describe("Custom error rendering", () => {
+      const customStringWidget = props => {
+        return <div className="custom-text-widget">{props.rawErrors}</div>;
+      };
+
+      it("should pass rawErrors down to custom widgets", () => {
+        const { node } = createFormComponent({
+          schema,
+          uiSchema,
+          validate,
+          widgets: { BaseInput: customStringWidget },
+        });
+        submit(node);
+
+        const matches = node.querySelectorAll(".custom-text-widget");
+        expect(matches).to.have.length.of(1);
+        expect(matches[0].textContent).to.eql("test");
+      });
+    });
   });
 });