Merge pull request #2092 from GSA/2089-fix-nested-child-errors

2089 fix nested child errors
GSA · Feb 6, 2025 · c029443 · c029443
2 parents 264578e + f459d7b
commit c029443
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 20 deletions.
diff --git a/benefit-finder/src/Routes/LifeEventSection/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/Routes/LifeEventSection/__tests__/__snapshots__/index.spec.jsx.snap
@@ -302,6 +302,74 @@ exports[`LifeEventSection > renders a match to the previous snapshot 1`] = `
             </div>
           </fieldset>
         </div>
+        <div
+          class="bf-fieldset-wrapper"
+        >
+          <fieldset
+            aria-hidden="true"
+            class="bf-usa-fieldset usa-fieldset required-field  display-none"
+            data-errormessage="Fill out the nested_child_criteria_test field"
+            data-testid="fieldset"
+            hidden=""
+            id="nested_child_criteria_test"
+            required=""
+          >
+            <legend
+              class="bf-legend usa-legend"
+            >
+              nested_child_criteria_test
+              <span
+                class="bf-usa-hint usa-hint usa-hint--required bf-usa-hint--required bf-required required"
+                title="required"
+              >
+                (required)
+              </span>
+            </legend>
+            <div>
+              <label
+                class="bf-usa-label usa-label"
+                for="nested_child_criteria_test_0"
+              >
+                Select an option
+              </label>
+              <select
+                aria-errormessage="error-description-nested_child_criteria_test_0"
+                aria-invalid="false"
+                class="bf-usa-select usa-select "
+                data-errormessage="Fill out the nested_child_criteria_test field"
+                data-testid="nested_child_criteria_test_0"
+                id="nested_child_criteria_test_0"
+                name="nested_child_criteria_test_0"
+              >
+                <option
+                  value=""
+                >
+                  -Select-
+                </option>
+                <option
+                  value="Married"
+                >
+                  Married
+                </option>
+                <option
+                  value="Unmarried"
+                >
+                  Unmarried
+                </option>
+                <option
+                  value="Widowed"
+                >
+                  Widowed
+                </option>
+                <option
+                  value="Divorced"
+                >
+                  Divorced
+                </option>
+              </select>
+            </div>
+          </fieldset>
+        </div>
         <div
           class="bf-fieldset-wrapper"
         >

diff --git a/benefit-finder/src/Routes/LifeEventSection/index.jsx b/benefit-finder/src/Routes/LifeEventSection/index.jsx
@@ -183,8 +183,10 @@ const LifeEventSection = ({ data, handleData, ui }) => {
    * @return {null} only executes inherited functions
    */
   const handleBackUpdate = updateIndex => {
+    // allow uses to navigate back, even if there are errors
     formStep === 0 ? navigate(`/${ROUTES.indexPath}`) : navigate(updateIndex)
     resetElement.current.focus()
+    setHasError([])
   }
 
   /**
@@ -201,6 +203,7 @@ const LifeEventSection = ({ data, handleData, ui }) => {
       setCurrentData,
       event.target.value
     )
+    errorHandling.getRequiredFieldsets(document, setRequiredFieldsets)
     hasError.length > 0 &&
       errorHandling.handleCheckForRequiredValues(requiredFieldsets, setHasError)
     setHasData(apiCalls.GET.SelectedValueAll(data).length > 0)
@@ -215,6 +218,7 @@ const LifeEventSection = ({ data, handleData, ui }) => {
   const handleDateChanged = (event, criteriaKey) => {
     // if event target is empty check if all values in date are empty
     window.history.replaceState({}, '', window.location.pathname)
+    errorHandling.getRequiredFieldsets(document, setRequiredFieldsets)
 
     async function validUpdate() {
       if (dateInputValidation(event) === true) {
@@ -269,6 +273,7 @@ const LifeEventSection = ({ data, handleData, ui }) => {
     a11yTitles(location.pathname, locale)
     !location.hash && resetElement.current?.focus()
     !location.hash && window.scrollTo(0, 0)
+    setHasError([]) // reset error state
   }, [location])
 
   useEffect(() => {
@@ -560,15 +565,6 @@ const LifeEventSection = ({ data, handleData, ui }) => {
                       item.fieldset.inputs[0].inputCriteria.type === 'Date'
                         ? checkDateDependency(selectedParentValue)
                         : checkFieldDependencies(selectedParentValue)
-                    // const hidden = checkDateDependency(selectedParentValue)
-                    // const hidden = checkFieldDependencies(selectedParentValue)
-
-                    // const hidden =
-                    //   selectedParentValue?.value !==
-                    //   item.fieldset.inputs[0].inputCriteria
-                    //     .childDependencyOption
-
-                    // console.log('hidden', hidden)
 
                     return hidden
                   }

diff --git a/benefit-finder/src/shared/api/mock-data/current.js b/benefit-finder/src/shared/api/mock-data/current.js
@@ -45,8 +45,8 @@ const content = `{
                         "type": "Date",
                         "name": "applicant_date_of_birth",
                         "label": "Date of birth",
-                        "hasChild": false,
-                        "childDependencyOption": "",
+                        "hasChild": true,
+                        "childDependencyOption": ">=18years",
                         "values": [
                           {
                             "default": "",
@@ -56,7 +56,51 @@ const content = `{
                       }
                     }
                   ],
-                  "children": []
+                                    "children": [
+                    {
+                      "fieldsets": [
+                        {
+                          "fieldset": {
+                            "criteriaKey": "nested_child_criteria_test",
+                            "legend": "nested_child_criteria_test",
+                            "required": true,
+                            "hint": "",
+                            "inputs": [
+                              {
+                                "inputCriteria": {
+                                  "id": "nested_child_criteria_test",
+                                  "type": "Select",
+                                  "name": "nested_child_criteria_test",
+                                  "label": "nested_child_criteria_test status_2",
+                                  "hasChild": false,
+                                  "childDependencyOption": "",
+                                  "values": [
+                                    {
+                                      "option": "Married",
+                                      "value": "Married"
+                                    },
+                                    {
+                                      "option": "Unmarried",
+                                      "value": "Unmarried"
+                                    },
+                                    {
+                                      "option": "Widowed",
+                                      "value": "Widowed"
+                                    },
+                                    {
+                                      "option": "Divorced",
+                                      "value": "Divorced"
+                                    }
+                                  ]
+                                }
+                              }
+                            ],
+                            "children": []
+                          }
+                        }
+                      ]
+                    }
+                  ]
                 }
               },
               {

diff --git a/benefit-finder/src/shared/api/mock-data/current.json b/benefit-finder/src/shared/api/mock-data/current.json
@@ -45,8 +45,8 @@
                         "type": "Date",
                         "name": "applicant_date_of_birth",
                         "label": "Date of birth",
-                        "hasChild": false,
-                        "childDependencyOption": "",
+                        "hasChild": true,
+                        "childDependencyOption": ">=18years",
                         "values": [
                           {
                             "default": "",
@@ -56,7 +56,51 @@
                       }
                     }
                   ],
-                  "children": []
+                  "children": [
+                    {
+                      "fieldsets": [
+                        {
+                          "fieldset": {
+                            "criteriaKey": "nested_child_criteria_test",
+                            "legend": "nested_child_criteria_test",
+                            "required": true,
+                            "hint": "",
+                            "inputs": [
+                              {
+                                "inputCriteria": {
+                                  "id": "nested_child_criteria_test",
+                                  "type": "Select",
+                                  "name": "nested_child_criteria_test",
+                                  "label": "nested_child_criteria_test status_2",
+                                  "hasChild": false,
+                                  "childDependencyOption": "",
+                                  "values": [
+                                    {
+                                      "option": "Married",
+                                      "value": "Married"
+                                    },
+                                    {
+                                      "option": "Unmarried",
+                                      "value": "Unmarried"
+                                    },
+                                    {
+                                      "option": "Widowed",
+                                      "value": "Widowed"
+                                    },
+                                    {
+                                      "option": "Divorced",
+                                      "value": "Divorced"
+                                    }
+                                  ]
+                                }
+                              }
+                            ],
+                            "children": []
+                          }
+                        }
+                      ]
+                    }
+                  ]
                 }
               },
               {

diff --git a/benefit-finder/src/shared/utils/errorHandling/index.js b/benefit-finder/src/shared/utils/errorHandling/index.js
@@ -5,11 +5,13 @@
  * @function
  */
 export const getRequiredFieldsets = (document, setHandler) => {
-  const collectedNodeList = document.querySelectorAll('fieldset')
-  const requiredNodeList = Array.from(collectedNodeList).filter(
-    node => node.attributes.required
-  )
-  setHandler(Array.from(requiredNodeList))
+  setTimeout(() => {
+    const collectedNodeList = document.querySelectorAll('fieldset')
+    const requiredNodeList = Array.from(collectedNodeList).filter(
+      node => node.attributes.required && node.hidden === false
+    )
+    setHandler(Array.from(requiredNodeList))
+  }, 0)
 }
 
 /**