Dropdown items in nav tabs can get stuck in .active mode

[rebot]

bug bootstrap alpha v4 - http://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior When you press a button/tab in the dropdown, try another tab and go back, you will see that the button/tab under the dropdown hasn't been deactivated. I was implementing this in a project and came across this bug.

EDIT: It's worse.. You can't even 'reactivate' the tab. So it's stuck on 'active' mode and won't change your content in the tab view

[crehard]

[JoyceBabu]

Until the code is fixed, the issue can be worked around by removing the active class from shown event

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

[JD-Robbs]

Thanks for the workaround! 👍

[HallofFamer]

Any updates on this issue? Still not yet fixed? And Joyce Babu's workaround doesnt work for me at all...

[HallofFamer]

Note JoyceBabu's solution does not work unless you wrap it in $(document).ready(), like this:

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

[JoyceBabu]

@HallofFamer - Depends on where you place the code. It is almost always better to place the script tags at the end of the page, before the closing </html> tag. In that case, you don't need to wrap the code in $(document).ready or $() (unless it is a dynamic element created during dom ready).

[bpierson]

I was able to solve this with a combination of a workaround and changing the selector on line 2554.

Workaround:

$(document).ready(function () {
    $('.nav').on('shown.bs.tab', 'a', function (e) {
        console.log(e.relatedTarget);
        if (e.relatedTarget) {
            $(e.relatedTarget).removeClass('active in');
        }
    });
});

Selector change:

Old 2554: UL: 'ul:not(.dropdown-menu)',
New 2554: UL: 'ul:not(.dropdown-toggle), nav.nav:not(.dropdown-toggle)',

Without the selector change, the code is targeting the .dropdown with the .active class. You can see this in Chrome inspector by watching the .active class show up on the .dropdown element instead of the .dropdown-toggle element.

[julien2404]

Hi,

I've the same issue but only for Multi-level dropdown.

       <li class="dropdown-submenu">
        <a class="test" href="#">APM QR Code Management-test<span class="caret"></span></a>
         <ul class="dropdown-menu">
              <li><a data-toggle="tab"  href="#APM">APM QR Code Management</a></li>
              <li><a data-toggle="tab" href="#IDENTITY">Identity Awareness Queries</a></li>
         </ul>
       </li>

<div class="tab-content"> 
<div id="APM" class="tab-pane fade">
<p> my content 1 </p>
</div>
</div>

<div class="tab-content"> 
<div id="IDENTITY" class="tab-pane fade">
<p> my content 2 </p>
</div>
</div>

In order to make the multi level work, I use JS :

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

Here is the behavior

I do not meet the behavior with one layer dropdown.

Your help will be much appreciated :)

[Hasnatthecoder]

I have same issue i solve it using e.target
$(document).ready(function() {
$('.nav-tabs').on('shown.bs.tab', 'a', function(e) {
console.log(e.target);
if (e.target) {
$(e.target).removeClass('active');
}
});
});

[rameshchokkara]

Help me to Fix This.

SEM1 is Active.

It should also show that Engg2 is also Active.
Please Fix This.