Topic: Simple links on side nav should stay active if repeatedly clicked

gordysc pro asked 5 years ago


It appears the accordion will toggle a class to apply to itself (active vs collapsed) with each click.  This doesn't make sense if the accordion doesn't have any children (like how it's used for a simple link on the sidenav).  If the user clicks the accordion multiple times when it's being used as a simple link it should remain active.

https://git.mdbootstrap.com/mdb/angular/ng-pro/blob/master/pro/accordion/components/sb-item.head.ts#L15


Arkadiusz Idzikowski staff answered 5 years ago


Could you please send a demo to a.idzikowski@mdbootstrap.com? I tried to recreate these problems on my end, but without success. 

We can block the toggleClick method if accordion body is empty, but it should not affect how routerLinkActive works in this case. As you can see in the css styles we provided in the documentation, background color is applied to the h5 element (child of the accordion head) and not to the parent element with class 'card'.


gordysc pro answered 5 years ago


If I do the above it still has the same effect.  There are really 2 issues here on the MDB's side:
1) If you click the simple link twice, it'll be activated the first time, but on the 2nd click it'll remove the active class from the inner div.  See this line of code: 
https://git.mdbootstrap.com/mdb/angular/ng-pro/blob/master/pro/accordion/components/sb-item.head.html#L2

It's going to call the toggleClick method on every click....  

2) The routerLink being active is not being applied to the component on a hard refresh of the page.


Arkadiusz Idzikowski staff answered 5 years ago


You need to add routerLinkActive to the accordion-item-head instead of accordion-item (if accordion-item-body is empty) or to the 'a' tag (if you have some links inside accordion body).

Please make sure to add css styles as mentioned in the documentation. Those styles will be applied to the h5 element inside accordion-item-head.


gordysc pro answered 5 years ago


So basically the ask in this ticket is if the `mdb-accordion-item-head` component has an active class, to apply it to the nested card child element. Or to not mark the card child element as 'is-collapsed' if the parent mdb-accordion-item head component is marked active.  Either approach will solve the issue.


gordysc pro answered 5 years ago


This is the generated code.. notice the <div class='card active...'> This doesn't get updated by the routerLink & routerLinkActive properties, no matter which accordion element I use:

<mdb-accordion aria-multiselectable="false" ng-reflect-multiple="false">
<div class="accordion md-accordion"
<mdb-accordion-item class="no-collase">
<div class="card active" ng-reflect-klass="card " ng-reflect-ng-class="[object Object]">
<mdb-accordion-item-head mdbwaveseffect="" routerlink="" routerlinkactive="active" tabindex="0"
ng-reflect-router-link="" ng-reflect-router-link-active="active" class="active waves-effect">
<div class="card-header" ng-reflect-klass="card-header " ng-reflect-ng-class="[object Object]">
<a role="button">
<h5 class="mb-0">
<fa-icon class="ng-fa-icon" ng-reflect-icon-prop="[object Object]"
ng-reflect-fixed-width="true">
<svg aria-hidden="true" data-prefix="far" data-icon="home" class="svg-inline--fa fa-home fa-w-18 fa-fw"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M557.1 240.7L512 203.8V104c0-4.4-3.6-8-8-8h-32c-4.4 0-8 3.6-8 8v60.5L313.4 41.1c-14.7-12.1-36-12.1-50.7 0L18.9 240.7c-3.4 2.8-3.9 7.8-1.1 11.3l20.3 24.8c2.8 3.4 7.8 3.9 11.3 1.1l14.7-12V464c0 8.8 7.2 16 16 16h168c4.4 0 8-3.6 8-8V344h64v128c0 4.4 3.6 8 8 8h168c8.8 0 16-7.2 16-16V265.8l14.7 12c3.4 2.8 8.5 2.3 11.3-1.1l20.3-24.8c2.6-3.4 2.1-8.4-1.3-11.2zM464 432h-96V304c0-4.4-3.6-8-8-8H216c-4.4 0-8 3.6-8 8v128h-96V226.5l170.9-140c2.9-2.4 7.2-2.4 10.1 0l170.9 140V432z">
</path>
</svg>
</fa-icon>
Home
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<i class="fa fa-angle-down rotate-icon ng-star-inserted">
</i>
</h5>
</a>
</div>
</mdb-accordion-item-head>
<mdb-accordion-item-body class="ng-tns-c0-0 ng-star-inserted">
<div class="sb-item-body ng-trigger ng-trigger-expandBody" style="visibility: visible;">
<div class="card-body ">
</div>
</div>
</mdb-accordion-item-body>
</div>
</mdb-accordion-item>
<mdb-accordion-item class="no-collase">
<div class="card is-collapsed" ng-reflect-klass="card " ng-reflect-ng-class="[object Object]">
<mdb-accordion-item-head mdbwaveseffect="">
<div class="card-header" ng-reflect-klass="card-header " ng-reflect-ng-class="[object Object]">
<a role="button">
<h5 class="mb-0">
<fa-icon class="ng-fa-icon" ng-reflect-icon-prop="[object Object]"
ng-reflect-fixed-width="true">
<svg aria-hidden="true" data-prefix="far" data-icon="sign-out" class="svg-inline--fa fa-sign-out fa-w-16 fa-fw"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M96 64h84c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H96c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h84c6.6 0 12 5.4 12 12v24c0 6.6-5.4 12-12 12H96c-53 0-96-43-96-96V160c0-53 43-96 96-96zm231.1 19.5l-19.6 19.6c-4.8 4.8-4.7 12.5.2 17.1L420.8 230H172c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h248.8L307.7 391.7c-4.8 4.7-4.9 12.4-.2 17.1l19.6 19.6c4.7 4.7 12.3 4.7 17 0l164.4-164c4.7-4.7 4.7-12.3 0-17l-164.4-164c-4.7-4.6-12.3-4.6-17 .1z">
</path>
</svg>
</fa-icon>
Logout
<!--bindings={
"ng-reflect-ng-if": "true"
}-->
<i class="fa fa-angle-down rotate-icon ng-star-inserted">
</i>
</h5>
</a>
</div>
</mdb-accordion-item-head>
<mdb-accordion-item-body class="ng-tns-c0-1 ng-star-inserted">
<div class="sb-item-body ng-trigger ng-trigger-expandBody" style="height: 0px; visibility: hidden;">
<div class="card-body ">
</div>
</div>
</mdb-accordion-item-body>
</div>
</mdb-accordion-item>
</div>
</mdb-accordion>

gordysc pro answered 5 years ago


This is the Angular code:

<mdb-accordion-item class='no-collase' routerLink='/' routerLinkActive='active'>

<mdb-accordion-item-headmdbWavesEffect>

<fa-icon[icon]='faHome'[fixedWidth]='true'></fa-icon>Home

</mdb-accordion-item-head>

<mdb-accordion-item-body></mdb-accordion-item-body>

</mdb-accordion-item>

gordysc pro answered 5 years ago


This appears to be a bug in the current code.  No matter which element on the accordion I apply the routerLink & routerLinkActive options, they are not applied to the inner div:



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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: Yes