tabs: nested tab groups scroll back to the top on every tab change

[RobChangCA]

Bug, feature request, or proposal:

When clicking on a nested mat-tab that is positioned at the bottom of the page the page jumps to the top requiring the user to scroll back down to see the new tab contents.

What is the expected behavior?

The tab should load its contents without moving the whole page.

What is the current behavior?

When clicking on a nested tab in a page with scroll the page scrolls to the top.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

What is the use-case or motivation for changing an existing behavior?

It is a very bad user experience to have to scroll back to the tabs every time you change tabs.

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

Angular/Material 7.0.3
Typescript 3.1.6

Is there anything else we should know?

[josephperrott]

Can you provide a reproduction in StackBlitz. This will help us to investigate the issue you are seeing.

[RobChangCA]

https://stackblitz.com/edit/angular-wjtrxy

[RobChangCA]

Can you provide a reproduction in StackBlitz. This will help us to investigate the issue you are seeing.

If you scroll down and hit a tab the window jumps to the top of the page.
https://angular-wjtrxy-spwkgs.stackblitz.io

This issue is still occurring with material 7.2 and angular 7.1.4 and is preventing me from using this control.

[darrunategui]

I just tested this with Material 7.2 as well and the bug is still there. It's currently blocking my company from switching over to using Material tabs. There's definitely enough information here to untag it as "needs clarification" and tag it as something that should be fixed soon.

There is another bug here that is also open regarding the same issue and is still looking for a proper fix.

[Arsenalist]

This is still not fixed in 7.2.1. This is quite a severe bug which is making use Material infeasible.

[Totati]

Hi!
I'm facing this bug too. I've figured it out, that it happens beacuse there is a state when none of the tabs are visible, for that short time there is no scrollbar at all.
I made an example https://stackblitz.com/edit/angular-mat-tab-change-scroll-jump

[Splaktar]

From the tabs placement docs:

Caution Avoid nesting a tab within another tab.

[Splaktar]

Both of the StackBlitz demos provided here are the same as those provided in #9592. Closing this as a duplicate of that issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}