CODEWITHSUNDEEP
angularangular-material
Mohit Kumar Sharma
Mohit Kumar Sharma

Reputation: 647

Angular Material Accordion opening on outside click problem

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;
  }

Opened Accordion default state

On selecting dropdown accordion gets closed

After selection

On again selecting the dropdown, the accordion gets opened again

any solution please ?

Upvotes: 1

Views: 1006

Answers (3)

Saghi Shiri
Saghi Shiri

Reputation: 617

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

Upvotes: 0

IAfanasov
IAfanasov

Reputation: 4993

<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;
  }

Upvotes: 1

akkonrad
akkonrad

Reputation: 1073

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

Upvotes: 0

Related Questions