3

I am using angular 15.0.4

When puting a mat-tab inside a mat-menu, I sometimes observe a strange behavior: the content of the mat-tab is not displayed.

<mat-menu #menu="matMenu">
  <mat-tab-group (click)="selectTab($event)">
    <mat-tab label="Affichage"> ABC </mat-tab>
    <mat-tab label="Export"> DEF </mat-tab>
  </mat-tab-group>
</mat-menu>

See example below:

enter image description here

Corresponding stackblitz here

What could cause this bug, and how to fix it?

Victor
  • 486
  • 3
  • 8
  • 1
    Let me add a link to your post on github, so it's easier for SO-users to track the development on this issue (I'm almost certain it's a regression since the css sets a hidden tag for both tabs): https://github.com/angular/components/issues/26383 – kellermat Jan 08 '23 at 10:19

1 Answers1

0

I've faced same problem issue is with new material version here is how i solved this issue Add this in constructor

private renderer: Renderer2

function called on tab change
onTabChange(event){ let element = document.querySelector(.mat-tab-body-content[style*="visibility: hidden"]) if(element){ this.renderer.setStyle(element, 'visibility', 'visible'); this.renderer.setStyle(element, 'display', 'block'); } }

call this function in (selectedTabChange) change in mat-tab-group

Muhammad Ahmad
  • 11