Dropdown items in nav tabs can get stuck in .active mode
Closed this issue · 10 comments
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
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');
}
})
Thanks for the workaround! 👍
Any updates on this issue? Still not yet fixed? And Joyce Babu's workaround doesnt work for me at all...
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');
}
});
});
@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).
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.
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 :)