In my application, I have encountered an unusual issue.
Within my controller, I have two functions - one to add a tab, and one to remove a tab.
Below is the code snippet:
$scope.createTab = function(){
$scope.addTab("New Tab",50,0);
console.log($scope.mbpTabs.length);
}
$scope.deleteTab= function (index){
$scope.mbpTabs.splice(index,1);
}
I have omitted the code for the addTab function, as I believe it is not relevant to the current problem.
This is the structure of my tabs:
<md-tabs class="stretch-height" flex md-selected="mbpSelectedIndex" md-border-bottom md-autoselect md-dynamic-height>
<md-tab ng-repeat="tab in mbpTabs" md-on-select="onTabSelected(tab)">
<md-menu context-menu>
<div flex class="mbpTable" ng-right-click="$mdOpenContextMenu($event)">{{tab.title}}</div>
<md-menu-content>
<md-menu-item >
<md-button ng-click="deleteTab($index)" ng-disabled="mbpTabs.lenght<=1">
Delete
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-tab-body>
...
</md-tab-body>
</md-tab>
<md-tab md-on-select="createTab()">
<md-tab-label>
<div class="mbpTable" >+</div>
</md-tab>
</md-tabs>
After selecting the delete option from the context menu, the createTab function is triggered unexpectedly. Is there a way to identify the cause of this issue? I have searched extensively through the codebase for any references to createTab, but have not found a solution.
Thank you
EDIT:
Upon following the suggestion below, I have identified the calling stack of createTab:
https://i.sstatic.net/FQsEW.png
It appears that the issue is not originating from my code
EDIT 2:
The unexpected behavior only occurs when a new tab has been previously created.
EDIT 3:
The issue is dependent on certain conditions:
1) Deleting a newly created tab functions correctly only if the tab was selected before and is not currently selected.
2) Deleting a tab created during page loading only works if no new tabs have been added.
I am still unable to explain the underlying cause of this behavior.