fields: displays initial errors

* closes zenodo/who-rdm#84
inveniosoftware · Sep 18, 2023 · 404de54 · 404de54
1 parent dad0840
commit 404de54
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/src/lib/forms/AccordionField.js b/src/lib/forms/AccordionField.js
@@ -10,6 +10,7 @@ import PropTypes from "prop-types";
 import { Field, FastField } from "formik";
 import { Accordion, Container } from "semantic-ui-react";
 import _omit from "lodash/omit";
+import _get from "lodash/get";
 
 export class AccordionField extends Component {
   hasError(errors) {
@@ -22,16 +23,33 @@ export class AccordionField extends Component {
     return false;
   }
 
+  hasInitialError(errors, initialValues, values) {
+    const { includesPaths } = this.props;
+    for (const errorPath in errors) {
+      for (const subPath in errors[errorPath]) {
+        const path = `${errorPath}.${subPath}`;
+        if (
+          _get(initialValues, path, "") === _get(values, path, "") &&
+          includesPaths.includes(path)
+        )
+          return true;
+      }
+    }
+    return false;
+  }
+
   renderAccordion = (props) => {
     const {
-      form: { errors, status },
+      form: { errors, status, initialErrors, initialValues, values },
     } = props;
 
     // eslint-disable-next-line no-unused-vars
     const { label, children, active, ...ui } = this.props;
     const uiProps = _omit({ ...ui }, ["optimized", "includesPaths"]);
-
-    const hasError = status ? this.hasError(status) : this.hasError(errors);
+    const hasError = status
+      ? this.hasError(status)
+      : this.hasError(errors) ||
+        this.hasInitialError(initialErrors, initialValues, values);
     const panels = [
       {
         key: `panel-${label}`,

diff --git a/src/lib/forms/TextField.js b/src/lib/forms/TextField.js
@@ -35,7 +35,13 @@ export class TextField extends Component {
             return (
               <Form.Input
                 {...field}
-                error={meta.error}
+                error={
+                  error ||
+                  meta.error ||
+                  // We check if initialValue changed to display the initialError,
+                  // otherwise it would be displayed despite updating the fieldu
+                  (!meta.touched && meta.initialError)
+                }
                 disabled={disabled}
                 fluid
                 label={label}