Topic: Accordion collapsing when router.navigate
I am using the accordion control within a sidenav, this works fine and collapses/expands as expected.
However, when I use router.navigate to change the main it collapses any expanded items within the accordion. I presume that when router.navigate is called it tries to run the initial expanding animation but instead collapses currently open items.
I have also noticed that this does not happen when running in my development environment, it only happens when in production mode.
Hello, I seem to be having this same issue with collapses/nav collapses/accordions not working quite right, but only in the production build. For example, clicking an accordion header to collapse/open throws it into a weird state where if it's closing, it will first close it all the way immediately, animate opening, and when the animation is complete, it will instantly be closed.
It also seems Collapse and accordions see the 'show' prop as the opposite of what it's supposed to be. I have a Toggle that when clicked, toggles the show state. However, when the toggle is ON, the collapse will be closed, and visa versa.
I'm currently using the mdb-react-ui-kit version, 4.2.0, React 18.2.0, and React router dom 6.3.0.
Again, only collapse/accordions/nav collapse are the ones causing trouble. Everything else seems to be working fine. I noticed this seemed to be an issue in components that were using routes/query params. I am currently using the useLocation in those modules three modules where I have these MDB components.
Krzysztof Wilk staff commented 2 years ago
Hi!
Can you share your code with me? It'll be helpful to recognize the problem. Also - do you generate some links dynamically?
Dear @chris-clarkson
Apologies for the delay. Finally we were able to reproduce your problem. You were right, the bug was occurring. We've already fixed it, the next version of MDB will be improved.
Best Regards, Bartosz.
Version 8.3.1 is now available and auto expand/collapse of accordion should work correctly on route change (also when queryParams are used). Please let us know if you encounter any further problems with this component.
akrolis pro commented 5 years ago
Hello,
I updated to v8.3.1 and routerLink with queryParams works ok now, thanks!
Also I tried using router.navigate with and without queryparams (just to check, it's not necessary in our project), and it collapses the accordion either way.
chris-clarkson premium commented 5 years ago
Hello,
I have updated and unfortunately still have the same problem. I have created a test project that demonstrates the issue, is there somewhere I could upload this for you to see?
Arkadiusz Idzikowski staff commented 5 years ago
You can send it to me via email: a.idzikowski@mdbootstrap.com
I don't know if it's related, but in MDB 8.3.0 there are some problems with the menu accordion in the sidenav whenever there's queryparams in the routerlink call.
This worked Ok with MDB 8.2.0, now it collapses the accordion and doesn't highlight the active routerlink
<mdb-accordion-item>
<mdb-accordion-item-head mdbWavesEffect><span><i class="fas fa-folder-open"></i> TestMenu</span>
</mdb-accordion-item-head>
<mdb-accordion-item-body>
<ul>
<li><a routerLink="/test" [queryParams]="{type: 1}" routerLinkActive="active"
(click)="hideSideBar(sidenav)">
test1
</a></li>
<li><a routerLink="/test" [queryParams]="{type: 2}" routerLinkActive="active"
(click)="hideSideBar(sidenav)">
test2
</a></li>
</ul>
</mdb-accordion-item-body>
</mdb-accordion-item>
With no queryparams it works ok.
Bartosz Termena staff commented 5 years ago
Yes you are right.
After our previous changes to accordion behavior on the router link, we did not consider queryParams
We will try to fix it as soon as possible
Best Regards, Bartosz.
akrolis pro commented 5 years ago
Thanks, I hope this gets fixed soon.
Our project relies heavily on queryParams and we can't update it to mdb 8.3.0 because of this.
Bartosz Termena staff commented 5 years ago
I assure you that the next version will be corrected
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.3.0
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Bartosz Termena staff commented 5 years ago
Hi! Could you show me your code (or some demo app)?
Best, Bartosz.
chris-clarkson premium commented 5 years ago
Apologies for the delay, I will try to get something this week. I have noticed however that it is caused by the latest update not being production/dev. While I am not using queryparams as the comment below mentions, I suspect it may be the same cause for both issues
chris-clarkson premium commented 5 years ago
Hi, I sent a copy of the project to your colleague Arkadiusz last week. Can you confirm if this was received?
Arkadiusz Idzikowski staff commented 5 years ago
Hello. We received your app, thank you for sending it. We are currently trying to find the cause of this problem.
chris-clarkson premium commented 5 years ago
Hi, has any progress been made on this? We are currently running on an older version to get around this problem.
Arkadiusz Idzikowski staff commented 5 years ago
This problem should be fixed in v8.5.0 (which will be relased on monday 28.10)