Skip to content
GitLab

fix(scrollspy): Spying on nested navs fails to activate for .nav-link's inside nav-item's

Merged Administrator requested to merge github/fork/tmorehouse/v4-dev into v4-dev

Created by: tmorehouse

When spying on nested navs, if using the markup where .nav-link is inside a .nav-item, the parent previous sibling was not being highlighted. This PR addresses that issue with two additional lines of code (not including tests):

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a></li>
  <ul class="nav nav-pills flex-column">
    <li class="nav-link"><a class="nav-link" href="#item-1">Item 1</a></li>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a></li>
      <li class="nav-item"><a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a></li>
    </ul>
    <li class="nav-item"><a class="nav-link" href="#item-2">Item2</a></li>
    <li class="nav-item"><a class="nav-link" href="#item-3">Item3</a></li>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a></li>
      <li class="nav-item"><a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a></li>
    </ul>
  </ul>
</nav>

I discovered this issue when I was finishing porting over ScrollSpy into Boostrap-Vue (via PR https://github.com/bootstrap-vue/bootstrap-vue/pull/1068), and figured I would create a PR on v4-dev to fix the official version as well.