title: The ACTIVE selector in the Tab control is finding active child elements of the tab-pane during activation which breaks the tab navigation
body: <p>I am using bootstrap v-4. I first noticed this when using bootstrap-select version 13 with inside of a tabbed navigation. I narrowed it down to the Tab control finding the active page link in the bootstrap-select "active" and updating it rather than the tab navigation.</p>
  
  <p>Here is a JSFiddle with a small tabbed navigation with pagination(ven it too has a active class in child) in each of the tabs.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/nrda8vjq/7/" rel="noreferrer">https://jsfiddle.net/nrda8vjq/7/</a></p>
  
  <pre><code>&lt;ul class="nav nav-tabs" id="myTab" role="tablist"&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link active" data-toggle="tab" href="#home" role="tab"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;a class="nav-link" data-toggle="tab" href="#profile" role="tab"&gt;Profile&lt;/a&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" data-toggle="tab" href="#messages" role="tab"&gt;Messages&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" data-toggle="tab" href="#settings" role="tab"&gt;Settings&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Tab panes --&gt;
  &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane active" id="home" role="tabpanel"&gt;
          &lt;h3&gt;Home&lt;/h3&gt;
          &lt;nav aria-label="..."&gt;
              &lt;ul class="pagination"&gt;
                  &lt;li class="page-item disabled"&gt;
                      &lt;a class="page-link" href="#" tabindex="-1"&gt;Previous&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="page-item active"&gt;
                      &lt;a class="page-link" href="#"&gt;2 &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="page-item"&gt;
                      &lt;a class="page-link" href="#"&gt;Next&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane" id="profile" role="tabpanel"&gt;
          &lt;h3&gt;Profile&lt;/h3&gt;
          &lt;nav aria-label="..."&gt;
              &lt;ul class="pagination"&gt;
                  &lt;li class="page-item disabled"&gt;
                      &lt;a class="page-link" href="#" tabindex="-1"&gt;Previous&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="page-item active"&gt;
                      &lt;a class="page-link" href="#"&gt;2 &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="page-item"&gt;
                      &lt;a class="page-link" href="#"&gt;Next&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane" id="messages" role="tabpanel"&gt;
          &lt;h3&gt;Messages&lt;/h3&gt;
          &lt;nav aria-label="..."&gt;
              &lt;ul class="pagination"&gt;
                  &lt;li class="page-item disabled"&gt;
                      &lt;a class="page-link" href="#" tabindex="-1"&gt;Previous&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="page-item active"&gt;
                      &lt;a class="page-link" href="#"&gt;2 &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="page-item"&gt;
                      &lt;a class="page-link" href="#"&gt;Next&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane" id="settings" role="tabpanel"&gt;
          &lt;h3&gt;Settings&lt;/h3&gt;
          &lt;nav aria-label="..."&gt;
              &lt;ul class="pagination"&gt;
                  &lt;li class="page-item disabled"&gt;
                      &lt;a class="page-link" href="#" tabindex="-1"&gt;Previous&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="page-item active"&gt;
                      &lt;a class="page-link" href="#"&gt;2 &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="page-item"&gt;&lt;a class="page-link" href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="page-item"&gt;
                      &lt;a class="page-link" href="#"&gt;Next&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Steps:</p>
  
  <ul>
  <li>Loads with Home tab active</li>
  <li>Click Profile which loads fine</li>
  <li>Click Messages, and notice that the Profile tab is not hidden, and it shows Profile and Messages.</li>
  </ul>
  
  <p>may I get any Reason for this behavior as well as Quickfix or workaround solution?</p>
  
  <p>thank you</p>