Components: Tabs does not respect setting selectedIndex

[iainmckay]

We have an md-tab-group with a number of md-tabs and we're setting an initial selected tab using the selectedIndex property and the user can then select to reset back to that initial tab. The problem we're finding is that if the user navigates using the labels to other tabs then chooses to reset back to the initial tab it doesn't work.

We've traced through and we can see that selectedIndex is never updated by the tab component when the user selects other tabs, so when we try to set selectedIndex back to the initial value, the angular change detection kicks in and says nothing changed.

We know this is early days but is this behaviour expected to change? Can we submit a PR to fix it? Or is there a rationale for it being this way?

[jelbourn]

Sounds like a bug @robertmesserle

[robertmesserle]

@iainmckay I'm working on a fix for this, but wanted to explain why the bug exists. When you initially include tabs, you use a one-way binding in order to pass your selectedIndex into the tabs component: <md-tab-group [selectedIndex]="selectedIndex">.

When you click around inside of tabs, this changes the internal value for selectedIndex, but since this is only a one-way binding, your component's value is never updated.

When you attempt to change tabs by setting your component value for selectedIndex, you are setting it to the same value that it already has, which is why change detection does not detect any changes.

---

In order to fix this, currently, you would have to keep a reference to the tab-group in your component and set its value explicitly:

<md-tab-group [selectedIndex]="selectedIndex" #tabGroup> ... </md-tab-group>
<button (click)="tabGroup.selectedIndex = selectedIndex">Reset index</button>

---

Another option (which is what I am working on adding) is to use a two-way binding so that your local selectedIndex will be updated when the internal value changes. This would look like this:

<md-tab-group [(selectedIndex)]="selectedIndex"> ... </md-tab-group>
<button (click)="selectedIndex = 0">Reset index</button>

Hopefully that makes sense.

[iainmckay]

@robertmesserle Thank you very much for the in-depth response, this was the conclusion we came to also.

[acedigibits]

why cant you put this in documentation? Getting activeTabIndex is most basic requirements for tabs.

Somehow i find that documentation of google is always incomplete.

[angular-automatic-lock-bot[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._}