Merged in r2-2974-required-fields (pull request #6904)

R2-2974, R2-2990: Fixing issue where required fields on subforms are not showing errors
primeroIMS · Aug 16, 2024 · 9dd58f9 · 9dd58f9
2 parents 1ba0dcf + 66ca48b
commit 9dd58f9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 11 deletions.
diff --git a/app/javascript/components/record-form/form/field-types/text-field.jsx b/app/javascript/components/record-form/form/field-types/text-field.jsx
@@ -1,13 +1,14 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
 
 /* eslint-disable camelcase */
+
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 import { subYears } from "date-fns";
 import { TextField as MuiTextField } from "formik-mui";
 import { useDispatch } from "react-redux";
 import { ButtonBase } from "@mui/material";
-import { FastField, connect, getIn } from "formik";
+import { FastField, connect } from "formik";
 import { useParams } from "react-router-dom";
 import omitBy from "lodash/omitBy";
 import isEmpty from "lodash/isEmpty";
@@ -28,7 +29,6 @@ function TextField({ name, field, formik, mode, recordType, recordID, formSectio
   const i18n = useI18n();
   const dispatch = useDispatch();
   const { id } = useParams();
-  const errors = getIn(formik.errors, name);
 
   const recordName = useMemoizedSelector(state => selectRecordAttribute(state, recordType, recordID, "name"));
 
@@ -81,7 +81,6 @@ function TextField({ name, field, formik, mode, recordType, recordID, formSectio
               data-testid="text-field"
               variant="outlined"
               form={renderProps.form}
-              error={errors}
               field={{
                 ...renderProps.field,
                 InputProps: { ...fieldProps.InputProps, ...(rest.error ? { error: rest.error } : {}) },

diff --git a/app/javascript/components/record-form/form/subforms/subform-dialog/component.jsx b/app/javascript/components/record-form/form/subforms/subform-dialog/component.jsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2014 - 2023 UNICEF. All rights reserved.
 
 /* eslint-disable react/no-multi-comp, react/display-name */
-import { useEffect, useState, useRef } from "react";
+import { useState, useRef, useLayoutEffect } from "react";
 import { useParams } from "react-router-dom";
 import PropTypes from "prop-types";
 import { Formik, Form, getIn } from "formik";
@@ -238,14 +238,10 @@ function Component({
   const familyMemberTitle = i18n.t(`family.family_member.${isNewSubform ? "save" : "update"}_and_return`);
   const handleBackLabel = isViolation || isViolationAssociation ? violationTitle : familyMemberTitle;
 
-  async function setInitialValuesWhenOpen(subformSectionId, isOpen) {
-    if (isOpen) {
-      await setInitialValues(constructInitialValues([subformSectionId]));
+  useLayoutEffect(() => {
+    if (open) {
+      setInitialValues(constructInitialValues([field.subform_section_id]));
     }
-  }
-
-  useEffect(() => {
-    setInitialValuesWhenOpen();
   }, [open]);
 
   return (