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

[ghost]

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.

[kdzwinel]

Same issue and same version as @adressin .

[danielgarciagil]

Hello

i fixed by this way (until now work for me)
danielgarciagil@2ba12fc

[wkjesus]

i have the same problem but with a modal....when modal close or dismiss, then trigger the tabselected, here is the plunkr: http://plnkr.co/edit/TXBAHvAAnB8xaWoD2dfB?p=preview

[PowerKiKi]

Same here after upgrading to 0.11.

@danielgarciagil could you submit a pull request with your fix, please ?

[fgarit]

I ran into this issue today as well.
When navigating away, when the $scope is destroyed, the select of each tab is called one after the other.

[marcosbrigante]

Same here when upgrading to 0.11 =[

[glenn-murray-bse]

Encountering this bug :(

Here is a workaround:

var destroying = false;
$scope.$on('$destroy', function() {
    destroying = true;
});

$scope.tabSelectMethod = function() {
    if(!destroying) {
        // doStuff()
    }
}

[mu7amed-abdelfata7]

The problem is still remaining and did not fix but i made a solution for me to solve the problem:
1- I added this function in TabsetController:

var destroyed = false;
ctrl.destroyTab = function destroyTab(tab) {
console.info("ctrl.destroyTab = function destroyTab(tab) {");
destroyed = true;
ctrl.removeTab(tab);
};

2-I calling destroyTab() rather than removeTab() in $on('$destroy') in tab directive:
scope.$on('$destroy', function() {
tabsetCtrl.destroyTab(scope);
});

please see if this solution is proper for the directive or not.

[karianna]

@mu7amed-abdelfata7 Can you open a new issue with a plunkr please.

[wesleycho]

I am not seeing this issue currently here.

Feel free to open another issue with a reproduction if possible as suggested.