[Tabs] Ink bar does not update when container resizes

[rbleuse]

Bug, feature request, or proposal:

Bug :
Add stretched tabs in a sidenav container with side mode.
When the sidenav is resized with dynamic content (ie sidenav labels are translated), the md-ink-bar is not resized
That happens too with md-tab-nav-bar and full width tabs

What is the expected behavior?

md-ink-bar should be resized

What is the current behavior?

tabs are well resized but not md-ink-bar

What are the steps to reproduce?

plunkr :
https://plnkr.co/edit/q80nul7KYS8sJ0e8vwwi?p=preview
stackblitz :
https://stackblitz.com/edit/angular-material2-issue-6efd2m?file=main.ts

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

ng 5.1.1
material 5.0.1
chrome 61

Is there anything else we should know?

[finalxcode]

+1

[rbleuse]

Is there any news about this ? I updated the plunker to latest angular & material2, and still same issue.

BTW it seems now that the sidenav is overlapping tabs

[anton-dragon]

Is there any workaround for this issue?

[alexw10]

Hope this gets looked at soon, tried a few things to resolve this but no luck.

[Marshal27]

The issue to me appears that the _realignInkBar is only triggered by the _viewportRuler which is controlled by a window resize event. I attempted playing around with MutationObserver but unfortunately that is not able to monitor the values in the _tabListContainer.nativeElement that we would need for that to work.

Without a way to actively monitor either the clientWidth or offsetWidth values and trigger either an event or some type of changeDetection when those values are modified... I was stuck with the following hacky solution that allowed me to realign the inkBar after my resizing event. Not pretty but got the job done in my scenario.

Hope this helps others looking for a workaround to this issue.

setTimeout(() => {
window.dispatchEvent(new Event('resize'));
}, 100)

[rbleuse]

I personally fixed this issue in my project (i'm using a sidenav) by calling the private method _alignInkBar :

@ViewChild('matTabs') matTabs: MatTabNav;

ngOnInit() {
    this.sidenavService.getSidenav().onOpen
    .pipe(takeUntil(this.ngUnsubscribe))
    .subscribe(() => {
      this.alignInkBar();
    });
    this.sidenavService.getSidenav().onClose
    .pipe(takeUntil(this.ngUnsubscribe))
    .subscribe(() => {
      this.alignInkBar();
    });
  }

  // FIXME delete when https://github.com/angular/material2/issues/6130 is fixed
  alignInkBar() {
    setTimeout(() => {
      this.matTabs._alignInkBar();
    }, 0);
  }

  ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

[Marshal27]

@spanja thank you for sharing, your workaround is much more elegant!

[dannye]

@spanja Thanks for your workaround. It appears _alignInkBar() has been renamed to realignInkBar()

An issue I have is that the mat-tab-group is in a router-outlet which is inside the mat-sidenav-content
So the mat-sidenav that causes the buggy mat-ink-bar isn't accessible in the script for the component that contains the mat-tab-group

For now I'm doing something similar to @spanja except I'm using ngDoCheck() instead:

ngDoCheck() {
  this.matTabs.realignInkBar();
}

The major downside to this is that the mat-ink-bar doesn't get corrected until the mat-sidenav is finished opening/closing. This delay looks extra bad because I have two mat-tab-groups in that component and the second tab group works correctly because its mat-tab-header-pagination-controls-enabled is always present, and the mat-ink-bar is always correctly animated if pagination controls are enabled, regardless of the changing width of the container.

A minor downside to this is that the mat-tab-group which uses realignInkBar() flickers between having its pagination controls enabled and disabled very sporadically, even when there is enough room such that the pagination controls should not be enabled at all.

Is there any news on this bug?
Or any advice on improving the downsides to this workaround?

Thanks

EDIT:
The sporadic flipping between pagination controls being enabled/disabled only happens when the selected tab is the right-most tab. It also isn't really a downside to the workaround, but actually a bug caused by mat-stretch-tabs