Topic: Accordion collapsing when router.navigate

chris-clarkson premium asked 3 years ago


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.


Bartosz Termena staff commented 3 years ago

Hi! Could you show me your code (or some demo app)?

Best, Bartosz.


chris-clarkson premium commented 3 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 3 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 3 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 3 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 3 years ago

This problem should be fixed in v8.5.0 (which will be relased on monday 28.10)


willm142 free answered 2 months ago


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 months ago

Hi!

Can you share your code with me? It'll be helpful to recognize the problem. Also - do you generate some links dynamically?


Bartosz Termena staff answered 3 years ago


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.


Arkadiusz Idzikowski staff answered 3 years ago


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 3 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 3 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 3 years ago

@chris-clarkson

You can send it to me via email: a.idzikowski@mdbootstrap.com


akrolis pro answered 3 years ago


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 3 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 3 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 3 years ago

I assure you that the next version will be corrected

Best Regards, Bartosz.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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