diff --git a/packages/form-js-viewer/src/render/components/FormField.js b/packages/form-js-viewer/src/render/components/FormField.js index 027641ac3..7033d1b90 100644 --- a/packages/form-js-viewer/src/render/components/FormField.js +++ b/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); } diff --git a/packages/form-js-viewer/test/spec/Form.spec.js b/packages/form-js-viewer/test/spec/Form.spec.js index e1da086ba..30e3c3d6b 100644 --- a/packages/form-js-viewer/test/spec/Form.spec.js +++ b/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() { diff --git a/packages/form-js-viewer/test/spec/required.json b/packages/form-js-viewer/test/spec/required.json new file mode 100644 index 000000000..f5a5b3bfb --- /dev/null +++ b/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" +}