CODEWITHSUNDEEP
htmlcsstwitter-bootstrapdrop-down-menutabs
Lord Yggdrasill
Lord Yggdrasill

Reputation: 3397

Bootstrap 4: dropdown tab items can only be selected once

Well I am trying to build a tab system with bootstrap 4, and since there are more than 5 tabs(a total of 7), I decide to use a dropdown tab to put the last 3 tabs as dropdown items to the fifth tab(as parent tab). The code looks like below:

  <ul class="nav nav-tabs nav-justified">
    <li id="atab1" class="nav-item"><a href="#tab1" data-toggle="tab" class="nav-link active">Basic Info</a></li>
    <li id="atab2" class="nav-item"><a href="#tab2" data-toggle="tab" class="nav-link">Additional Info</a></li>
    <li id="atab3" class="nav-item"><a href="#tab3" data-toggle="tab"class="nav-link">Contact List</a></li>
    <li id="atab4" class="nav-item"><a href="#tab4" data-toggle="tab" class="nav-link">Posts & Comments</a></li>
    <li id="atab5" class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">More</a>
        <div class="dropdown-menu">
            <a data-toggle="tab" class="dropdown-item" href="#tab5">Goods & Products</a>
            <a data-toggle="tab" class="dropdown-item" href="#tab6">Services & Projects</a>
            <a data-toggle="tab" class="dropdown-item" href="#tab7">Jobs & Offers</a>
        </div>
    </li>
</ul>

However I am encountering a strange issue, it seems that each dropdown item in the tab can only be selected once. This means that if I navigate to another tab, I wont be able to select it again. I investigated the issue further, and it seems that once I select an item from the dropdown list, it stays 'selected' forever until I refresh the page. The below screenshot shows that both goods and services tabs are selected and active, if I select one first and switch to another(while in reality, selecting one tab should cancel the other tab and make it inactive).

http://oi59.tinypic.com/33gx.jpg

So anyone know how to fix this issue? I've been trying my best but still cant find a way.

Upvotes: 2

Views: 1492

Answers (2)

Anarchimedes
Anarchimedes

Reputation: 21

Since Bootstrap 4 beta, James' answer might need some update, like changing relatedTarget to currentTarget or target:

$('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
    if (e.currentTarget) {
        $(e.currentTarget).removeClass('active');
    }
});

Upvotes: 1

James
James

Reputation: 61

This is a known issue with Bootstrap 4. The developer has responded to it on github, here: https://github.com/twbs/bootstrap/issues/17371.

The recommended workaround is to remove the active class from the shown event. I had similar issues, and this fix worked for me.

$('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
    if (e.relatedTarget) {
        $(e.relatedTarget).removeClass('active');
    }
})

Upvotes: 6

Related Questions