[BUG] nextPage event in wizard not working

[agoetschm]

Environment

• Hosting type
  • [ ] Form.io
  • [x] Local deployment
    • Version: 1.30.0
• Formio.js version: 4.10.3-rc.3
• Frontend framework: angular 8.2.14

Steps to Reproduce

1. clone the angular-material-formio demo
2. replace the content of app.component.html with

<mat-formio [form]="form" [submission]="submission" (submit)="onSubmit($event)" (nextPage)="onNextPage()" (change)="onChange()"></mat-formio>

3. edit the app.component.ts file to contain

form: any = {
  "type": "form",
  "components": [
    {
      "key": "panel",
      "title": "Part 1",
      "components": [
        {
          "label": "Foo",
          "key": "foo",
          "type": "textfield",
        }
      ],
      "type": "panel",
    },
    {
      "key": "panel2",
      "title": "Part 2",
      "components": [
        {
          "label": "Bar",
          "key": "bar",
          "type": "textfield",
        }
      ],
      "type": "panel",
    }
  ],
  "display": "wizard",
  "title": "Test wizard",
};
submission: any = {
  "data": {
    "foo": 5
  }
};

onChange() {
  console.log('onChange');
}

onNextPage() {
  console.log('nextPage');
}

Expected behavior

When clicking the "Next" button of the sample form, a log line with the text "nextPage" should be output in the console. The event is documented in the wiki.

Observed behavior

No log line, it looks like the event is not emitted by the mat-formio component. The (change) event works well and the onChange log line appears.

I tried to use the non-material formio component with the angular-demo app and the event works there.

[agoetschm]

I tried to find out where the issue lies:

• the MaterialWizardComponent component has a nextPage() function which is called https://github.com/formio/angular-material-formio/blob/fb0035557f910367d774d5c4918074f208ac04eb/projects/angular-material-formio/src/lib/components/formio.wizard.ts#L48
• the Wizard class of the formio.js library has a nextPage method but I couldn't verify that it is called https://github.com/formio/formio.js/blob/e419302e8054c244f6e575841ea77b3a2e4e005c/src/Wizard.js#L604

My experience in debugging Angular apps is very limited, so if anyone has a hint on where to start I would be very thankful!