Pills with dropdown in Bootstrap5 works only once

Question

I want to use pills with dropdown and tabs in Bootstrap5. I want to show the related tab when clicking the dropdown item in pills. It works but only once. After clicked an item in dropdown it comes to active, after click the new one, the old one dosen't come to passive. And the result is no item can be clickable.

Here is codeply link

Answer 1

In Bootstrap5 documentation there is a warning about this issue:

Note that dynamic tabbed interfaces should not contain dropdown menus, as this >causes both usability and accessibility issues. From a usability perspective, >the fact that the currently displayed tab's trigger element is not immediately >visible (as it's inside the closed dropdown menu) can cause confusion. From an >accessibility point of view, there is currently no sensible way to map this >sort of construct to a standard WAI ARIA pattern, meaning that it cannot be >easily made understandable to users of assistive technologies.

Inspite that warning I solved it with my own custom js:

document.querySelector('.dropdown-menu').addEventListener('click', function(e){
    for(var i=0; i<this.children.length; i++){
        if(this.children[i].querySelector('a') != e.target){
            this.children[i].querySelector('a').classList.remove('active');
        }
    }
});