From 48ab412b71773e6c3e4c8a77b9acb9041b71a9e9 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 16 Sep 2017 16:46:13 -0300
Subject: [PATCH 1/4] fix(scrollspy): Handle nested navs when nav-link inside
 nav-item

---
 js/src/scrollspy.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 70067c0b35be..6d1f82d7dff6 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -54,6 +54,7 @@ const ScrollSpy = (() => {
     ACTIVE          : '.active',
     NAV_LIST_GROUP  : '.nav, .list-group',
     NAV_LINKS       : '.nav-link',
+    NAV_ITEMS       : '.nav-item',
     LIST_ITEMS      : '.list-group-item',
     DROPDOWN        : '.dropdown',
     DROPDOWN_ITEMS  : '.dropdown-item',
@@ -264,6 +265,8 @@ const ScrollSpy = (() => {
         // Set triggered links parents as active
         // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
         $link.parents(Selector.NAV_LIST_GROUP).prev(`${Selector.NAV_LINKS}, ${Selector.LIST_ITEMS}`).addClass(ClassName.ACTIVE)
+        // Handle special case when .nav-link is inside .nav-item
+        $link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_ITEMS).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE)
       }
 
       $(this._scrollElement).trigger(Event.ACTIVATE, {

From 1c5edefd3449538ff5cb55d44a21909c4cef7cdb Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 16 Sep 2017 16:49:22 -0300
Subject: [PATCH 2/4] [scrolspy] Find only child .nav-link's inside .nav-item

---
 js/src/scrollspy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 6d1f82d7dff6..e8f0d3101b59 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -266,7 +266,7 @@ const ScrollSpy = (() => {
         // With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
         $link.parents(Selector.NAV_LIST_GROUP).prev(`${Selector.NAV_LINKS}, ${Selector.LIST_ITEMS}`).addClass(ClassName.ACTIVE)
         // Handle special case when .nav-link is inside .nav-item
-        $link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_ITEMS).find(Selector.NAV_LINKS).addClass(ClassName.ACTIVE)
+        $link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_ITEMS).children(Selector.NAV_LINKS).addClass(ClassName.ACTIVE)
       }
 
       $(this._scrollElement).trigger(Event.ACTIVATE, {

From 4c8e4266c13f781f05cf181e32d8ee32326cc3a7 Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 16 Sep 2017 19:14:15 -0300
Subject: [PATCH 3/4] [scrollspyt] Add tests for nested navs with nav-link
 inside nav-item

---
 js/tests/unit/scrollspy.js | 41 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js
index 96cf54eef098..23993ae33761 100644
--- a/js/tests/unit/scrollspy.js
+++ b/js/tests/unit/scrollspy.js
@@ -360,6 +360,47 @@ $(function () {
     testActiveElements()
   })
 
+
+  QUnit.test('should add the active class correctly when there are nested elements (nav nav-item markup)', function (assert) {
+    assert.expect(6)
+    var times = 0
+    var done = assert.async()
+    var navbarHtml = '<nav id="navigation" class="navbar">'
+      + '<ul class="nav">'
+      + '<li clas="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a></li>'
+      + '<ul class="nav">'
+      + '<li clas="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
+      + '</ul>'
+      + '</ul>'
+      + '</nav>'
+
+    var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
+      + '<div id="div-1" style="padding: 0; margin: 0">'
+      + '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
+      + '</div>'
+      + '</div>'
+
+    $(navbarHtml).appendTo('#qunit-fixture')
+
+    var $content = $(contentHtml)
+      .appendTo('#qunit-fixture')
+      .bootstrapScrollspy({ offset: 0, target: '#navigation' })
+
+    function testActiveElements() {
+      if (++times > 3) { return done() }
+
+      $content.one('scroll', function () {
+        assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
+        assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
+        testActiveElements()
+      })
+
+      $content.scrollTop($content.scrollTop() + 10)
+    }
+
+    testActiveElements()
+  })
+
   QUnit.test('should add the active class correctly when there are nested elements (list-group markup)', function (assert) {
     assert.expect(6)
     var times = 0

From 3bb5077dfb3863d7d308bdcb9236bbbb5af4291d Mon Sep 17 00:00:00 2001
From: Troy Morehouse <troymore@nbnet.nb.ca>
Date: Sat, 16 Sep 2017 19:22:23 -0300
Subject: [PATCH 4/4] fix troy-o's in test

---
 js/tests/unit/scrollspy.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js
index 23993ae33761..7bdeb4a8d73b 100644
--- a/js/tests/unit/scrollspy.js
+++ b/js/tests/unit/scrollspy.js
@@ -367,9 +367,9 @@ $(function () {
     var done = assert.async()
     var navbarHtml = '<nav id="navigation" class="navbar">'
       + '<ul class="nav">'
-      + '<li clas="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a></li>'
+      + '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a></li>'
       + '<ul class="nav">'
-      + '<li clas="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
+      + '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
       + '</ul>'
       + '</ul>'
       + '</nav>'