fix(tabs): maintain selected tab when new tabs are added or removed

[crisbeto]

Maintains the selectedIndex of the current tab when a new tab is added or removed. Previously, changing the amount of tabs would shift the array, causing a different tab to be selected.

Fixes #7738.

[andrewseguin]

Is there any concern about a race when changing selectedIndex and the set of tabs at the same time? E.g. if tab two is selected, but then add a new tab in the front and set selectedIndex to 0, will the change in tabs cause indexToSelect to be set to 2 rather than the intended 0?

[crisbeto]

Sorry @andrewseguin, I just got around to rebasing this PR and saw your comment from a while ago. I think that there shouldn't be an issue with race conditions since the tab changes event will be fired after the selectedIndex has been passed in.

[ngbot]

I see that you just added the pr: merge ready label, but the following checks are still failing:
     status "continuous-integration/travis-ci/pr" is failing

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

[shahraship]

This fix seems to have broken existing expected functionality.

On this page: https://material.angular.io/components/tabs/examples
There is one example: Tag group with dynamically changing tabs
If you follow the example on stackblitz you'll see that "Select tab after adding" checkbox functionality doesn't work anymore.

Let me know if you want me to open a new bug for this.

[garrettH3S]

This still doesn't seem to be working ( https://stackblitz.com/angular/rkdrmvvyyjn?file=app%2Ftab-group-dynamic-example.ts v6.4.1). The focus after open doesn't seem to function correctly.

I fix this wrapping the index setter method in a setTimeout.

addTab(selectAfterAdding: boolean) {
    this.tabs.push('New');
    if (selectAfterAdding) {
      setTimeout( () => {
        this.selected.setValue(this.tabs.length - 1);
      })
    }
  }

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