[OutSystems UI] Accordion IsExpanded only closes the Title but not the content

Hi, I am currently using an accordion item inside a List, I set the value of the IsExpanded property to a variable with a boolean datatype and default value of false. On initial load, the accordion items are collapsed which is right since the value of IsExpanded is false. Now a created a client function that updates the value of isExpanded to true or false. When clicked, the accordion items were expanded all, however when clicked again to collapse, the content of the accordion is still in collapsed state. I am not sure if it is a bug that should be fixed on the widget. By the way, this is a reactive project. Thanks. 

Have you try to  Ajax Refresh the container or the accordion itself?

Joseph Omas wrote:

Hi Joseph,

Reactive apps don't have ajax refresh.

Best regards,

Ricardo

Yeah, I got the same behavior here!

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 

Ma. Joy Aropon wrote:

Hi,

What was the exact issue with Accordian....

Dorine Boudry wrote:

/* ================================================

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);
}

Hi Dorine,

I have check your .oml file it it working fine.

In your .olm  UserAccordeon you apply accordion widget under list records and assign IsExpanded variable to each accordion that's why when you change value of IsExpanded variablew then all accordion id effected....

Thanks

Nik

Nikhil Gondane wrote:

Hi Nikhil,

you are missing the point, just remove the fix css from my oml and try again, you'll see that collapsing with a button or switch don't work properly.

Dorine

And yes, my oml is working fine because it's what I'm proposing as a solution to the problem ;-)

Dorine Boudry wrote:

Hi Dorine ,

I  removed css from your oml after that published and check it work fine . Also I have add new Accordion without css  in same oml it is work fine .

Hi Nikhil,

Both Leandro and Ma.Joy also experienced this problem, can you tell us what OS version and what browser you are using ?

Hi Ma. Joy Aropon,

Thank you for the feedback! I'm sorry you encountered these issues.

This is indeed a defect on the AccordionItem pattern. We will work on a fix for a future release of OutSystems UI.

Meanwhile, I used Dorine Boudry oml to run some tests. Here's an updated one, with a cloned AccordionItem, with the fix. This way you don't need the css, it should all work as intended.

Let me know if it worked for you!

Best regards,

Bernardo Cardoso

Dorine Boudry wrote:

Hi Dorine, 

I am using OS 11.6.1 and Chrome browser.

Hi Ma. Joy Aropon,

This issue was fixed on the last release of OutSystems UI (2.3.0):

https://www.outsystems.com/forge/component-overview/1385/outsystems-ui

Best regards,

Bernardo Cardoso

Nice!