I am facing a CSS issue while utilizing Angular UI-Tab. The problem arises when I have two tabs and need to stop tab switching based on a specific condition.
To achieve this, I implemented prevent default. However, the CSS displays both tabs as active because the click is initiated but halted midway.
Here is my HTML code:
<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>
The deselect() function looks like this:
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"));
}
}
However, upon testing, the output was different from what I desired:
https://i.sstatic.net/2ltQO.png
What I actually want it to be:
https://i.sstatic.net/21JnS.png
If you have any suggestions on how to fix this issue, please share with me. Thank you!