Bootstrap: nav-tabs class active 2 times

[incubux]

sorry, I found the error, was in bootstrap 4 beta, does not disable and activates the active class in the nav-tabs correctly, then displays the contents of other tabs each one is selected a new one, thanks for your time

[Johann-S]

IMO it's already in our dev dist files, but please submit a live example in a CodePen 👍

[Iworb]

Well, I've met this behaviour too. It works well in jsfiddle/codepen, but not in the project. I double checked about conflicts and found nothing and like topic author my problem is that 'active' class was not removed when tab switched. But if you try to switch tabs about 2-3 times for each one - it "repairs" it behaviour. I coul make a gif if you want to see what happening, but imo it won't help to determine where problem is.

[Johann-S]

We had an issue with nested tabs, that's why I think this issue is already fixed but I have to be sure

[Iworb]

It wasn't nested in my case.

[s4uron]

Here you go @Johann-S :
https://jsfiddle.net/jw6vwv25/13/
But only the first time the "active" class from the first / initial item is not removed.
Regards :)

[Johann-S]

sorry but I don't see your issue in your JSFiddle @s4uron the active class is removed each time
but here I want a live reproduction from @incubux

[browner12]

can confirm, running BS4 Beta 1, and this happens when you have nested tabs.

If you only use one layer of tabs it all works fine.

https://github.com/twbs/bootstrap/pull/23087

[s4uron]

@Johann-S which browser are you using? Tested with FF 55.0.3 and Chrome 60.0.3112.113.

1. Load the page
2. Switch to "Sent Notifications:"
3. Switch back to "Received Notifications:"
4. Voila: Both tables showing
   

[Johann-S]

ok saw it, but will be fixed in our next release see my CodePen which use our last dist file : https://codepen.io/Johann-S/pen/boNOdx

[browner12]

i hate to be "that guy" but do we have a timeline for next release? I hope we don't get to the same point where it takes a bunch of people complaining to finally force the first Beta.

[Johann-S]

Nobody forced us to ship the first beta, we shipped release when we think it's the good time, and they are no timeline for our next release, we are just volonteers which improve Bootstrap on their free-time but we hope to ship a new release soon

[s4uron]

Works with https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js 👍

[browner12]

sorry, 'force' wasn't the right word, but there was definitely some frustration before the first Beta release. I think all people are looking for is a clear line of communication, or even just a road map on the things that need to be completed before the next release.

thanks for all you do!

[Johann-S]

To track our progression until the next release you can use our project board here : https://github.com/twbs/bootstrap/projects/4

[incubux]

Thanks to everyone for answering, I see that several people know what I mean, and so, codepen works well but not in my project, what Iworb says is true, the only way I managed to solve it was with this code
$('a[data-toggle="tab"]').on('hidden.bs.tab', (e) => {
var target = $(e.currentTarget).attr("href") // activated tab
$(target).removeClass('active');
});

[Johann-S]

@incubux can you make a Codepen which reproduce the issue ? Without that we cannot make a fix

[incubux]

it is exactly as Iworb and s4uron explained it

[Johann-S]

So I'll cose that issue because s4uron use case is already fixed 👍