Bootstrap: [BS4.5] Button toolbar not working with Navs

[marceloverdijk]

Maybe this is not a real bug report but a feature request.

I'm trying to use Bootstrap Navs with JavaScript behaviour but instead of the tabs and pill I would like to have button toolbar.

Now with a simple toolbar this works:

  <div class="nav btn-toolbar" role="tablist">
    <a class="nav-link btn btn-secondary active" role="button" data-toggle="tab" href="#home-tab">Home</a>
    <a class="nav-link btn btn-secondary" role="button" data-toggle="tab" href="#profile-tab">Profile</a>
    <a class="nav-link btn btn-secondary" role="button" data-toggle="tab" href="#contact-tab">Contact</a>
  </div>

  <div class="tab-content">
    <div class="tab-pane fade show active" id="home-tab" role="tabpanel">
      Home...
    </div>
    <div class="tab-pane fade" id="profile-tab" role="tabpanel">
      Profile...
    </div>
    <div class="tab-pane fade" id="contact-tab" role="tabpanel">
      Contact...
    </div>
  </div>

I'm applying the nav and nav-link classes and the tab behaviour kicks in.

Now I wanted to go a but further with a grouped button toolbar like:

  <div class="nav btn-toolbar mb-3" role="tablist">
    <div class="btn-group mr-2" role="group">
      <a class="nav-link btn btn-secondary active" role="button" data-toggle="tab" href="#home-tab">Home</a>
      <a class="nav-link btn btn-secondary" role="button" data-toggle="tab" href="#profile-tab">Profile</a>
    </div>
    <div class="btn-group" role="group">
      <a class="nav-link btn btn-secondary" role="button" data-toggle="tab" href="#contact-tab">Contact</a>
    </div>
  </div>

The first time I navigate to each tab (using the toolbar buttons) works, but as soon as I want to navigate to a tab the second time it doesn't work.

The reason it does show the tab again is that the navlink anchor in the toolbar was still .active. The .active class was never removed as it is only looking for children under the .nav div:

https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tab.js#L137-L140

  _activate(element, container, callback) {
    const activeElements = container && (container.nodeName === 'UL' || container.nodeName === 'OL')
      ? $(container).find(SELECTOR_ACTIVE_UL)
      : $(container).children(SELECTOR_ACTIVE)

    ..

    if (active && isTransitioning) {
      const transitionDuration = Util.getTransitionDurationFromElement(active)

      $(active)
        .removeClass(CLASS_NAME_SHOW)
        .one(Util.TRANSITION_END, complete)
        .emulateTransitionEnd(transitionDuration)
    } else {
      complete()
    }

Now I wonder if it would as simple to change:

$(container).children(SELECTOR_ACTIVE)

to:

$(container).find(SELECTOR_ACTIVE)

I think it would be nice to be able to navigate tabbed tabbed content with other Bootstrap controls like this.

Bug reports must include:

• Operating system and version: macOS 10.15.5
• Browser and version: Chrome 83.0.4103.116
• Test case: https://jsfiddle.net/marceloverdijk/5eznyvua/

[RobustProgram]

Hi @marcelkorpel I had a look and changing $(container).children(SELECTOR_ACTIVE) to $(container).find(SELECTOR_ACTIVE) does indeed fix the bug (adds the feature).

[marcelkorpel]

Thank you, @RobustProgram, but I did nothing: you mentioned the wrong Marcel. :)

[RobustProgram]

I apologise haha. @marceloverdijk, I was meant to mention you.

[zhangchenglin]

This seems to be a reasonable requirement for tabs to support trigger buttons and not sibling elements.