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

Bootstrap 4 - Dropdowns only work one times with tabs menu

When you pass in two parameters to [<code>.<b>attr</b>(<i>attributeName</i>,<i>value</i>)</code>][1], the second param sets the value.  You could write a custom extension, similar to [`toggleClass`][2] to conditionally add or [`.removeAttr()`][3] like this:





    (function($) {
        $.fn.toggleAttr = function(attributeName, state) {
            return this.each(function() {
               if (state) {
                 $(this).attr(attributeName,"")
               } else {
                 $(this).removeAttr(attributeName)
               }
            });
        };
    }(jQuery));

Then use like this:



    $(".class").toggleAttr("boolAt", false);

[1]: http://api.jquery.com/attr/#attr2
[2]: http://api.jquery.com/toggleclass/
[3]: https://api.jquery.com/removeAttr/

I have an event listener that I'm trying to toggle between a class (which is working) and a data-selection attribute of true/false (which is not). I have the data-selection attribute for div class="dice" already set to false by default.

    game.selection = function() {
      $(".dice").on("click", function() {
        $(this).toggle(function () {
          $(this).attr('data-selection', true);
        });
        $(this).toggleClass("active");
      }); 
    };