Any wizard panel update breaks builder in version > 4.7.8 [BUG]

Environment

• Hosting type
  • [ x] Local deployment
    • Version:
• Formio.js version: 4.9.0-beta.2 - 4.8.0
• Frontend framework: NodeJS
• Browser: Chrome
• Browser version: 79.0.3945.130

Steps to Reproduce

1. Create new wizard with text input, radio input, etc
2. Edit on any child element and its event data will reflect the changes
3. Edit the parent panel and no changes are reflected in the event data
4. Any changes made to a panel itself do not persist. If I change the panel title, it is only reflected in the builder while I remain on that panel. Moving from one panel to the next will reveal the changes in the builder do not persist.
5. On any attempt to change any settings in a top level panel, the builder breaks silently and I can no longer add any child elements. Child elements will show in builder only, not persist and not be reflected in data…

DEMO

Expected behavior

One should be able to change a panel attribute such as title Editing a panel should not break ability to build out the form.

Observed behavior

Any edits to a panel attribute, property etc. break builder. Rolling back to formio.js 4.7.8 corrects these issues

Note

I am using the code style shown here where the builder is passed in from then(builder …). I believe using the factory method in FormBuilder.js

Formio.builder(document.getElementById('builder'), {}, {...})
.then(function(builder) {
  builder.on('saveComponent', function() {
    ...
  });
});

I do not have an explanation why version 4.8.1 works here other than maybe slightly different instantiation method of builder and form render. Here the builder is a global returned by new Formio.FormBuilder

var builder = new Formio.FormBuilder(...)
builder.instance.on('saveComponent', onBuild);
builder.instance.on('editComponent', onBuild);
builder.instance.ready.then(onReady);

Please elaborate on the correct style of creating the builder if indeed this is the issue. I do see that when using the factory method for creating a new builder there is no builder.instance.form, there is only builder.form Thank you

[gorjupleon]

@jhen1422 @gregbown Had the same issue, but I found a workaround solution:

builder.on('saveComponent', () => builder.schema);

As long as the builder.schema getter is called on the change or saveComponent event, even if nothing is done with it, it seems to update the panel normally. I assume the getter does something that changes the behaviour, but I didn’t dig into the source code any further.

[gregbown]

@travist This is fixed with 4.10.2. Thank you! Panel changes no longer break form in wizard mode. Also, calling schema getter is no longer needed and the infinite loop is also fixed.