Panel component not collapsing

[cmorcom]

Environment

• Formio.js version: 5.2.2
• Frontend framework: Angular
• Browser: Google Chrome
• Browser version: 119.0.6045.160

Steps to Reproduce

1. Add Panel component
2. In conditional tab, enter custom javascript code, setting collapsed to true when it meets a condition
3. Save component
4. Save form
5. Test form where the condition is met

Expected behavior

If condition is met, it's expected that the panel will be collapsed.

Observed behavior

The panel does not collapse, even if the condition is met.

collapsed is being set to true (as seen in console), but this is not reflected visually.

Example

Custom code:

function collapseSection() {
      if (data && data.example && data.example < 16) {
        component.collapsed = true;
      }
      else {
        component.collapsed = false;
      }
    
    console.log('collapsed:' + component.collapsed);
}

collapseSection();

Console:

[travist]

It seems you are just changing the JSON of the component and not re-rendering the form after it has been collapsed. Instead to force the component to be collapsed, you will need to get the Panel component and then call the "collapsed" property on the actual component instance and not the JSON.

export class FormRenderComponent {
  @ViewChild(FormioComponent) formioComponent: FormioComponent;
  function collapseSection() {
      const component = this.formioComponent.formio.getComponent('mypanel');
      if (data && data.example && data.example < 16) {
        component.collapsed = true;
      }
      else {
        component.collapsed = false;
      }
  }
}