.show class leaked on navlink

[ntd]

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/

[XhmikosR]

/CC @Johann-S

Must be a regression from #27533

[Johann-S]

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

[XhmikosR]

@MartijnCuppens: any progress with this?

[MartijnCuppens]

I forgot about this, I'll have a look at it now and check if we can write a test to prevent this from happening.

[MartijnCuppens]

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:

bootstrap/js/src/tab.js

Lines 111 to 133 in f134d4b

	this._activate(
	this._element,
	listElement
	)
	const complete = () => {
	const hiddenEvent = $.Event(Event.HIDDEN, {
	relatedTarget: this._element
	})
	const shownEvent = $.Event(Event.SHOWN, {
	relatedTarget: previous
	})
	$(previous).trigger(hiddenEvent)
	$(this._element).trigger(shownEvent)
	}
	if (target) {
	this._activate(target, target.parentNode, complete)
	} else {
	complete()
	}

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?