Calling Tab.show() on multiple tabs results in content of multiple tabs showing at same time rather than last tab .show() was called on
Created by: unicornsoftwareinc
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
Issue: Having multiple tabs and then calling Tab.show() on multiple tabs "around the same time" results in the tab content of those tabs showing at the same time rather than only the last tab .show() was called on. This appears related to using .fade class
Expected behavior: I believe only the content of the last tab that had .show() called on should show. Only 1 tab content should ever be shown at one time.
In my app, the user can choose to display tabs at a specific time. So if they set multiple tabs to show at the same minute/second, it leads to this issue where the multiple tab contents are displaying at once. See attached screenshot:
You can also see the behavior in this codepen here: https://codepen.io/phil917/pen/zYRVxqZ
How to reproduce: Set up tabs in Bootstrap 5 using .nav and .nav-tabs. Add multiple tabs using .nav-item and .nav-link. Add corresponding tab content using .tab-content and .tab-pane and crucially, .fade
Using javascript, instantiate the various tabs and then call .show() all at the same time. You'll probably notice multiple tabs are showing their content at once now.
I believe there is some race condition going on which is causing the issue.
Reduced test cases
Link to codepen: https://codepen.io/phil917/pen/zYRVxqZ
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5