Both Angular & bootstrap UI tab become active in prevent default

Question

I have a CSS problem while using Angular UI-Tab. The Issue is that I have a scenario in which I got two tabs. I need to prevent tab switching based on some condition.

For that I had used prevent default. So when I prevent the event CSS shows that both tab is active. Because the click has just begin but stopped on the way.

My HTML us:

<uib-tabset>
    <uib-tab index="1">
    <uib-tab-heading>Search</uib-tab-heading>
        <div class="PL_7 PR_7">
            <div class="clearfix">
                search tab
            </div>
        </div>
    </uib-tab>
    <uib-tab index="2" ng-click="ctrl.activateOrderBinTab()" deselect="ctrl.tabSelected($event)">
    <uib-tab-heading>Order</uib-tab-heading>
        <div class="PL_7 PR_7">
            order tab
        </div>
    </uib-tab>
</uib-tabset>

and the deselect() function is

 function tabSelected($event) {
        var unsavedRows = angular.element('.dx-cell-modified');
        if (unsavedRows.length > 0) {
            $event.preventDefault();
            NotifyToastService.showError(gettext("Please save or cancel changes to the order bin to add items"));
        }
    }

When I tried this what happen is

What I need

Please let me know what should I do to prevent this.

Answer 1

Try to solve given problem using $emit.

Updates in your code :

1. Applied css class to
2. removed deselect="ctrl.tabSelected($event)"

I faced same problem and I resolved it using $emit.

Here is a code :

<uib-tabset class="selectedTab">
    <uib-tab index="1">
    <uib-tab-heading>Search</uib-tab-heading>
        <div class="PL_7 PR_7">
            <div class="clearfix">
                search tab
            </div>
        </div>
    </uib-tab>
    <uib-tab index="2" ng-click="ctrl.activateOrderBinTab()">
    <uib-tab-heading>Order</uib-tab-heading>
        <div class="PL_7 PR_7">
            order tab
        </div>
    </uib-tab>
</uib-tabset>


 function tabSelected($event) {
        var unsavedRows = angular.element('.dx-cell-modified');
        if (unsavedRows.length > 0) {
            $event.preventDefault();
            NotifyToastService.showError(gettext("Please save or cancel changes to the order bin to add items"));
            $rootScope.$emit('selectedTab', 2);
        }
    }

$rootScope.$on('selectedTab', function (event, newTabIndex) {
        $timeout(function () {
            ctrl.selectedTab = newTabIndex;
            //this is needed to set the focus on active tab element
            //to overcome css focus styling
            angular.element(".selectedTab ul > li:nth-child(" + (newTabIndex) + ") a").focus();
        }, 1);
    });