Topic: [collapsed] failing if change is too fast (mdbCollapse)
Flub premium asked 2 years ago
Another anoying finding here.
Expected behavior
If [collapsed] is changed, component should always follow the content of the provided value.
Actual behavior
When [collapsed] value is changed too fast (Before the end of the collapsing/uncollapsing animation, i.e. when double-clicking the button) then the state of the component does not reflect the value provided. In other words, component can show itself collapsed when _collapsed is false, or show itself not collapsed when _collapsed is true.
Resources (screenshots, code snippets etc.)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div class="d-flex flex-column">
<div>
<button class="btn btn-primary" type="button"
(click)="_collapsed = !_collapsed"
[attr.aria-expanded]="!_collapsed"
aria-controls="collapseExample">
Button
</button>
<!--Collapsed content-->
<div class="mt-3" id="collapseExample" mdbCollapse #basicCollapse="mdbCollapse" [collapsed]="_collapsed">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident.
</div>
</div>
<div>
COLLAPSED: {{_collapsed}}
</div>
</div>
`})
export class AppComponent {
title = 'mdbcollapse';
_collapsed = true;
}
Thanks
Flub premium answered 2 years ago
The thing is that I could not use the collapsed state the way you suggested because, in my case, it has to come from a cookie value, so that's the reason why I needed an external variable holding the collapsed state.
I managed however to find a solution by toggling the cookie, not on the click event, but only after waiting the animation ends instead. To make it short, something like this :
<div class="mt-3" id="collapseExample" mdbCollapse #basicCollapse="mdbCollapse"
(collapseShown)="_collapsed = true"
(collapseHidden)="_collapsed = false">
...
</div>
Hope that might help others in similar cases,
Thanks
Arkadiusz Idzikowski staff answered 2 years ago
@Flub I double-checked that and it looks like the underlying directive variable collapsed
is updated correctly. You can use it to update the aria-expanded
value instead of creating your own variable.
Here is an example:
https://mdbootstrap.com/docs/b5/angular/components/collapse/#section-basic-example
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 2.0.0
- Device: Windows
- Browser: FF, Edge, Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No