Tab JS and .active class
There are a ton of issues all surrounding the .active
class applied via our tab JS. I'm collecting all of them here to try to de-dupe them and figure out a path forward.
Here's what I have so far (checked indicates closed issue):
-
#18566 (closed), #19374 (closed), #20523 (closed), #20797 (closed): .active
tab state isn't removed on tab switch with<nav>
-based structure (but does work on<ul>
one). #20039 tries to fix this with some new JS, but perhaps not the right direction we want to go (see below). -
#20451 (closed): Scrollspy adds .active
to.nav-link
, but the nav docs have it on.nav-item
. -
#20620 (closed): Tabs JS doesn't work with list groups unless you add .nav-item
to the parent. -
#21021 (closed), #21036: Rename .active
to.show
(previously.open
) for dropdowns.
Seems like this is all stemming from the flexibility I was trying to provide by allowing .active
to be placed on parent items (e.g., <li>
s) or the .nav-link
itself. To resolve this, I think we need to only allow .active
on the .nav-link
(or in the case of list groups, .list-group-item
). With dropdowns, we also need to have a separate class that is added to the parent or menu to properly show that.
My proposal is this:
- Let's allow this to be flexible for any markup by applying the
.active
class only to the item itself, and not the parent. - Nav links, list group items, and dropdown triggers get
.active
on the<a>
or<button>
for their active state. - Dropdown triggers get
.active
to indicate their associated menu is shown, and the.dropdown-menu
gets.shown
to indicate it is visible.
That last part is a deviation from the current behavior, and might require more work. I'd be fine keeping .show
or .shown
on the parent of the dropdown trigger and menu if that'd be easier.
Thoughts @cvrebert, @bardiharborow, @Johann-S?
Potentially related tabs issues and PRs for context:
-
#17371 (closed), #17642, #20039, #20523 (closed): Dropdown items get stuck in .active
state. -
#19849 (closed), #20174, #20795: Tabs are opened even if disabled. -
#21055 (closed), #21056: Rubber band scrolling can remove active nav link.