FIO-8760: Fixes an issue where nested form is not getting all the opt…

…ions (#5754)

* FIO-8760: Fixes an issue where nested form is not getting all the options

* FIO-8760: Added test

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) {

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 || {}) };

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));
+    });
+  });
 });

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 };