Hi all,
it's not necessarily a bug in the accordeon widget itself, but in the outsystems react code that handles updating the accordeon when the underlying variable changes.
You can see when you inspect the html, that using the toggle icon of the widget will update the section-expandable div between is--open and is--closed classes, and also update the section-expandable-content div between is--expanded and is-collapsed classes.
When you change a local IsExpanded variable, it will update the section-expandable div, but NOT the section-expandable-content div. You can for example see that it does change the border and the title text boldness.
I can find a collapse and a expand function in OutsystemsUI.Content.AccordeonItem.mvc.js that look right to me, and when debugging, those are the ones executed when using the toggle icon on the widget. These contain code for a transition animation, rolling the content up or down over a small amount of time. When I change the local variable to influence the widget, this animation doesn't happen, that leads me to think some other code is executed, and that has the bug. I'm not familiar with React.js, so I don't know really where to look for this.
But here for the good news : as a work around, you could tweak the css for your module, applying the "collapsed" style to any section-expandable-content that is inside a section-expandable is--closed div.
/* ================================================
Fix for Section Expandable
================================================ */
.section-expandable.is--closed .section-expandable-content {
height: 0;
padding: var(--space-none) var(--space-m);
visibility: hidden;
-servicestudio-height: auto;
-servicestudio-padding: var(--space-none) var(--space-m) var(--space-m);
}
See attached oml.
If you really need this for professional project, might be worth to report a bug to OS.
Regards,
Dorine