diff --git a/src/lib/forms/AccordionField.js b/src/lib/forms/AccordionField.js index 27ea09d3..96cbcfb5 100644 --- 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 index 28de77c3..237b018e 100644 --- a/src/lib/forms/TextField.js +++ b/src/lib/forms/TextField.js @@ -35,7 +35,13 @@ export class TextField extends Component { return (