diff --git a/src/Wizard.js b/src/Wizard.js index b052b0c100..f0f853d8ae 100644 --- a/src/Wizard.js +++ b/src/Wizard.js @@ -37,7 +37,6 @@ export default class Wizard extends Webform { this.originalComponents = []; this.page = 0; this.currentPanel = null; - this.currentPanels = null; this.currentNextPage = 0; this._seenPages = [0]; this.subWizards = []; @@ -1006,24 +1005,18 @@ export default class Wizard extends Webform { } // If the pages change, need to redraw the header. - let currentPanels; - let panels; + const currentPanels = this.pages; + // calling this.establishPages() updates/mutates this.pages to be the current pages + this.establishPages(); + const newPanels = this.pages; const currentNextPage = this.currentNextPage; - if (this.hasSubWizards) { - currentPanels = this.pages.map(page => page.component.key); - this.establishPages(); - panels = this.pages.map(page => page.component.key); - } - else { - currentPanels = this.currentPanels || this.pages.map(page => page.component.key); - panels = this.establishPages().map(panel => panel.key); - this.currentPanels = panels; - if (this.currentPanel?.key && this.currentPanels?.length) { - this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key)); - } + const panelsUpdated = !_.isEqual(newPanels, currentPanels); + + if (this.currentPanel?.id && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) { + const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id); + if (newIndex !== -1) this.setPage(newIndex); } - - if (!_.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) { + if (panelsUpdated || (flags && flags.fromSubmission)) { this.redrawHeader(); } diff --git a/test/forms/wizardWithNestedWizardsAdvConditional.js b/test/forms/wizardWithNestedWizardsAdvConditional.js new file mode 100644 index 0000000000..c50e11751b --- /dev/null +++ b/test/forms/wizardWithNestedWizardsAdvConditional.js @@ -0,0 +1,465 @@ +export default { + "_id": "67379d374d2df086c78c93d0", + "title": "WIZARD", + "name": "wizard", + "path": "wizard", + "type": "form", + "display": "wizard", + "tags": [], + "access": [ + { + "type": "read_all", + "roles": [ + "67379d374d2df086c78c93ae", + "67379d374d2df086c78c93b2", + "67379d374d2df086c78c93b6" + ] + } + ], + "submissionAccess": [], + "owner": null, + "components": [ + { + "title": "A", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page1", + "type": "panel", + "label": "Page 1", + "components": [ + { + "_id": "67379d374d2df086c78c93bb", + "title": "CHILD A", + "name": "childA", + "path": "childa", + "type": "form", + "display": "wizard", + "tags": [], + "access": [ + { + "type": "read_all", + "roles": [ + "67379d374d2df086c78c93ae", + "67379d374d2df086c78c93b2", + "67379d374d2df086c78c93b6" + ] + } + ], + "submissionAccess": [], + "owner": null, + "components": [ + { + "title": "A1", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page1", + "type": "panel", + "label": "Page 1", + "components": [ + { + "label": "A1", + "applyMaskOn": "change", + "tableView": true, + "validateWhenHidden": false, + "key": "a", + "type": "textfield", + "input": true + } + ], + "input": false, + "tableView": false + }, + { + "title": "A2", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page2", + "customConditional": "var b2comp = instance.root.root.getComponent('b2');\nshow = !(b2comp ? b2comp.getValue() === 'hide' : false);", + "type": "panel", + "label": "Page 2", + "input": false, + "tableView": false, + "components": [ + { + "label": "A2", + "applyMaskOn": "change", + "tableView": true, + "validateWhenHidden": false, + "key": "a2", + "type": "textfield", + "input": true + } + ] + }, + { + "title": "A3", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page3", + "type": "panel", + "label": "Page 3", + "input": false, + "tableView": false, + "components": [ + { + "label": "A3", + "applyMaskOn": "change", + "tableView": true, + "validateWhenHidden": false, + "key": "a3", + "type": "textfield", + "input": true + } + ] + } + ], + "pdfComponents": [], + "settings": {}, + "properties": {}, + "machineName": "authoring-qwwqrlcmffdcymd:childA", + "project": "67379d374d2df086c78c93a4", + "controller": "", + "revisions": "", + "submissionRevisions": "", + "_vid": 0, + "created": "2024-11-15T19:12:55.899Z", + "modified": "2024-11-15T19:12:55.901Z" + } + ], + "input": false, + "tableView": false + }, + { + "title": "B", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page2", + "type": "panel", + "label": "Page 2", + "components": [ + { + "_id": "67379d374d2df086c78c93c2", + "title": "CHILD B", + "name": "childB", + "path": "childb", + "type": "form", + "display": "wizard", + "tags": [], + "access": [ + { + "type": "read_all", + "roles": [ + "67379d374d2df086c78c93ae", + "67379d374d2df086c78c93b2", + "67379d374d2df086c78c93b6" + ] + } + ], + "submissionAccess": [], + "owner": null, + "components": [ + { + "title": "B1", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page1", + "type": "panel", + "label": "Page 1", + "components": [ + { + "label": "B1", + "applyMaskOn": "change", + "tableView": true, + "validateWhenHidden": false, + "key": "b", + "type": "textfield", + "input": true + } + ], + "input": false, + "tableView": false + }, + { + "title": "B2", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page2", + "type": "panel", + "label": "Page 2", + "input": false, + "tableView": false, + "components": [ + { + "label": "B2", + "applyMaskOn": "change", + "tableView": true, + "validateWhenHidden": false, + "key": "b2", + "type": "textfield", + "input": true + } + ] + }, + { + "title": "B3", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page3", + "type": "panel", + "label": "Page 3", + "input": false, + "tableView": false, + "components": [ + { + "label": "B3", + "applyMaskOn": "change", + "tableView": true, + "validate": { + "required": true + }, + "validateWhenHidden": false, + "key": "b3", + "type": "textfield", + "input": true + } + ] + } + ], + "pdfComponents": [], + "settings": {}, + "properties": {}, + "machineName": "authoring-qwwqrlcmffdcymd:childB", + "project": "67379d374d2df086c78c93a4", + "controller": "", + "revisions": "", + "submissionRevisions": "", + "_vid": 0, + "created": "2024-11-15T19:12:55.909Z", + "modified": "2024-11-15T19:12:55.911Z" + } + ], + "input": false, + "tableView": false + }, + { + "title": "C", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page3", + "type": "panel", + "label": "Page 3", + "components": [ + { + "_id": "67379d374d2df086c78c93c9", + "title": "CHILD C", + "name": "childC", + "path": "childc", + "type": "form", + "display": "wizard", + "tags": [], + "access": [ + { + "type": "read_all", + "roles": [ + "67379d374d2df086c78c93ae", + "67379d374d2df086c78c93b2", + "67379d374d2df086c78c93b6" + ] + } + ], + "submissionAccess": [], + "owner": null, + "components": [ + { + "title": "C1", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page1", + "type": "panel", + "label": "Page 1", + "components": [ + { + "label": "C1", + "applyMaskOn": "change", + "tableView": true, + "validateWhenHidden": false, + "key": "c1", + "type": "textfield", + "input": true + } + ], + "input": false, + "tableView": false + }, + { + "title": "C2", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page2", + "type": "panel", + "label": "Page 2", + "input": false, + "tableView": false, + "components": [ + { + "label": "C2", + "applyMaskOn": "change", + "tableView": true, + "validateWhenHidden": false, + "key": "c2", + "type": "textfield", + "input": true + } + ] + }, + { + "title": "C3", + "breadcrumbClickable": true, + "buttonSettings": { + "previous": true, + "cancel": true, + "next": true + }, + "navigateOnEnter": false, + "saveOnEnter": false, + "scrollToTop": false, + "collapsible": false, + "key": "page3", + "type": "panel", + "label": "Page 3", + "input": false, + "tableView": false, + "components": [ + { + "label": "C3", + "applyMaskOn": "change", + "tableView": true, + "validateWhenHidden": false, + "key": "c3", + "type": "textfield", + "input": true + } + ] + } + ], + "pdfComponents": [], + "settings": {}, + "properties": {}, + "machineName": "authoring-qwwqrlcmffdcymd:childC", + "project": "67379d374d2df086c78c93a4", + "controller": "", + "revisions": "", + "submissionRevisions": "", + "_vid": 0, + "created": "2024-11-15T19:12:55.919Z", + "modified": "2024-11-15T19:12:55.921Z" + } + ], + "input": false, + "tableView": false + } + ], + "pdfComponents": [], + "settings": { + + }, + "properties": { + + }, + "machineName": "authoring-qwwqrlcmffdcymd:wizard", + "project": "67379d374d2df086c78c93a4", + "controller": "", + "revisions": "", + "submissionRevisions": "", + "_vid": 0, + "created": "2024-11-15T19:12:55.928Z", + "modified": "2024-11-15T19:12:55.930Z" +} \ No newline at end of file diff --git a/test/unit/Wizard.unit.js b/test/unit/Wizard.unit.js index 62eab3c671..a481647a26 100644 --- a/test/unit/Wizard.unit.js +++ b/test/unit/Wizard.unit.js @@ -32,6 +32,7 @@ import wizardWithPanel from '../forms/wizardWithPanel'; import wizardWithWizard from '../forms/wizardWithWizard'; import simpleTwoPagesWizard from '../forms/simpleTwoPagesWizard'; import wizardWithNestedWizardInEditGrid from '../forms/wizardWithNestedWizardInEditGrid'; +import wizardWithNestedWizardsAdvConditional from '../forms/wizardWithNestedWizardsAdvConditional'; import wizardNavigateOrSaveOnEnter from '../forms/wizardNavigateOrSaveOnEnter'; import nestedConditionalWizard from '../forms/nestedConditionalWizard'; import wizardWithPrefixComps from '../forms/wizardWithPrefixComps'; @@ -42,6 +43,7 @@ import formsWithAllowOverride from '../forms/formsWithAllowOverrideComps'; import WizardWithCheckboxes from '../forms/wizardWithCheckboxes'; import WizardWithRequiredFields from '../forms/wizardWithRequiredFields'; import formWithNestedWizardAndRequiredFields from '../forms/formWithNestedWizardAndRequiredFields'; +import { wait } from '../util'; // eslint-disable-next-line max-statements describe('Wizard tests', () => { @@ -1880,6 +1882,31 @@ it('Should show tooltip for wizard pages', function(done) { }) .catch(done); }); + + it('Should set correct page index after hiding a conditionally hidden page in sibling nested wizard.', async () => { + const formElement = document.createElement('div'); + wizardForm = new Wizard(formElement); + await wizardForm.setForm(wizardWithNestedWizardsAdvConditional); + // navigate forward 4 pages to B2 + // A1 -> A2 -> A3 -> B1 -> B2 + for (let i = 0; i < 4; i++) { + wizardForm.nextPage(); + await wait(200); + } + const getPageTitles = () => wizardForm.pages.map(p => p.component.title); + assert.equal(wizardForm.page, 4); + assert.equal(wizardForm.currentPanel.title, 'B2'); + assert(getPageTitles().includes('A2')); + const b2Input = wizardForm.element.querySelector('input[name="data[b2]"]'); + const inputEvent = new Event('input'); + b2Input.value = 'hide'; + b2Input.dispatchEvent(inputEvent); + await wait(400); + assert(!getPageTitles().includes('A2'), 'A2 is hidden when B2 has a value of "hide"'); + assert.equal(wizardForm.page, 3, 'A2 is removed from the pages array and the page number/index must be decremented to maintain B2 as the current page'); + assert.equal(wizardForm.currentPanel.title, 'B2'); + }); + // BUG - uncomment once fixed (ticket FIO-6043) // it('Should render all pages as a part of wizard pagination', (done) => { // const formElement = document.createElement('div');