Bootstrap: Quickly switching tabs using Navs with JavaScript makes the tab content go wrong

[magiclen]

Environment

Operating system: Linux Mint 18.3 Cinnamon
Browser: Chrome 65.0.3325.162 and Firefox 58.0.2
JS Bin: https://jsbin.com/pidaziv

Snapshot

https://imgur.com/a/1MAWb

Steps to Reproduce

1. Click the tab Contact
2. Click the tab Profile and then click the tab Contact again in few milliseconds.

[bakedbird]

Can't reproduce using
os: macOs
browsers tested: Chrome, Firefox, Opera, Safari

[magiclen]

I made a video on YouTube. If you can't reproduce, perhaps you can check out the following link,
https://youtu.be/feXLwYA8D9M

Currently, I'm sure this problem happens on Linux Mint, Windows and Android.

[Johann-S]

Unable to reproduce it too 😟

[bakedbird]

Was able to reproduce on my Android device. It only happened when tapping on another tab before the animation of the previous has finished.

[Johann-S]

ok, so we should handle the transitionning state and disallow to change tabs during this transition

[bakedbird]

@Johann-S Found a way to reproduce it on a browser if that would be of more help to you.

On the jsbin @magiclen provided
Steps to reproduce

• Have the first tab shown (Home)
• hit tab then enter twice, fast

this will have the second and third tabs open simultaneously (Profile, Contact).
Now, if you click on the first or second tab (Home, Profile) the Contact tab remains shown (until you click to show that one too).

[Johann-S]

I think I'm not quick enough to reproduce that but thanks @bakedbird 😆 But I see where is the issue

[bakedbird]

@Johann-S Took me some days to train my speed too 😝

[sbrugman]

Similar problem when switching tabs on changing via a select downdown.
<select class="nav nav-pills form-control" onchange="jQuery('#v-pills-' + jQuery(this).val() + '-tab').click(); return false;">
When the fade animation is not done, clicking a tab (or emulating in this case), causes that the previous tab is not hidden anymore.