Expansion panel (opened)

[Swoox]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I have a loop of 4 expansion panels I open the expansion panel based on index.
After the panel open itself it will trigger (opened).

<div *ngFor="let arrays of form.controls.array.controls; let j = index">
   <mat-expansion-panel [expanded]="j === selectedCategory" (opened)="onExpand()">

The onExpand will be called.
In this function I do a focus on the first input inside the expansion panel.

What is the current behavior?

It doesn't focus the first input.
document.getElementById(21).focus();
This doesn't work.

What are the steps to reproduce?

Stackblitz is bugged with the newest animations it will give an error.

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

I expect the onExpand to be triggered after the panel is totally loaded in the dom so I can acces the content within.

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

Angular 6.0.5
Materials 6.0.2
TypeScript 2.7.2

Is there anything else we should know?

It's working when the panel is open or when I put an timeout of 50 miliseconds inside the function.

[josephperrott]

Closing as this is working as expected because the body of the mat-expansion-panel is visibility: hidden. By providing a timeout, it works as you expect because the element has already moved from visibility: hidden to visibility: visible.

Starting with #12412 you could instead focus after the afterExpanded event instead of when the opened value you changes as the opened value is what triggers the animation.

[Swoox]

In which version is this available?
Seems like a few days ago I might need to update.

[Swoox]

I see this being added but how does it work?
I don't see the afterExpanded mentioned in the outputs.
@josephperrott

inputs: ['disabled', 'expanded'],
  outputs: ['opened', 'closed', 'expandedChange'],

[klew582]

@josephperrott, @Swoox is right, the afterExpand and afterCollapse events do not actually emit in current shipping.

I am also in need of these events :)

[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.}