Angular Material Accordion opening on outside click problem

Question

I am working on an application in which I am using Angular 11 and Angular material. In this application I have implemented angular material accordion which gets generated dynamically. And in the accordion title I have also implemented a dropdown menu.

Problem: The problem is when I click on dropdown it gets opened but accordion is also getting opened/closed which is technically incorrect. As you can see below in images; by default accordion will be opened but when I click on dropdown menu it gets closed which is wrong as I didn't click on Accordion icon.

Below are the code files for better understanding.

app.component.html

<div class="trendFlow">
  <mat-accordion class="example-headers-align" *ngFor="let accordionData of accordianArray" multi>
    <mat-expansion-panel [expanded]="currentSensorId==accordionData.sensorId">
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{accordionData.sensorName|translate}}
        </mat-panel-title>

        <!-- SAMPLE CODE STARTS -->
        <div class="dropMenu">
          <mat-form-field appearance="fill">
            <mat-label>{{currentTimeValue|translate}}</mat-label>
            <mat-select [(ngModel)]="currentTimeValue">
              <mat-option *ngFor='let property of timeProperties' 
                   (click)="handleTimeSelection(property.name)">
                {{property.name|translate}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <!-- SAMPLE CODE ENDS -->
</div>

app.component.ts

accordianArray: any = [];
currentSensorId: number = 0;
public currentTimeValue = '1 Day';
  timeProperties: any = [
    { name: '1 Hour', id: 1 },
    { name: '4 Hours', id: 1 },
    { name: '1 Day', id: 1 }
  ];

  handleTimeSelection(propertyName: string) {
    this.currentTimeValue = propertyName;
  }

any solution please ?

score 1 · Answer 1 · answered May 10 '21 at 07:44

1

<mat-select [(ngModel)]="currentTimeValue">
  <mat-option *ngFor='let property of timeProperties' 
    (click)="handleTimeSelection(property.name, $event)">
    {{property.name|translate}}
  </mat-option>
</mat-select>

  handleTimeSelection(propertyName: string, event: MouseEvent) {
    event.stopPropagation();
    this.currentTimeValue = propertyName;
  }

answered May 10 '21 at 07:44

IAfanasov

4,775
3
27
42

IAfanasov: I tried using $event.stopPropagation(). But somehow it is not showing any changes. – Mohit Kumar Sharma May 11 '21 at 11:17
unexpected. may be `event.preventDefault()` would work? – IAfanasov May 12 '21 at 07:06

score 0 · Answer 2 · answered May 10 '21 at 07:41

0

It's because you click in both dropdown and accordion underneath. To solve that, you need to stop propagation of the click event from button to accordion.

On the dropdown click function you need to pass the $event, and then inside the function you need to call $event.stopPropagation().

You can find an example solution here: Angular 2 : Stop propagation of parent element's event , when clicking on link

answered May 10 '21 at 07:41

akkonrad

1,043
1
10
25

akkonrad: I tried using $event.stopPropagation(). But somehow it is not showing any changes. – Mohit Kumar Sharma May 11 '21 at 11:17

Saghi Shiri · Answer 3 · 2021-05-12T04:56:10.117

0

Try this:

  <mat-select [(ngModel)]="currentTimeValue" (click)="$event.stopPropagation()">
              <mat-option *ngFor='let property of timeProperties' 
                   (click)="handleTimeSelection(property.name)">
                {{property.name}}
              </mat-option>
  </mat-select>

Check this StackBlitz

edited May 12 '21 at 04:56

answered May 10 '21 at 09:58

Saghi Shiri

537
5
19

Saghi Shiri: I tried using $event.stopPropagation(). But somehow it is not showing any changes. – Mohit Kumar Sharma May 11 '21 at 11:17
I updated my answer and added an example. – Saghi Shiri May 12 '21 at 04:58

Angular Material Accordion opening on outside click problem

3 Answers3