[BUG] Breadcrumb allows jump

[pixie79]

Environment

• Hosting type
  • [] Form.io
  • [X ] Local deployment
• Formio.js version: 4.0.3€
• Browser: Safari | Chrome

Steps to Reproduce

1. Add a multipage wizard
2. Click on breadcrumb has no effect by default it is disabled
3. Test the form and try jumping to a new page

Expected behavior

I should not be able to select the next page

Observed behavior

The form jumps to the next page which means a user can bypass a page.

[travist]

This is the default behavior for wizards, so if you need this then this would require a configuration. We will add this to our planning, but we may need the community to add this feature if the demand for it is high enough.

[pixie79]

Um, you have an option on the Breadcrumb that looks like it does this? Or in fact it looks like a check box to enable jump so it not being selected would imply what we want?

[travist]

You may be correct... we will take a look.

[lailapfit]

I've added the breadCrumb: {clickable: false} to the form and the breadCrumb is still clickable.

[gavinorland]

Example: https://jsfiddle.net/L4oks67h/9/

[aminmc]

@travist @pixie79 I think this might be something inside the templates? I had a look and the flag isn't being passed into the templates and the wizard nav creates the links. If you think this is the case i'm happy to raise a PR.

[Dushes95]

This issue indeed needed to be fixed. Users can simply skip required fields and they will figure it out only on submitting step.

[aminmc]

This should be resolved in 4.7.4. Please check the change log.

[Dushes95]

I am using formio.full.min.js and I have added 4.7.4 version but the issue still exists I have also checked in json schema and it's disabeled everywhere

[aminmc]

https://github.com/formio/formio.js/blob/9a5e79c8899e67e556a0c3b376e710f7aabed18a/src/Wizard.js#L202 Applies the click events if the breadcrumb settings is set or defaults to true.

[takenbyforce]

Setting "breadcrumbClickable": false, still has no effect on 4.7.6

[aminmc]

have you tried:

breadcrumbSettings: {
                          clickable: false
                      }

I can confirm this works in 4.7.4

[takenbyforce]

Like this? Doesn't work for me on 4.7.6

{
    "display": "wizard",
    "components": [
        {
            "title": "Page 1",
            "breadcrumbSettings": {
                "clickable": false
            },
            "buttonSettings": {
                "previous": true,
                "cancel": true,
                "next": true
            },
            "collapsible": false,
            "key": "page1",
            "type": "panel",
            "label": "Page 1",
            "components": [
                {
                    "label": "Text Area",
                    "autoExpand": false,
                    "spellcheck": true,
                    "key": "textArea",
                    "type": "textarea",
                    "input": true
                }
            ],
            "input": false,
            "path": "page1"
        },
        {
            "title": "Page 2",
            "breadcrumbSettings": {
                "clickable": false
            },
            "buttonSettings": {
                "previous": true,
                "cancel": true,
                "next": true
            },
            "collapsible": false,
            "key": "page2",
            "type": "panel",
            "label": "Page 2",
            "components": [
                {
                    "label": "Number",
                    "mask": false,
                    "spellcheck": true,
                    "delimiter": false,
                    "requireDecimal": false,
                    "inputFormat": "plain",
                    "key": "number",
                    "type": "number",
                    "input": true
                }
            ],
            "input": false,
            "path": "page2"
        }
    ]
}

[takenbyforce]

Finally I've got it to work by putting this option in Formio.createForm() in my html page. Although, it's kind of misleading to have "breadcrumbClickable" option after bulding my form using FormBuilder

[Dushes95]

Yeah, FormBuilder has a checkbox for changing this option. And after unchecking it you excpect that you will not be able to change page by clicking on its name.

[gregbown]

@siniak @Dushes95 Agreed, the check-boxes in the builder have no effect, checking them does not persist and has no effect on the template header or footer. I would assume they worked back in 2017 when they were added but have since broken.

[wag110894]

Hello all,

Thank you for your patience while we got this issue resolved. This is resolved on our latest version of formio.js (4.10.0-rc.3). In order to have this work, you need to go into the Pages setting and change the "Breadcrumb Type" to 'hidden' and ensure that the Panel Navigation Buttons (Previous,Cancel, and Next) are set to true.

Thank you for choosing Form.io!

[blackbaud-RickSchnitzler]

We're using formiojs 4.11.1 in our Angular 9 app. We want breadcrumbs but not clickable, so we don't want to hide them. In fact we want to override the settings in the pages setting since our clients can manage their form using form builder. Even when they were set to hidden, they still showed up until going to the next page. We also hide the buttons and provide our own previous, next, submit and review buttons. The previous navigation buttons we (in angularJS ng-formio 2.19.6, ng-formio-builder 2.19.4) used were bs-wizard-dot.

        Formio.createForm(document.getElementById('formio'), this.formDefinition.schema, {
            // hide buttons
            buttonSettings: {
                showCancel: false,
                showNext: false,
                showPrevious: false,
                showSubmit: false,
                clickable: false
            },
            // disabled the breadcrumb bar click
            breadcrumbSettings: { clickable: false },
            hooks: {
                beforeSubmit: (submission: any, next: any) => {
                    next();
                },
                beforeNext: (currentPage: number, submission: any, next: any) => {
                    next();
                }
            }

[wag110894]

@blackbaud-RickSchnitzler you are able to uncheck the "Allow click on Breadcrumb" checkbox on each of the panel(s)/Wizard page(s).

I hope that this helps.

[blackbaud-RickSchnitzler]

Thanks. That is what I discovered.

We incorporate the form builder, for our users to make adjustments to their form, and hide that Allow click on Breadcrumb checkbox because we don't want the users to click on it and to mimic the way it working in ng-formio-builder.

Because it's hidden and because it was never on our previous application, the breadcrumbClickable property is not saved in the form definition. Even though the property doesn't exist in the form definition and we set breadcrumbSettings: { clickable: false }, in Formio.createForm it is still clickable.

So what we have to do is when the user saves form changes we have to specifically loop through every page and set it to false. Also for our users who have forms saved previously we have to write a retrofit program to also set it to false.

I guess I could also dig around the formio code to see how difficult it would be to use the value passed to Formio.createForm if breadcrumbClickable is undefined and create a pull request.

[blackbaud-RickSchnitzler]

Just a follow up. When our default form, which has 3 pages, has "breadcrumbClickable": false, for those three pages, adding new pages with the option hidden, works without having to set the property to false when saving. So one less task to do.

But I've come across another problem which my search of issues didn't find. When I add a new page, in the previous version, newPages property updated. Looking through our AngularJS code, we never set that value so it must have been updated in form-builder. But it's not being updated now in the angular 4.11.1 version for formiojs.

[wag110894]

@blackbaud-RickSchnitzler

Can you provide a video of the issue that you are seeing? I am not seeing when adding a new page to a 3-page wizard that it already sets "breadcrumbClickable" to false.

[heather-formio]

Closing this thread as it is stale, please reopen if needed. Thank you for your contributions!