fix: Updates show-hide logic to remove hidden responses

components/clientComponents/forms/Form/Form.tsx

@@ -26,8 +26,7 @@ import {
   removeFormContextValues,
   getInputHistoryValues,
 } from "@lib/utils/form-builder/groupsHistory";
-import { filterShownElements, filterValuesByShownElements } from "@lib/formContext";
-import { formHasGroups } from "@lib/utils/form-builder/formHasGroups";
+import { filterShownElements, filterResponsesByShownElements } from "@lib/formContext";
 import { showReviewPage } from "@lib/utils/form-builder/showReviewPage";
 import { useFormDelay } from "@lib/hooks/useFormDelayContext";
 
@@ -387,7 +386,7 @@ export const Form = withFormik<FormProps, Responses>({
   validate: (values, props) => validateOnSubmit(values, props),
 
   handleSubmit: async (values, formikBag) => {
-    const getValuesForConditionalLogic = () => {
+    const getValues = () => {
       const inputHistoryValues = getInputHistoryValues(
         values,
         values.groupHistory as string[],
@@ -397,22 +396,15 @@ export const Form = withFormik<FormProps, Responses>({
         formikBag.props.formRecord.form.elements,
         values.matchedIds as string[]
       );
-      return filterValuesByShownElements(inputHistoryValues, shownElements);
+      const shownResponses = filterResponsesByShownElements(inputHistoryValues, shownElements);
+      return removeFormContextValues(shownResponses);
     };
 
     // Needed so the Loader is displayed
     formikBag.setStatus("submitting");
     try {
-      const hasGroups =
-        formHasGroups(formikBag.props.formRecord.form) && formikBag.props.allowGrouping;
-      const hasShowHideRules = (values.matchedIds as string[])?.length > 0;
-      const formValues =
-        hasGroups && hasShowHideRules
-          ? removeFormContextValues(getValuesForConditionalLogic())
-          : removeFormContextValues(values);
-
       const result = await submitForm(
-        formValues,
+        getValues(),
         formikBag.props.language,
         formikBag.props.formRecord
       );

lib/formContext.ts

@@ -677,18 +677,16 @@ export const getElementIdsAsNumber = (elements: string[]) => {
   return elements.map((element) => Number(element));
 };
 
-// TODO: rename to filterResponsesByShownElements
-export const filterValuesByShownElements = (values: Responses, elementsShown: FormElement[]) => {
+export const filterResponsesByShownElements = (values: Responses, elementsShown: FormElement[]) => {
   if (!values || !Array.isArray(elementsShown)) {
     return values;
   }
+
   const filteredValues: { [key: string]: Response } = {};
   Object.keys(values).forEach((key) => {
     if (elementsShown.find((el) => el.id === Number(key))) {
       // Note: want to keep original value type (e.g. Checkbox=Array) or Formik may get confused
       filteredValues[key] = values[key];
-    } else {
-      filteredValues[key] = Array.isArray(values[key]) ? [] : "";
     }
   });
   return filteredValues;

lib/hooks/useGCFormContext.tsx

@@ -8,7 +8,7 @@ import {
   GroupsType,
   getNextAction,
   filterShownElements,
-  filterValuesByShownElements,
+  filterResponsesByShownElements,
 } from "@lib/formContext";
 import { LockedSections } from "@formBuilder/components/shared/right-panel/treeview/types";
 import { formHasGroups } from "@lib/utils/form-builder/formHasGroups";
@@ -69,7 +69,7 @@ export const GCFormsProvider = ({
     groups
   );
   const shownElements = filterShownElements(formRecord.form.elements, matchedIds as string[]);
-  const filteredResponses = filterValuesByShownElements(inputHistoryValues, shownElements);
+  const filteredResponses = filterResponsesByShownElements(inputHistoryValues, shownElements);
   const filteredMatchedIds = matchedIds.filter((id) => {
     const parentId = id.split(".")[0];
     if (filteredResponses[parentId]) {

lib/utils/form-builder/formHasGroups.ts

@@ -1,5 +1,6 @@
 import { FormProperties } from "@lib/types";
 
+// Deprecated, no longer used - all forms have groups
 export function formHasGroups(form: FormProperties) {
   if (!form || !form.groups) return false;
   return form.groups && Object.keys(form.groups).length > 0;

lib/vitests/filterValuesByShownElements.test.ts → lib/vitests/filterResponsesByShownElements.test.ts

@@ -1,49 +1,49 @@
 import { expect } from 'vitest'
-import { filterValuesByShownElements } from "@lib/formContext";
+import { filterResponsesByShownElements } from "@lib/formContext";
 import { FormElement } from "@lib/types";
 
 // Fixtures captured by adding a break point in Forms.tsx and copying the values from the debugger
-import {inputHistoryValues, shownElements} from "../../__fixtures__/filterValuesByShownElements.json";
+import {inputHistoryValues, shownElements} from "../../__fixtures__/filterResponsesByShownElements.json";
 
-describe("formContext filterValuesByShownElements()", () => {
+describe("formContext filterResponsesByShownElements()", () => {
   it("Handles filtering out correct element", () => {
     const expectedOutput = {
       "1": "A",
       "2": "A",
       "3": "P1-Q1-A",
-      "4": "",
+      // "4": "",
       "5": "",
       "6": "",
-      "7": "",
+      // "7": "",
       "8": "",
       "9": "",
-      "10": "",
-      "currentGroup": "",
-      "groupHistory": "",
-      "matchedIds": ""
+      // "10": "",
+      // "currentGroup": "",
+      // "groupHistory": "",
+      // "matchedIds": ""
     };
-    const result = filterValuesByShownElements(inputHistoryValues, shownElements as FormElement[]);
+    const result = filterResponsesByShownElements(inputHistoryValues, shownElements as FormElement[]);
     expect(result).toEqual(expectedOutput);
   });
 
   it("Handles bad input", () => {
     const expectedOutput = undefined;
     // @ts-expect-error - testing invalid input
-    const result = filterValuesByShownElements();
+    const result = filterResponsesByShownElements();
     expect(result).toEqual(expectedOutput);
   });
 
   it("Handles partial input 1", () => {
     const expectedOutput = inputHistoryValues;
     // @ts-expect-error - testing invalid input
-    const result = filterValuesByShownElements(inputHistoryValues, undefined);
+    const result = filterResponsesByShownElements(inputHistoryValues, undefined);
     expect(result).toEqual(expectedOutput);
   });
 
   it("Handles partial input 2", () => {
     const expectedOutput = undefined;
     // @ts-expect-error - testing invalid input
-    const result = filterValuesByShownElements(undefined, shownElements as FormElement[]);
+    const result = filterResponsesByShownElements(undefined, shownElements as FormElement[]);
     expect(result).toEqual(expectedOutput);
   });
 });