Expansion panels opened method is get called for all panels in accordian

[HemaVSitaram]

Bug:

This is a bug in accordian, where multiple expansion panels are getting emitted for a click on one expansion panel.

What is the expected behavior?

It is supposed to emit opened method for only the selected panel. Not all the opened emits

What is the current behavior?

It is getting emitted for multiple expansion panels.

What are the steps to reproduce?

Code Snippet
<mat-accordion *ngFor="let module of modules; let mi = index;"> <mat-expansion-panel [expanded]="miStep === mi" (opened)="openModulePanel(module.type, lang.code, mi)" hideToggle> <mat-expansion-panel-header> <mat-panel-title> {{ module?.metaData?.displayName }} </mat-panel-title> </mat-panel-title> </mat-expansion-panel-header> </mat-expansion-panel> </mat-accordion>

What is the use-case or motivation for changing an existing behavior?

Difficult to handle child panels

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 5.2.8
material: 5.2.5
Typescript: 2.4.2

Is there anything else we should know?

No

[josephperrott]

Can you provide a reproduction of the issue you are seeing? I was not able to reproduce what you described as you can see in this stackblitz.

Please provide a stackblitz reproduction to be able to investigate the issue.

[HemaVSitaram]

hey @josephperrott ,
i can see version mismatch. load the code in provided versions. Updated the code a bit as well.

`import {
Component, ElementRef
} from '@angular/core';
import { VERSION } from '@angular/material';

@component({
selector: 'material-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
version = VERSION;
panels = [0, 1, 2];
childPanels = [11,22,33]
selectedPanel = 1;

onPanelOpen(x: number) {
console.log(this.version);
console.log(Panel ${x} opened. ${this});
}

onChildPanelOpen(x: number, y: number) {
console.log(Panel ${x} opened, Child Panel ${y} opened.);
}
}
`

<mat-accordion> <mat-expansion-panel *ngFor="let panel of panels; let i = index;" (opened)="onPanelOpen(i)"> <mat-expansion-panel-header> <mat-panel-title> {{ panel }} </mat-panel-title> </mat-expansion-panel-header> <p> Panel number {{panel}} content</p> <mat-accordion> <mat-expansion-panel *ngFor="let childPanel of childPanels; let j = index;" [expanded]="selectedPanel === j" (opened)="onChildPanelOpen(i, j)"> <mat-expansion-panel-header> <mat-panel-title> {{ childPanel }} </mat-panel-title> </mat-expansion-panel-header> <p> childPanel number {{childPanel}} content</p> </mat-expansion-panel> </mat-accordion> </mat-expansion-panel> </mat-accordion>

[josephperrott]

I updated the stackblitz with the changes and versions you mentioned, but it still appears that the application works as expected.

[josephperrott]

Closing as we are not be able to reproduce this issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}