Angular Material Expansion Panel needs 3 clicks to open after close (Angular >10)

user_12927241 0
Viewed 594

After closing the Angular Material Expansion Panel via a boolean variable, it closes just fine but to reopen it again you will need to click it 3 times to reopen it. Apparently in Angular 6 it works just fine with the identical example but i obviously don't want to downgrade, i tried Angular 10 & 11 and it didn't work. I Also tried to close it via different ways like the panel's close method etc but no difference.

Short gif showing the problem

Stackblitz: Angular 11: https://stackblitz.com/edit/angular-ivy-4qj1n9?file=src%2Fapp%2Fapp.component.html

Angular 6 https://stackblitz.com/edit/material-all-examples-quprqw?file=app%2Fapp.module.ts

€dit: I was able to create a version without that weird behaviour but instead it has no animation which is bad also.. https://stackblitz.com/edit/angular-ivy-ar4tjp?file=src%2Fapp%2Fapp.component.html

mat-expansion-panel angular
1 Answers

From what I can tell it is some sort of a rendering problem that fails to update/render the expended row. What I've done is nowhere near perfect but it works so use it if you wish. I am tracking the menu opened/closed status and based on that I am fully rendering the expended button & expansion panel.

In component.ts I added the variable:

  menuOpen = false;

and In the component.html I did:

<button mat-icon-button [matMenuTriggerFor]="menu"
(click)="menuOpen=true"
(menuClosed)="langExpanded=false; menuOpen=false;"
>

(notice the "menuOpen=false;")

And lastly for I added the *ngIf's to both the button and the expansion panel based on the "menuOpen" variable

<button *ngIf="menuOpen" class="mat-menu-item" style="display:inline;"
   (click)="$event.stopPropagation();  langExpanded=!langExpanded;">
    <mat-icon>translate</mat-icon>
    <span>Language</span>
    <mat-icon class="customexpandicon" *ngIf="!langExpanded; else expandedIcon">expand_more</mat-icon>
    <ng-template #expandedIcon><mat-icon class="customexpandicon">expand_less</mat-icon></ng-template>
  </button>

  <mat-expansion-panel *ngIf="menuOpen" #langPanel="matExpansionPanel" class="mat-elevation-z0"
    (click)="$event.stopPropagation()" [disabled]="true" [expanded]="langExpanded">

stackblitz with the changes applied: https://stackblitz.com/edit/angular-ivy-ylkbwu?file=src/app/app.component.html

user_106341150
Related