collapsible not staying open when routerLinkActive is true on child

[GlennVanSchil]

Problem:
When I visit a page which matches the route of a list item inside a collapsible list it briefly flashes the inner list item when the page is loaded and closes the collapsible list immediately. Opening and closing the collapsible list manually works as expected.

Expected behaviour:
When I visit a page which matches the route of a list item inside a collapsible list it opens the list and it stays open unless the user closes the collapsible list manually.

Code:

<ul class="collapsible" materialize="collapsible" data-collapsible="accordion">
   <li>
      <a class="collapsible-header">Configuration</a>
      <div class="collapsible-body" [style.display]="'block'">
         <ul>
            <li [routerLinkActive]="['active']">
               <a routerLink="/project/{{project.id}}/expressions">Expressions</a>
            </li>
         </ul>
      </div>
   </li>
</ul>

[szymon365]

@GlennVanSchil I have the same problem. Did you manage to solve that issue? I'll appreciate your answer.

[GlennVanSchil]

@szymon365 Sadly I did not. The project I was working on ended before I could solve it so I stopped looking for it. I did read some stuff about including Jquery(=bad practice though) in your Angular project and manipulate it that way.

If I remember correctly these contain the Jquery "solutions".

• Dogfalo/materialize#2384
• https://stackoverflow.com/questions/30956378/materialize-collapse-is-not-working-properly-when-trying-to-display-json-data

Good Luck