IgxTabs: Dynamically adding a tab is not working properly

[Timmeeeey]

Description

If you dynamically add a tab which should be directly selected the tab content is displayed but the tab is not selected.

• igniteui-angular version: 12.0.6
• browser: Chrome 91

Steps to reproduce

<igx-tabs #tabGroup>
  <igx-tab-item *ngFor="let tab of tabs" [selected]="tab.selected">
    <igx-tab-header>
      {{tab.header}}
    </igx-tab-header>
    <igx-tab-content>
      content of {{tab.header}}
    </igx-tab-content>
  </igx-tab-item>
</igx-tabs>

<button (click)="addTab()">open new tab</button>
<p>selected index: {{tabGroup.selectedIndex}}</p>

tabs = [
  { header: 'Tab 1', selected: false },
  { header: 'Tab 2', selected: true }
];

addTab() {
  this.tabs.forEach(tab => (tab.selected = false));
  this.tabs.push({ header: 'Tab 3', selected: true });
}

click button to execute addTab()

Result

The content of the new tab is displayed but the tab doesn't get selected.
The selectedIndex of IgxTabs is set to -1;

Expected result

The new tab should be selected and the selectedIndex should be correctly updated.

Attachments

https://stackblitz.com/edit/angular-ivy-2wwec2

[onlyexeption]

Hello @Timmeeeey, I've changed your sample a bit so it can work properly. You can view it here - https://stackblitz.com/edit/angular-ivy-gkwjib?file=src/app/app.component.ts

Due to limitations, you need to use requestAnimationFrame in order to update the selectedIndex. Let me know if that works out for you!

[Timmeeeey]

Hi @onlyexeption, yes this works for me thank you.