Topic: [collapsed] failing if change is too fast (mdbCollapse)

Flub premium asked 9 months 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 9 months 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 9 months 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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: 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