Topic: mdb-accordion not auto-expanding on mdb 10
Expected behavior mdb-accordion should auto-expand items with routerLinkActive="active"´when wrapped in a sideNav. I updated from mdb 8 -> 10 without changing the code (worked before). I know that I've had this particular issue in an older version of mdb so I suspect something is broken again.
Actual behavior mdb-accordion not auto-expanding.
Resources (screenshots, code snippets etc.)
<header class="intro-header">
<div class="side-wrapper">
<ng-container>
<mdb-side-nav #sidenav [sidenavBreakpoint]="1440" [fixed]="false">
<links>
<!-- Side navigation links -->
<mdb-accordion [multiple]="true" [autoExpand]="true" aria-multiselectable="false">
<mdb-accordion-item>
<mdb-accordion-item-head mdbWavesEffect>Header</mdb-accordion-item-head>
<mdb-accordion-item-body>
<ul>
<li><a [routerLink]="['myroute']" routerLinkActive="active" mdbWavesEffect>item</a></li>
</ul>
</mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>
<!--/. Side navigation links -->
</links>
<div class="sidenav-bg mask-strong"></div>
</mdb-side-nav>
</ng-container>
</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 10.0.0
- Device: Macbook
- Browser: Chrome
- OS: Mac OS
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 3 years ago
Hi. Thanks for reporting this bug. We will check why it is not working and fix it as soon as possible.
Tobias premium commented 3 years ago
Hi! Any news on this? I'm holding off updating a production site because of this. Or maybe there is a workaround? Thanks for looking into it!
Arkadiusz Idzikowski staff commented 3 years ago
Hello. We are still working on this issue, I'm afraid that a change on our end will be necessary and there is no easy workaround for now. We will inform you about the progress on this matter in this thread.
Tobias premium commented 3 years ago
I've been waiting for this to get fixed so I was super excited when I saw that 10.0.1 was released. Unfortunately it did not include a fix, although you did updates to the accordion component. :(
Arkadiusz Idzikowski staff commented 3 years ago
@Tobias This change required a bit more work and we did not manage to include it in the previous update. It should be fixed in the v10.1.1 (next week).
Tobias premium commented 3 years ago
I saw that you provided a fix in 10.1.1 but unfortunately it's still not working for me. What has changed is that I can now see on the arrow indicator that the correct menu should be expanded, although it's not, it seems to be hidden. I then have to click 2 times on it (one for closing although it's hidden and one for opening it again) to reveal it.
Refreshing a few times I can see that it occasionally works, but most of the times it does not. When I inspect the html I can see that this dynamically created div, inside the mdb-accordion-item-body element gets the height of 0px, although the it's container div have the active class and everything else seems correct:
Tobias premium commented 3 years ago
This is the dynamic element that gets 0px height:
Arkadiusz Idzikowski staff commented 3 years ago
@Tobias it's very strange, we tested this functionality very thoroughly, but we haven't encountered such a problem. Can you prepare a simple demo app on which we will be able to reproduce this issue and send it to a.idzikowski@mdbootstrap.com? We want to make sure we use exactly the same code, configuration, and dependencies versions.