diff --git a/src/Form.js b/src/Form.js index e613335066..15c09c1671 100644 --- a/src/Form.js +++ b/src/Form.js @@ -148,13 +148,13 @@ export default class Form extends Element { else { this.element = null; } + this.options = formOptions; + this.options.events = this.events; if (form) { this.setForm(form) .then(() => this.readyResolve(this.instance)) .catch(this.readyReject); } - this.options = formOptions; - this.options.events = this.events; this.display = ''; } @@ -321,7 +321,7 @@ export default class Form extends Element { } else { this.instance.url = formParam; } - + this.instance.nosubmit = false; this._form = this.instance.form = form; if (submission) { diff --git a/src/Wizard.js b/src/Wizard.js index 4288bb4cfa..d0ccca8d50 100644 --- a/src/Wizard.js +++ b/src/Wizard.js @@ -21,7 +21,7 @@ export default class Wizard extends Webform { */ constructor(elementOrOptions = undefined, _options = undefined) { let element, options; - if (elementOrOptions instanceof HTMLElement || options) { + if (elementOrOptions instanceof HTMLElement || _options) { element = elementOrOptions; options = _options || {}; } else { @@ -281,8 +281,8 @@ export default class Wizard extends Webform { } /** - * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation, - * and emits a render event. It will initialize the wizard's index if necessary, + * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation, + * and emits a render event. It will initialize the wizard's index if necessary, * attach event hooks, and make sure that the current page is rendered and displayed correctly. * @param {HTMLElement} element - The DOM element to which the wizard will be attached. * @returns {Promise} A promise that resolves when all components have been successfully attached. @@ -365,7 +365,7 @@ export default class Wizard extends Webform { } /** - * Handles navigate on 'Enter' key event in a wizard form. + * Handles navigate on 'Enter' key event in a wizard form. * @param {KeyboardEvent} event - The keyboard event object that triggered the handler. */ handleNaviageteOnEnter(event) { @@ -379,7 +379,7 @@ export default class Wizard extends Webform { } /** - * Handles save on 'Enter' key event in a wizard form. + * Handles save on 'Enter' key event in a wizard form. * @param {KeyboardEvent} event - The keyboard event object that triggered the handler. */ handleSaveOnEnter(event) { @@ -420,7 +420,7 @@ export default class Wizard extends Webform { }); } - + /** * Emits an event indicating that a wizard page has been selected. * @param {number} index - Index of the selected wizard page in the `pages` array. @@ -887,7 +887,7 @@ export default class Wizard extends Webform { this.options.show[item.key] = true; } else if ( - Object.prototype.hasOwnProperty.call(this.wizard, 'full') + Object.prototype.hasOwnProperty.call(this.wizard, 'full') && !_.isEqual(this.originalOptions.show, this.options.show) ) { this.options.show = { ...(this.originalOptions.show || {}) }; diff --git a/src/components/form/Form.unit.js b/src/components/form/Form.unit.js index 8a0b8bd686..a62720ba04 100644 --- a/src/components/form/Form.unit.js +++ b/src/components/form/Form.unit.js @@ -12,7 +12,8 @@ import { comp5, comp6, comp7, - comp8 + comp8, + nestedWizardForm, } from './fixtures'; import Webform from '../../Webform'; import { Formio } from '../../formio.form.js'; @@ -462,4 +463,20 @@ describe('SaveDraft functionality for Nested Form', () => { }, 200); }).catch((err) => done(err)); }); + + it('Should pass all the required options to the nested form properly', function(done) { + const formElement = document.createElement('div'); + Formio.createForm( + formElement, + nestedWizardForm, + { + readOnly: true, + }, + ).then((form) => { + setTimeout(() => { + assert.equal(form.options.readOnly, true); + done(); + }).catch((err) => done(err)); + }); + }); }); diff --git a/src/components/form/fixtures/index.js b/src/components/form/fixtures/index.js index df7499d337..1462636ecd 100644 --- a/src/components/form/fixtures/index.js +++ b/src/components/form/fixtures/index.js @@ -7,5 +7,6 @@ import comp5 from './comp5'; import comp6 from './comp6'; import comp7 from './comp7'; import comp8 from './comp8'; -export { formModalEdit, comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 }; +import nestedWizardForm from './nestedWizardForm'; +export { formModalEdit, comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, nestedWizardForm }; diff --git a/src/components/form/fixtures/nestedWizardForm.js b/src/components/form/fixtures/nestedWizardForm.js new file mode 100644 index 0000000000..6fb0854a46 --- /dev/null +++ b/src/components/form/fixtures/nestedWizardForm.js @@ -0,0 +1,763 @@ +export default { + title: 'FIO-8760 Parent', + name: 'fio8760Parent', + path: 'fio8760parent', + type: 'form', + display: 'wizard', + tags: [], + components: [ + { + title: 'P1', + theme: 'default', + breadcrumbClickable: true, + buttonSettings: { + previous: true, + cancel: true, + next: true, + }, + navigateOnEnter: false, + saveOnEnter: false, + scrollToTop: false, + tooltip: '', + customClass: '', + collapsible: false, + hidden: false, + hideLabel: false, + disabled: false, + key: 'page1', + tags: [], + properties: {}, + conditional: { + show: null, + when: null, + eq: '', + json: '', + }, + customConditional: '', + nextPage: '', + logic: [], + attributes: {}, + overlay: { + style: '', + page: '', + left: '', + top: '', + width: '', + height: '', + }, + type: 'panel', + label: 'Page 1', + tabindex: '', + dataGridLabel: false, + components: [ + { + label: 'Text Field P', + applyMaskOn: 'change', + tableView: true, + validateWhenHidden: false, + key: 'textFieldP', + type: 'textfield', + input: true, + id: 'e8q428z', + placeholder: '', + prefix: '', + customClass: '', + suffix: '', + multiple: false, + defaultValue: null, + protected: false, + unique: false, + persistent: true, + hidden: false, + clearOnHide: true, + refreshOn: '', + redrawOn: '', + modalEdit: false, + dataGridLabel: false, + labelPosition: 'top', + description: '', + errorLabel: '', + tooltip: '', + hideLabel: false, + tabindex: '', + disabled: false, + autofocus: false, + dbIndex: false, + customDefaultValue: '', + calculateValue: '', + calculateServer: false, + widget: { + type: 'input', + }, + attributes: {}, + validateOn: 'change', + validate: { + required: false, + custom: '', + customPrivate: false, + strictDateValidation: false, + multiple: false, + unique: false, + minLength: '', + maxLength: '', + pattern: '', + }, + conditional: { + show: null, + when: null, + eq: '', + }, + overlay: { + style: '', + left: '', + top: '', + width: '', + height: '', + }, + allowCalculateOverride: false, + encrypted: false, + showCharCount: false, + showWordCount: false, + properties: {}, + allowMultipleMasks: false, + addons: [], + mask: false, + inputType: 'text', + inputFormat: 'plain', + inputMask: '', + displayMask: '', + spellcheck: true, + truncateMultipleSpaces: false, + }, + { + label: 'Form', + customClass: '', + tabindex: '', + hidden: false, + hideLabel: false, + disabled: false, + tableView: true, + form: { + title: 'FIO-8760 Child', + name: 'fio8760Child', + path: 'fio8760child', + type: 'form', + display: 'wizard', + components: [ + { + title: 'C1', + theme: 'default', + breadcrumbClickable: true, + buttonSettings: { + previous: true, + cancel: true, + next: true, + }, + navigateOnEnter: false, + saveOnEnter: false, + scrollToTop: false, + tooltip: '', + customClass: '', + collapsible: false, + hidden: false, + hideLabel: false, + disabled: false, + key: 'page1', + tags: [], + properties: {}, + conditional: { + show: null, + when: null, + eq: '', + json: '', + }, + customConditional: '', + nextPage: '', + logic: [], + attributes: {}, + overlay: { + style: '', + page: '', + left: '', + top: '', + width: '', + height: '', + }, + type: 'panel', + label: 'Page 1', + tabindex: '', + dataGridLabel: false, + components: [ + { + label: 'Text Field', + applyMaskOn: 'change', + tableView: true, + validateWhenHidden: false, + key: 'textField', + type: 'textfield', + input: true, + id: 'ed4tvz', + placeholder: '', + prefix: '', + customClass: '', + suffix: '', + multiple: false, + defaultValue: null, + protected: false, + unique: false, + persistent: true, + hidden: false, + clearOnHide: true, + refreshOn: '', + redrawOn: '', + modalEdit: false, + dataGridLabel: false, + labelPosition: 'top', + description: '', + errorLabel: '', + tooltip: '', + hideLabel: false, + tabindex: '', + disabled: false, + autofocus: false, + dbIndex: false, + customDefaultValue: '', + calculateValue: '', + calculateServer: false, + widget: { + type: 'input', + }, + attributes: {}, + validateOn: 'change', + validate: { + required: false, + custom: '', + customPrivate: false, + strictDateValidation: false, + multiple: false, + unique: false, + minLength: '', + maxLength: '', + pattern: '', + }, + conditional: { + show: null, + when: null, + eq: '', + }, + overlay: { + style: '', + left: '', + top: '', + width: '', + height: '', + }, + allowCalculateOverride: false, + encrypted: false, + showCharCount: false, + showWordCount: false, + properties: {}, + allowMultipleMasks: false, + addons: [], + mask: false, + inputType: 'text', + inputFormat: 'plain', + inputMask: '', + displayMask: '', + spellcheck: true, + truncateMultipleSpaces: false, + }, + ], + input: false, + tableView: false, + placeholder: '', + prefix: '', + suffix: '', + multiple: false, + defaultValue: null, + protected: false, + unique: false, + persistent: false, + clearOnHide: false, + refreshOn: '', + redrawOn: '', + modalEdit: false, + labelPosition: 'top', + description: '', + errorLabel: '', + autofocus: false, + dbIndex: false, + customDefaultValue: '', + calculateValue: '', + calculateServer: false, + widget: null, + validateOn: 'change', + validate: { + required: false, + custom: '', + customPrivate: false, + strictDateValidation: false, + multiple: false, + unique: false, + }, + allowCalculateOverride: false, + encrypted: false, + showCharCount: false, + showWordCount: false, + allowMultipleMasks: false, + addons: [], + tree: false, + lazyLoad: false, + breadcrumb: 'default', + id: 'eiahh', + }, + { + title: 'C2', + theme: 'default', + breadcrumbClickable: true, + buttonSettings: { + previous: true, + cancel: true, + next: true, + }, + navigateOnEnter: false, + saveOnEnter: false, + scrollToTop: false, + tooltip: '', + customClass: '', + collapsible: false, + hidden: false, + hideLabel: false, + disabled: false, + key: 'page2', + tags: [], + properties: {}, + conditional: { + show: null, + when: null, + eq: '', + json: '', + }, + customConditional: '', + nextPage: '', + logic: [], + attributes: {}, + overlay: { + style: '', + page: '', + left: '', + top: '', + width: '', + height: '', + }, + type: 'panel', + label: 'Page 2', + tabindex: '', + dataGridLabel: false, + components: [ + { + label: 'Checkbox', + tableView: false, + validateWhenHidden: false, + key: 'checkbox', + type: 'checkbox', + input: true, + id: 'ewlqwj', + placeholder: '', + prefix: '', + customClass: '', + suffix: '', + multiple: false, + defaultValue: null, + protected: false, + unique: false, + persistent: true, + hidden: false, + clearOnHide: true, + refreshOn: '', + redrawOn: '', + modalEdit: false, + dataGridLabel: true, + labelPosition: 'right', + description: '', + errorLabel: '', + tooltip: '', + hideLabel: false, + tabindex: '', + disabled: false, + autofocus: false, + dbIndex: false, + customDefaultValue: '', + calculateValue: '', + calculateServer: false, + widget: null, + attributes: {}, + validateOn: 'change', + validate: { + required: false, + custom: '', + customPrivate: false, + strictDateValidation: false, + multiple: false, + unique: false, + }, + conditional: { + show: null, + when: null, + eq: '', + }, + overlay: { + style: '', + left: '', + top: '', + width: '', + height: '', + }, + allowCalculateOverride: false, + encrypted: false, + showCharCount: false, + showWordCount: false, + properties: {}, + allowMultipleMasks: false, + addons: [], + inputType: 'checkbox', + value: '', + name: '', + }, + ], + input: false, + tableView: false, + placeholder: '', + prefix: '', + suffix: '', + multiple: false, + defaultValue: null, + protected: false, + unique: false, + persistent: false, + clearOnHide: false, + refreshOn: '', + redrawOn: '', + modalEdit: false, + labelPosition: 'top', + description: '', + errorLabel: '', + autofocus: false, + dbIndex: false, + customDefaultValue: '', + calculateValue: '', + calculateServer: false, + widget: null, + validateOn: 'change', + validate: { + required: false, + custom: '', + customPrivate: false, + strictDateValidation: false, + multiple: false, + unique: false, + }, + allowCalculateOverride: false, + encrypted: false, + showCharCount: false, + showWordCount: false, + allowMultipleMasks: false, + addons: [], + tree: false, + lazyLoad: false, + breadcrumb: 'default', + id: 'e5zxm1n', + }, + ], + machineName: 'lcdolhkidxuoxnx:fio8760Child', + }, + useOriginalRevision: true, + reference: true, + customDefaultValue: '', + calculateValue: '', + clearOnHide: true, + key: 'form', + tags: [], + properties: {}, + conditional: { + show: null, + when: null, + eq: '', + json: '', + }, + customConditional: '', + logic: [], + attributes: {}, + overlay: { + style: '', + page: '', + left: '', + top: '', + width: '', + height: '', + }, + type: 'form', + dataGridLabel: false, + input: true, + placeholder: '', + prefix: '', + suffix: '', + multiple: false, + defaultValue: null, + protected: false, + unique: false, + persistent: true, + refreshOn: '', + redrawOn: '', + modalEdit: false, + labelPosition: 'top', + description: '', + errorLabel: '', + tooltip: '', + autofocus: false, + dbIndex: false, + calculateServer: false, + widget: null, + validateOn: 'change', + validate: { + required: false, + custom: '', + customPrivate: false, + strictDateValidation: false, + multiple: false, + unique: false, + }, + allowCalculateOverride: false, + encrypted: false, + showCharCount: false, + showWordCount: false, + allowMultipleMasks: false, + addons: [], + src: '', + id: 'eenavpp', + revision: '', + }, + ], + input: false, + tableView: false, + placeholder: '', + prefix: '', + suffix: '', + multiple: false, + defaultValue: null, + protected: false, + unique: false, + persistent: false, + clearOnHide: false, + refreshOn: '', + redrawOn: '', + modalEdit: false, + labelPosition: 'top', + description: '', + errorLabel: '', + autofocus: false, + dbIndex: false, + customDefaultValue: '', + calculateValue: '', + calculateServer: false, + widget: null, + validateOn: 'change', + validate: { + required: false, + custom: '', + customPrivate: false, + strictDateValidation: false, + multiple: false, + unique: false, + }, + allowCalculateOverride: false, + encrypted: false, + showCharCount: false, + showWordCount: false, + allowMultipleMasks: false, + addons: [], + tree: false, + lazyLoad: false, + breadcrumb: 'default', + id: 'etytb0f', + }, + { + title: 'P2', + theme: 'default', + breadcrumbClickable: true, + buttonSettings: { + previous: true, + cancel: true, + next: true, + }, + navigateOnEnter: false, + saveOnEnter: false, + scrollToTop: false, + tooltip: '', + customClass: '', + collapsible: false, + hidden: false, + hideLabel: false, + disabled: false, + key: 'page2', + tags: [], + properties: {}, + conditional: { + show: null, + when: null, + eq: '', + json: '', + }, + customConditional: '', + nextPage: '', + logic: [], + attributes: {}, + overlay: { + style: '', + page: '', + left: '', + top: '', + width: '', + height: '', + }, + type: 'panel', + label: 'Page 2', + tabindex: '', + dataGridLabel: false, + input: false, + tableView: false, + components: [ + { + label: 'Text Field', + labelPosition: 'top', + placeholder: '', + description: '', + tooltip: '', + prefix: '', + suffix: '', + widget: { + type: 'input', + }, + inputMask: '', + displayMask: '', + applyMaskOn: 'change', + allowMultipleMasks: false, + customClass: '', + tabindex: '', + autocomplete: '', + hidden: false, + hideLabel: false, + showWordCount: false, + showCharCount: false, + mask: false, + autofocus: false, + spellcheck: true, + disabled: false, + tableView: true, + multiple: false, + persistent: true, + inputFormat: 'plain', + protected: false, + dbIndex: false, + 'case': '', + truncateMultipleSpaces: false, + encrypted: false, + redrawOn: '', + clearOnHide: true, + customDefaultValue: '', + calculateValue: '', + calculateServer: false, + allowCalculateOverride: false, + validateOn: 'change', + validate: { + required: false, + pattern: '', + customMessage: '', + custom: '', + customPrivate: false, + json: '', + minLength: '', + maxLength: '', + strictDateValidation: false, + multiple: false, + unique: false, + }, + unique: false, + validateWhenHidden: false, + errorLabel: '', + errors: '', + key: 'textField', + tags: [], + properties: {}, + conditional: { + show: null, + when: null, + eq: '', + json: '', + }, + customConditional: '', + logic: [], + attributes: {}, + overlay: { + style: '', + page: '', + left: '', + top: '', + width: '', + height: '', + }, + type: 'textfield', + dataGridLabel: false, + input: true, + refreshOn: '', + modalEdit: false, + addons: [], + inputType: 'text', + id: 'e7hk6wk', + defaultValue: null, + }, + ], + placeholder: '', + prefix: '', + suffix: '', + multiple: false, + defaultValue: null, + protected: false, + unique: false, + persistent: false, + clearOnHide: false, + refreshOn: '', + redrawOn: '', + modalEdit: false, + labelPosition: 'top', + description: '', + errorLabel: '', + autofocus: false, + dbIndex: false, + customDefaultValue: '', + calculateValue: '', + calculateServer: false, + widget: null, + validateOn: 'change', + validate: { + required: false, + custom: '', + customPrivate: false, + strictDateValidation: false, + multiple: false, + unique: false, + }, + allowCalculateOverride: false, + encrypted: false, + showCharCount: false, + showWordCount: false, + allowMultipleMasks: false, + addons: [], + tree: false, + lazyLoad: false, + breadcrumb: 'default', + id: 'exlwgmp', + }, + ], + machineName: 'lcdolhkidxuoxnx:fio8760Parent', +};