Skip to content

Reactive forms within a tab #10155

@Swoox

Description

@Swoox

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The animationDone will be fired when the tab is done with switching.
image

What is the current behavior?

When hit enter I switch to the next tab. On the next tab it select the first form of my reactive form category (from the form array). If the from field has a dropdown panel, the panel shown on a different position.
I tried to fix this with "animationDone". This seems to be triggered before the selectedTabChange, where I set the index. So I can never switch to my other category (array).
image

I now fixed it with with a timeout of 200 ms. But this is not a wanted behaviour.

What are the steps to reproduce?

https://angular-zb8nct.stackblitz.io

private tabChanged(_index: any) {
  this.selectedTab = _index;
  // do something to focus the form field with a dropdown or autocomplete.
  document.getElementById(this.form.controls['array']['controls'][_index]['controls']['array']['controls'][0]['controls']['fieldID']['value']).focus();
}

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

I would like the animationDone to be triggered when the animation is really done. And I would like it to be triggered after the selectedTabChange

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

"@angular/material": "^5.1.1"
"@angular/core": "^5.0.5"
"typescript": "~2.4.2"

Is there anything else we should know?

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions