how to fix mat-expansion-panel auto collapse within mat-select?

Question

I use mat-expansion-panel in my mat-select. at first time I open mat-select, It's ok. But when I click out of mat-select to close mat-select and click to mat-select second time to reopen it, My mat-expansion-panel is closed and i must to double to open it but not single click to reopen mat-expansion-panel. Can you help me? Thanks !

<mat-select multiple [formControl]="formControl">
 <mat-expansion-panel *ngFor="let group of groups" [expanded]="true">
                <mat-expansion-panel-header>
                    <mat-panel-title title="{{group.name}}">
                        <mat-checkbox (click)="toggleGroupParent($event, group.name, group.selected)" [(ngModel)]="group.selected" >
                            {{group.name}}
                        </mat-checkbox>
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <ng-container *ngFor="let item of items">
                    <mat-option *ngIf="item.type == group.name" [value]="item" (click)="togglePerOneInType(group.name)" title="{{item.text}}">
                        {{item.text}}
                    </mat-option>
                </ng-container>
            </mat-expansion-panel>
</mat-select>

score 1 · Answer 1 · edited Jun 09 '21 at 07:20

1

Add this

<mat-panel-title   (click)="$event.stopPropagation();">

edited Jun 09 '21 at 07:20

Majid Hajibaba

3,105
6
23
55

answered Jun 08 '21 at 13:29

Vignesh Prasath

11
1

If you asked friends/collegues to vote for your post, please don't – Vega Jun 08 '21 at 16:53

how to fix mat-expansion-panel auto collapse within mat-select?

1 Answers1