mat-tab-group scrolls to top of page when tab index changes

Question

I have weird behaviour on mat-tab-group in Angular Material.

When I change tab index it scrolls the page to top.

Any idea why?

Answer 1

It is a known bug in the angular material library (see here) which has not been fixed yet.

The current workaround is to apply a min-height to the parent element of mat-tab-group

Answer 2

You can avoid this by adding a min-height to your mat-tab-group.

Exemple :

<mat-tab-group style='min-height:300px'>

Answer 3

The predefined minimum height will not work for dynamic heights (tabs where the size of the content changes), so the most responsive solution is to modify it when changing tabs so that the new tab stays with the minimum height of the previous one to avoid scroll up

---

//HTML

<mat-tab-group #matTabGroup (selectedTabChange)="onMatTabChanged();">

---

//TS

@ViewChild('matTabGroup', { static: true }) matTabGroup: MatTabGroup;

onMatTabChanged() {
  this.setMatTabGroup();
}

setMatTabGroup() {
  let ntvEl = this.matTabGroup._elementRef.nativeElement;
  ntvEl.style.minHeight = ntvEl.clientHeight + 'px';
}