Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

.show class leaked on navlink

See original GitHub issue

Bootstrap 4.2.1: on every dynamic tabbed interface, whenever I click on a .tablink the classes .active .show are properly added to the new item but the .show class is not removed from the previously active item. If this is an issue, it seems to be a regression because with bootstrap 4.1.3 all is working as expected.

Here is a MWE using pills; just inspect Home or Profile while switching between the two panes: https://jsfiddle.net/4oy92hmx/

Issue Analytics

State:
Created 5 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

Johann-Scommented, Jan 28, 2019

Yep I think too, maybe @MartijnCuppens wants to fix that ?

0reactions

MartijnCuppenscommented, Feb 2, 2019

Reverting https://github.com/twbs/bootstrap/pull/27533/files#diff-02a6d2619ddbbd65ac148de3377674eeL174 would indeed “fix” this issue, but there’s another issue here: we shouldn’t add the .show class on the .nav-link in any case.

Let’s analyse these lines: https://github.com/twbs/bootstrap/blob/f134d4ba01274bc0fd3379e6c90f61f3a7b91101/js/src/tab.js#L111-L133

The _activate function is triggered on .tab-pane and .nav-link. In L111 the show class will be added to the target .tab-pane and in L130 the class will be added to the .nav-link. Not sure why.

@Johann-S could you help here?

Top Results From Across the Web

Show parent NavLink as active in React Router V6

Is there a way to determine if a route is a true parent of the active route? In my case, Details should not...

Active NavLink Classes with React Router - Ultimate Courses

Our <NavLink> component provides an isActive property that contains a boolean value, which is exposed to us through the className attribute ...

React Router v6 tutorial #6 Active Link - YouTube

This video is made by anil Sidhu in English steps of video What is Active Link and why we need it Active Link...

React Router 6 - NavLink Component - YouTube

React Router 6 - NavLink ComponentProject Based Web Development Courses - https://www.johnsmilga.

[Solved]-Toogle active class on selected link react-Reactjs

e.g import {NavLink} from "react-router-dom" <NavLink to="/about/company-overview" className="mega-menu-links-white-bg" > Company Overview </NavLink> ...