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][1], you can add the following js until the issue is resolved:



    $('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
        if (e.relatedTarget) {
            $(e.relatedTarget).removeClass('active');
        }
    })


### Demo in Stack Snippets




    $('.nav-tabs').on('shown.bs.tab', 'a', function (e) {
        if (e.relatedTarget) {
            $(e.relatedTarget).removeClass('active');
        }
    })



    
    <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>

    
    <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>

    
    <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>



[1]: https://github.com/twbs/bootstrap/issues/17371

In bootstrap-4, the first time I click a dropdown in a tab menu it works fine, but after that it stops working.



    
    <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>
    
    
    <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][1]


  [1]: http://www.bootply.com/DrcnERfrer