Fix stimulus nav error in browser console

Remove unused javascript from nav. Use more stimulus features for greater good.
rubygems · Feb 8, 2024 · 171ead7 · 171ead7
1 parent 83f6de2
commit 171ead7
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 118 deletions.
diff --git a/app/javascript/controllers/nav_controller.js b/app/javascript/controllers/nav_controller.js
@@ -21,15 +21,16 @@ export default class extends Controller {
     // * tabDirection is for hiding and showing navbar
     //   when you tab in and out
     this.skipSandwichIcon = true;
+  }
 
-    document.addEventListener("click", (e) => {
-      // Must check both dropdowns otherwise you always close
-      // the dropdown because one or the other isn't being clicked
-      if (!this.dropdownTarget.contains(e.target) && !this.headerTarget.contains(e.target)) {
-        this.dropdownTarget.classList.remove('is-expanded');
-        this.collapseMobileNav();
-      }
-    });
+  clickout(e) {
+    if (this.headerTarget.contains(e.target)) { return }
+    // dropdownTarget is only present when logged in
+    if (this.hasDropdownTarget) {
+      if (this.dropdownTarget.contains(e.target)) { return }
+      this.dropdownTarget.classList.remove('is-expanded');
+    }
+    this.collapseMobileNav();
   }
 
   dropdownButtonTargetConnected(el) {
@@ -52,7 +53,7 @@ export default class extends Controller {
 
     el.addEventListener('focusin', () => {
       if (this.skipSandwichIcon) {
-        this.expandeMobileNav();
+        this.expandMobileNav();
         this.headerSearchTarget.focus();
         this.skipSandwichIcon = false;
       } else {

diff --git a/app/javascript/src/handle-click.js b/app/javascript/src/handle-click.js
diff --git a/app/javascript/src/mobile-nav.js b/app/javascript/src/mobile-nav.js
diff --git a/app/javascript/src/popup-nav.js b/app/javascript/src/popup-nav.js
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -24,7 +24,7 @@
     <%= javascript_importmap_tags %>
   </head>
 
-  <body class="<%= 'body--index' if request.path_info == '/' %>" data-controller="nav">
+  <body class="<%= 'body--index' if request.path_info == '/' %>" data-controller="nav" data-action="click@window->nav#clickout">
     <!-- Top banner -->
     <% if content_for?(:banner) %>
       <div class="banner">