Merged in r2-3005-required_fields (pull request #6920)

R2-3005: Validating multiselects with display conditions if display condition is met Approved-by: Dennis Hernandez
primeroIMS · Sep 18, 2024 · 88355ec · 88355ec
2 parents 5e024e0 + f7ac9c7
commit 88355ec
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 10 deletions.
diff --git a/app/javascript/components/record-form/form/record-form.jsx b/app/javascript/components/record-form/form/record-form.jsx
@@ -197,7 +197,7 @@ function RecordForm({
     return (
       <>
         <Formik
-          initialValues={initialValues}
+          initialValues={{ ...initialValues }}
           validationSchema={validationSchema}
           validateOnBlur={false}
           validateOnChange={false}

diff --git a/app/javascript/components/record-form/form/validations.js b/app/javascript/components/record-form/form/validations.js
@@ -141,7 +141,7 @@ export const fieldValidations = (field, { i18n, online = false }) => {
         validations[name] = bool().oneOf([true], requiredMessage);
         break;
       case type === SELECT_FIELD && multiSelect:
-        validations[name] = array().min(1, requiredMessage);
+        validations[name] = array();
         break;
       default:
         validations[name] = (validations[name] || string()).nullable();
@@ -162,14 +162,26 @@ export const fieldValidations = (field, { i18n, online = false }) => {
             [relatedField]: relatedFieldValue
           });
         },
-        then:
-          type !== TALLY_FIELD
-            ? schema.required(requiredMessage)
-            : currentSchema =>
-                currentSchema.test(name, requiredMessage, value => {
-                  return compact(Object.values(value)).length > 0;
-                }),
-        otherwise: type !== TALLY_FIELD ? schema.notRequired() : currentSchema => currentSchema.notRequired()
+        then: $schema => {
+          if (type === SELECT_FIELD && multiSelect) {
+            return $schema.min(1, requiredMessage);
+          }
+
+          if (type === TALLY_FIELD) {
+            return $schema.test(name, requiredMessage, value => {
+              return compact(Object.values(value)).length > 0;
+            });
+          }
+
+          return $schema.required(requiredMessage);
+        },
+        otherwise: $schema => {
+          if (type === SELECT_FIELD && multiSelect) {
+            return $schema.min(0);
+          }
+
+          return $schema.notRequired();
+        }
       });
     } else {
       if (!([TICK_FIELD, SELECT_FIELD, TALLY_FIELD].includes(type) || (type !== SELECT_FIELD && multiSelect))) {
@@ -180,6 +192,10 @@ export const fieldValidations = (field, { i18n, online = false }) => {
         validations[name] = schema.required(requiredMessage);
       }
 
+      if (type === SELECT_FIELD && multiSelect) {
+        validations[name] = schema.min(1, requiredMessage).required(requiredMessage);
+      }
+
       if (type === TALLY_FIELD) {
         validations[name] = schema.test(name, requiredMessage, value => {
           return compact(Object.values(value)).length > 0;

diff --git a/app/javascript/components/record-form/form/validations.unit.test.js b/app/javascript/components/record-form/form/validations.unit.test.js
@@ -140,6 +140,37 @@ describe("<RecordForm>/form/validations", () => {
 
           expect(schema.isValidSync(formData)).to.be.false;
         });
+
+        describe("select with a display condition", () => {
+          const selectFieldWithDisplayCondition = {
+            name: "cities",
+            display_name: { en: "Cities" },
+            type: SELECT_FIELD,
+            multi_select: true,
+            required: true,
+            display_conditions_record: {
+              eq: { testField: 1 }
+            }
+          };
+
+          it("should not validate", () => {
+            const schema = object().shape(
+              validations.fieldValidations({ ...selectFieldWithDisplayCondition, required: true }, { i18n })
+            );
+            const formData = {};
+
+            expect(schema.isValidSync(formData)).to.be.true;
+          });
+
+          it("should validate", () => {
+            const schema = object().shape(
+              validations.fieldValidations({ ...selectFieldWithDisplayCondition, required: true }, { i18n })
+            );
+            const formData = { testField: 1 };
+
+            expect(schema.isValidSync(formData)).to.be.true;
+          });
+        });
       });
 
       context("when it is not required", () => {