Bootstrap: Tabs are not working in current build

[kleisauke]

Using the current build (https://github.com/twbs/bootstrap/commit/721d948d949f783d3213f383d1ef97ff909a2249) the tabs seems broken for me. You can see a demo of this issue here:
https://plnkr.co/edit/VBjPURJoPwCeQWuyt3OB?p=preview

I've included the JS (see bootstrap-721d948.min.js) from the master branch.

Clicking the tabs throws a Uncaught TypeError (Cannot read property 'nodeName' of undefined), looks like a regression from #23087 at this line https://github.com/twbs/bootstrap/pull/23087/commits/2eb1e687bd74d147145000b3971821cc890d7652#diff-02a6d2619ddbbd65ac148de3377674eeR154.

[Johann-S]

Our current dist files aren't up to date, so did you built by yourself bootstrap.min.js ?

[kleisauke]

I did build bootstrap.min.js by myself, with npm install followed by a npm run js. I've the same problem with https://github.com/twbs/bootstrap/commit/25bbfcdd7c656395c00876ae8342e56b1c6945a0 (which also includes the fix from #23087).

[kleisauke]

Update:
Looks like when applying the base .nav class on the HTML <ul> tag:

--- index.html  Tue Aug 22 17:29:03 2017
+++ index.html  Tue Aug 22 17:28:39 2017
@@ -18,7 +18,7 @@
       </button>

       <div class="collapse navbar-collapse" id="navbar-header">
-        <ul class="navbar-nav mr-auto" role="tablist">
+        <ul class="nav navbar-nav mr-auto" role="tablist">
           <li class="nav-item">
             <a class="nav-link active" id="over-tab" href="over" data-toggle="tab" data-target="#over" aria-controls="over" role="tab"><span>Over mij</span></a>
           </li>

^{(https://plnkr.co/edit/lhm70q5YxdsHg10kYjjA?p=preview)}

That the error is gone.

To prevent confusion, should this class also be added on the starter-template? Or is it better that the class navbar-nav is added on Tab.js nav selector? Note that everything was working fine with alpha 6 (so without the base .nav class).

[Johann-S]

I don't see the use of our Tabs plugin in the _starter-template_ so I don't think we should change something here.
About the .nav class it's writtin in our docs that every Nav must have a .nav class see : https://getbootstrap.com/docs/4.0/components/navs/

[k-funk]

Just ran into this after upgrading from Bootstrap4 Beta1 -> 2. Not sure why it just popped up now and not before, but these issues that depend on a parent css class to work are extremely difficult to debug. Would be nice if there weren't these arbitrarily-required parent classes whose only purpose is for jquery to point at.

[justrhysism]

Would be nice if there weren't these arbitrarily-required parent classes whose only purpose is for jquery to point at.

Yes as this means we can't just leverage the Tabs JS with any form of custom markup/classes, but must conform to the Bootstrap Way™