fix: prevent multiselects from validating early

Closes #1123

Author: Skaiir

packages/form-js-viewer/src/render/components/FormField.js

@@ -1,4 +1,5 @@
 import { useCallback, useContext, useEffect, useMemo, useState } from 'preact/hooks';
+import isEqual from 'lodash/isEqual';
 
 import { get } from 'min-dash';
 
@@ -91,7 +92,9 @@ export function FormField(props) {
 
   useEffect(() => {
 
-    if (initialValidationTrigger && initialValue) {
+    const hasInitialValue = initialValue && !isEqual(initialValue, []);
+
+    if (initialValidationTrigger && hasInitialValue) {
       setInitialValidationTrigger(false);
       viewerCommands.updateFieldValidation(field, initialValue, indexes);
     }

packages/form-js-viewer/test/spec/Form.spec.js

@@ -22,6 +22,7 @@ import dynamicListTableFilterInteractionSchema from './dynamic-list-table-filter
 import hiddenFieldsConditionalSchema from './hidden-fields-conditional.json';
 import hiddenFieldsExpressionSchema from './hidden-fields-expression.json';
 import disabledSchema from './disabled.json';
+import requiredSchema from './required.json';
 import schema from './form.json';
 import groupsSchema from './groups.json';
 import schemaNoIds from './form.json';
@@ -581,6 +582,24 @@ describe('Form', function() {
   });
 
 
+  it('should not trigger required validation on initial load', async function() {
+
+    // given
+    const data = {};
+
+    // when
+    await bootstrapForm({
+      container,
+      data,
+      schema: requiredSchema
+    });
+
+    // then
+    expect(form).to.exist;
+    expect(document.body.innerHTML).not.to.contain('Field is required.');
+
+  });
+
   const runFocusBlurTest = function(id, index, selector) {
 
     it('focus and blur events should trigger for ' + id, async function() {

packages/form-js-viewer/test/spec/required.json

@@ -0,0 +1,94 @@
+{
+  "$schema": "../../../form-json-schema/resources/schema.json",
+  "components": [
+    {
+      "key": "creditor",
+      "id": "Creditor_ID",
+      "label": "Creditor",
+      "type": "textfield",
+      "validate": {
+        "required": true
+      }
+    },
+    {
+      "key": "invoiceNumber",
+      "label": "Invoice Number",
+      "type": "textfield",
+      "validate": {
+        "required": true
+      }
+    },
+    {
+      "key": "amount",
+      "label": "Amount",
+      "type": "number",
+      "validate": {
+        "required": true
+      }
+    },
+    {
+      "key": "approved",
+      "label": "Approved",
+      "type": "checkbox",
+      "validate": {
+        "required": true
+      }
+    },
+    {
+      "key": "approvedBy",
+      "label": "Approved By",
+      "type": "textfield",
+      "validate": {
+        "required": true
+      }
+    },
+    {
+      "key": "approverComments",
+      "label": "Approver comments",
+      "type": "textarea",
+      "validate": {
+        "required": true
+      }
+    },
+    {
+      "key": "product",
+      "label": "Product",
+      "type": "radio",
+      "validate": {
+        "required": true
+      }
+    },
+    {
+      "key": "mailto",
+      "label": "Email Summary To",
+      "type": "checklist",
+      "validate": {
+        "required": true
+      }
+    },
+    {
+      "key": "language",
+      "label": "Language",
+      "type": "select",
+      "validate": {
+        "required": true
+      }
+    },
+    {
+      "key": "conversation",
+      "type": "datetime",
+      "validate": {
+        "required": true
+      }
+    },
+    {
+      "key": "tags",
+      "label": "Taglist",
+      "type": "taglist",
+      "validate": {
+        "required": true
+      }
+    }
+  ],
+  "type": "default"
+}