Bootstrap 4 - Dropdowns only work one times with tabs menu

Profile picture for mehmetdemiray
mehmetdemiray

In bootstrap-4, the first time I click a dropdown in a tab menu it works fine, but after that it stops working.

<!-- language: lang-html --> 
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#action" data-toggle="tab">action</a>
      <a class="dropdown-item" href="#action_2" data-toggle="tab">Another action</a>
    </div>
  </li>

</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
  	HOME
  </div>
  <div role="tabpanel" class="tab-pane" id="profile">
  	PROFILE
  </div>
  <div role="tabpanel" class="tab-pane" id="action">
  	ACTION 1
  </div>
  <div role="tabpanel" class="tab-pane" id="action_2">
  	ACTION 2
  </div>
</div>

Here's a Demo in Bootply

The issue appears to be caused by not clearing the .active class from the dropdown item when another tab is opened, therefore leaving it highlighted and preventing the same dropdown item from being clicked again.

According to the workaround in Issue #17371 - navs dropdown tab bug, you can add the following js until the issue is resolved:

<!-- language: lang-js --> 
$('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
    if (e.relatedTarget) {
        $(e.relatedTarget).removeClass('active');
    }
})

Demo in Stack Snippets

<!-- begin snippet: js hide: true --> <!-- language: lang-js --> 
$('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
    if (e.relatedTarget) {
        $(e.relatedTarget).removeClass('active');
    }
})
<!-- language: lang-html --> 
<!-- 4.0.0-alpha.2 Libraries -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" href="#home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#profile" role="tab" data-toggle="tab">Profile</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#action" data-toggle="tab">action</a>
      <a class="dropdown-item" href="#action_2" data-toggle="tab">Another action</a>
    </div>
  </li>

</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">
    HOME
  </div>
  <div role="tabpanel" class="tab-pane" id="profile">
    PROFILE
  </div>
  <div role="tabpanel" class="tab-pane" id="action">
    ACTION 1
  </div>
  <div role="tabpanel" class="tab-pane" id="action_2">
    ACTION 2
  </div>
</div>
<!-- end snippet -->