Tab selects fired during scope destruction

[samward1985]

After updating to 0.11, I'm having issues with the tab select function.

I have a function as follows:

<tab select="logOut()">

I'm finding that logOut() fires whenever I click any link in any of the tab content areas.

[pkozlowski-opensource]

@sjdw80 please provide a minimal reproduce scenario using http://plnkr.co/, otherwise we can't help.

[samward1985]

@pkozlowski-opensource

I'll work on that. In the meantime, I've narrowed down the behavior a bit. It looks as though, if I use the $location service within any ng-click functions in the tabset to navigate away from the page, the select function for each tab is fired.

[samward1985]

@pkozlowski-opensource

It doesn't look at though plinkr will let me use the $location service normally, so I can't really demonstrate it there. The problem is with the following line:

ctrl.select(tabs[newActiveIndex]);

Found in TabsetController. It looks as though, when the $location service is used to navigate away, the removeTab function is being called on each tab:

scope.$on('$destroy', function() {
     tabsetCtrl.removeTab(scope);
});

        ctrl.removeTab = function removeTab(tab) {
            var index = tabs.indexOf(tab);
            //Select a new tab if the tab to be removed is selected
            if (tab.active && tabs.length > 1) {
                //If this is the last tab, select the previous tab. else, the next tab.
                var newActiveIndex = index == tabs.length - 1 ? index - 1 : index + 1;
                ctrl.select(tabs[newActiveIndex]);
            }
            tabs.splice(index, 1);
        };

Which will lead to each tab being sequentially "selected" and each tab select function being fired as the user navigates away from the page.

[onsails]

I am having the same issue. Here is plunk: http://plnkr.co/edit/O8TKIS?p=preview
Press "Disable tabs" and see alert from the select callback.

[samward1985]

Thanks for taking the time to do that, @prettynatty

[pursual]

Just discovered this issue as well. Since select is fired on every tab on every tab it is hard to keep track of the last selected when redrawing.

[onsails]

I am changing url on tab select and the app is becoming insane when I destroy scope containing tabs.

[chriswu14]

In my case I have two tabs, first tab is default to selected and I have server call wired to each tab's selection. if I leave the page by clicking back button the second tab selected call will be made to the server. This is because when the tab is being destroyed the remaining one wants to be selected automatically. BUT if I change tab then leave the page nothing will happen because the following code only triggers if the active one is removed first(I guess).

Just some discoveries

 ctrl.removeTab = function removeTab(tab) {
        var index = tabs.indexOf(tab);
        //Select a new tab if the tab to be removed is selected
        if (tab.active && tabs.length > 1) {
            //If this is the last tab, select the previous tab. else, the next tab.
            var newActiveIndex = index == tabs.length - 1 ? index - 1 : index + 1;
            ctrl.select(tabs[newActiveIndex]);
        }
        tabs.splice(index, 1);
    }; 

[mkeuschn]

I have the same problem when I am navigating away from the site where the tabs are located the events are fired.
I have created a question on SO (http://stackoverflow.com/questions/24279287/tab-select-event-is-triggered-when-i-am-navigating-away).

And here the plunk
http://plnkr.co/edit/7NQwVGa7tpBDNRbIckZk?p=preview

I have this issue too I believe. It prevents the user from using the back button on their browser when the back button destination is a state (using ui-router) on a different parent. It appears to go to the correct location but then immediately goes back to the tabs page (without parameters) and fires off all the tab states

[adressin]

I'm also experiencing this with 0.11.0. I save the current tab to local storage when selected, so this issue is causing the incorrect tab to be stored.