From 50d7648017ab4643cfe7ff25942a5e4f3cb6f42f Mon Sep 17 00:00:00 2001
From: Garrick Aden-Buie <garrick@adenbuie.com>
Date: Tue, 28 Feb 2023 09:48:03 -0500
Subject: [PATCH] Fix active nav menu markup (#418)

* Also add `.active` to nav menu list item

* Add active classes in the same block

* Use bootstrap tab plugin to manage active class on page and nav

Co-authored-by: Carson Sievert <cpsievert1@gmail.com>

* Remove `.manageActiveNavbarMenu()`

* Add some of my notes in comments

* Add NEWS item

* remove comment

---------

Co-authored-by: Carson Sievert <cpsievert1@gmail.com>
---
 NEWS.md                                  |  2 +-
 inst/www/flex_dashboard/flexdashboard.js | 25 ++++++++----------------
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/NEWS.md b/NEWS.md
index 75d5511..e54bdc0 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -1,6 +1,6 @@
 # flexdashboard 0.6.1.9000
 
-
+* Fixed #411: Improved support for Bootstrap 5 to ensure correct handling of the active dashboard page. (#418)
 
 # flexdashboard 0.6.1
 
diff --git a/inst/www/flex_dashboard/flexdashboard.js b/inst/www/flex_dashboard/flexdashboard.js
index df8a2e2..cd57e3c 100644
--- a/inst/www/flex_dashboard/flexdashboard.js
+++ b/inst/www/flex_dashboard/flexdashboard.js
@@ -273,8 +273,6 @@ var FlexDashboard = (function () {
 
     // add the tab-pane class to the wrapper
     wrapper.addClass('tab-pane');
-    if (active)
-      wrapper.addClass('active');
 
     // get a reference to the h1, discover its inner contens, then detach it
     var h1 = wrapper.find('h1').first();
@@ -299,6 +297,10 @@ var FlexDashboard = (function () {
       container.append(li);
     }
 
+    // mark active tab and corresponding nav menu item
+    if (active)
+      $(a).tab("show");
+
     // hide it if requested
     if (hidden)
       li.addClass('hidden');
@@ -1225,9 +1227,10 @@ var FlexDashboard = (function () {
 
     // restore tab/page from bookmark
     var hash = window.decodeURIComponent(window.location.hash);
-    if (hash.length > 0)
+    if (hash.length > 0) {
+      // Update the tab without .showPage() so that we don't change page history
       $('ul.nav a[href="' + hash + '"]').tab('show');
-    FlexDashboardUtils.manageActiveNavbarMenu();
+    }
 
     // navigate to a tab when the history changes
     window.addEventListener("popstate", function(e) {
@@ -1236,9 +1239,9 @@ var FlexDashboard = (function () {
       if (activeTab.length) {
         activeTab.tab('show');
       } else {
+        // returning to the base page URL without a hash activates first tab
         $('ul.nav a:first').tab('show');
       }
-      FlexDashboardUtils.manageActiveNavbarMenu();
     });
 
     // add a hash to the URL when the user clicks on a tab/page
@@ -1322,7 +1325,6 @@ window.FlexDashboardUtils = {
     setTimeout(function() {
         window.scrollTo(0, 0);
     }, 10);
-    this.manageActiveNavbarMenu();
   },
   showPage: function(href) {
     $('ul.navbar-nav li a[href="' + href + '"]').tab('show');
@@ -1350,17 +1352,6 @@ window.FlexDashboardUtils = {
       return url.substring(hashLoc);
     else
       return "";
-  },
-  manageActiveNavbarMenu: function () {
-    // remove active from currently active tabs
-    $('.navbar ul.nav .active').removeClass('active');
-    // find the active tab
-    var activeTab = $('.dashboard-page-wrapper.tab-pane.active');
-    if (activeTab.length > 0) {
-      var tabId = activeTab.attr('id');
-      if (tabId)
-        $(".navbar ul.nav a[href='#" + tabId + "']").tab("show");
-    }
   }
 };