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

In BS v4, there's a [`.tab('show')`][1] method, but nothing to close tabs, so you're correct that you'll have to manually update the classes and attributes to toggle a panel off.


Your current event listener will only fire when the event is triggered from an click on an active nav item.  This can help close the current nav item, but won't do anything to respond to clicks from the document in general.

You'll need another listener at the document level.  Then check if you clicked somewhere that wasn't part of the nav, and execute the same code to close the active tab

```js
// listen for clicks to active nav
$(document).on('click', '.nav-link.active', function() {
  hideTab($(this))
});

// listen for clicks everywhere
$(document).on('click', function(e) {
  // if clicked on nav, return
  if ($(e.target).closest(".nav-tabs,.tab-content").length) {return}
  
  // otherwise, off clicks should close nav
  hideTab($('.nav-link.active'))
});

function hideTab($activeNav) {
  // deselect nav item
  $activeNav.removeClass('active').attr('aria-selected', "false")

  // identify tab pane & deselect
  $($activeNav.attr("href")).removeClass('active');
}
```

### Demo in Stack Snippets





    // listen for clicks to active nav
    $(document).on('click', '.nav-link.active', function() {
      hideTab($(this))
    });

    // listen for clicks everywhere
    $(document).on('click', function(e) {
      // if clicked on nav, return
      if ($(e.target).closest(".nav-tabs,.tab-content").length) {return}
      
      // otherwise, off clicks should close nav
      hideTab($('.nav-link.active'))
    });

    function hideTab($activeNav) {
      // deselect nav item
      $activeNav.removeClass('active').attr('aria-selected', "false")

      // identify tab pane & deselect
      $($activeNav.attr("href")).removeClass('active');
    }



    body {
     background-color: #fff1d7 !important;
     padding: 15px;
     height: 100vh;
    }
    .tab-content, 
    .nav-tabs {
      background: white;
    }
    .tab-pane {
      padding: 10px;
    }
    h2 {
      margin-top: 3em !important;
    }



    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>

    
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
      </li>
    </ul>

    
    <div class="tab-content">
      <div class="tab-pane" id="home" role="tabpanel">Home Info</div>
      <div class="tab-pane" id="profile" role="tabpanel">Profile Info</div>
    </div>

    <h2>Click Anywhere to Close </h2>



[1]: https://getbootstrap.com/docs/4.0/components/navs/#via-javascript

Close active nav-tab when nav-link is clicked and when click is done anywhere on the page.

I've tried changing the removeClass from .tab-pane to every possible variation i.e. tabpanel, nav-item, nav-link and just tab with no luck.







    $(document).on('click', '.nav-link.active', function() {
      var href = $(this).attr('href').substring(1);
      //alert(href);
      $(this).removeClass('active');
      $('.tab-pane[id="' + href + '"]').removeClass('active');
    });



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    
    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#home" role="tab">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#settings" role="tab">Settings</a>
      </li>
    </ul>

    
    <div class="tab-content">
      <div class="tab-pane" id="home" role="tabpanel">A</div>
      <div class="tab-pane" id="profile" role="tabpanel">B</div>
      <div class="tab-pane" id="messages" role="tabpanel">C</div>
      <div class="tab-pane" id="settings" role="tabpanel">D</div>
    </div>



The output should close the tab when nav-link is clicked on the open tab.