mdb-tabset change Tab on router.navigate

Topic: mdb-tabset change Tab on router.navigate

Kloew free asked 4 years ago

Expected behavior

When I use this.router.navigate([ROUTE_URL.overview]); in an Component where I have a md-tabset, the md-tabset should not change to the last tab, while my route transition is processing. I use default angular route animation

Actual behavior

After router.navigate, the angular animation starts, but the the md.tabset change to the last defined tab. In DOM you can see that there is set the "active" class to the last tab.

Code, just a simple tabset.

 <!-- Nav Tabs -->
<mdb-tabset #staticTabs [buttonClass]="'md-tabs tabs-3'" [contentClass]="'card'">
  <!--Panel 1-->
  <mdb-tab heading="Profile">
    <div class="row">
      <div class="col-12">
        <br>
        <p>
          1111111111
        </p>
      </div>
    </div>
  </mdb-tab>
  <!--Panel 2-->
  <mdb-tab heading="Follow">
    <div class="row">
      <div class="col-12">
        <br>
        <p>
          22222222222
        </p>
      </div>
    </div>
  </mdb-tab>
  <!--Panel 3-->
  <mdb-tab heading="Contact">
    <div class="row">
      <div class="col-12">
        <br>
        <p>
         333333333333333
        </p>
      </div>
    </div>
  </mdb-tab>
</mdb-tabset>

Arkadiusz Idzikowski staff commented 4 years ago

We will try to reproduce that on our end. We use tabs in application with router navigation and we didn't encounter such problems during tests.

Do you use any public methods/inputs of mdb-tabset to change active tab programatically?

Kloew free commented 4 years ago

I have the simples tabset as i posted in my first message. You should activate default angular animation to route so you can see it before the page changes.

https://angular.io/guide/route-animations

Its the same when you use simple navbar navigation.

Maybe the tabset have a behaviour for look to #hash in url to switch to any tab ?

Arkadiusz Idzikowski staff commented 4 years ago

Thank you for the details, they will be very useful in the debugging process.

Add comment