Components: Mat Tab Group not working as expected inside Mat Menu

[davidcanonieto]

Bug, feature request, or proposal:

Mat Tab Group does not autoselect its first tab by default when the mat tab group is located inside a mat menu.

What is the expected behavior?

Click on button to open menu.
Material menu opens displaying mat tab group inside.
Mat Tab group selects first tab by default.

What is the current behavior?

Click on button to open menu.
Material menu opens displaying mat tab group inside.
Mat Tab group does not select any tab.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-ur9arm?embed=1&file=app/app.component.html

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

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

Is there anything else we should know?

[bunjiboys]

I am seeing the exact same behavior when using a mat-tab-group inside an expanding table row as well. The tabs show up just fine, but on the initial load, its as if no tab is actually selected, and until you manually click a tab, none of them will be highlighted as being the active tab.

I've made a small demo on stackblitz specific for the expanding table issue: https://stackblitz.com/edit/angular-material2-issue-zaayhg

[DeviPrashanthiM]

Hi,
I am also facing this issue, while defining mat-tab-group inside mat-menu.
Please help me to resolve this issue.

[gcontro]

Hi,
I have the same problem with mat-tab-group into a mat-tab element.
How to resolve it?
Thanks

[rogersborchia]

Hi,
I have the same problem :(

[flmg]

Hi guys, I'm using the following workaround to force the refresh of the ink bar:

<!-- Bind to (menuOpened) output on matMenuTrigger -->
<button
    mat-raised-button
    [matMenuTriggerFor]="targetMenu"
    #targetMenuTrigger="matMenuTrigger"
    (menuOpened)="OnTargetMenuOpened($event)"
>Open Menu</button>

<!-- stopPropagation to prevent the menu from closing -->
<mat-menu #targetMenu="matMenu">
    <mat-tab-group
        (click)="$event.stopPropagation()"
        #targetMenuTabGroup
...

```typescript
@ViewChild('targetMenuTabGroup') targetMenuTabGroup: MatTabGroup;

...

OnTargetMenuOpened() {
this.targetMenuTabGroup.realignInkBar();
}
````

[crisbeto]

Closing since this isn't something that we support.

[angular-automatic-lock-bot[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._}