Close menu target before turbo cache. Fixes #224

excid3 · Mar 14, 2024 · dbb681a · dbb681a
1 parent 4c204ad
commit dbb681a
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/src/dropdown.js b/src/dropdown.js
@@ -6,13 +6,17 @@ export default class extends Controller {
   static values = { open: Boolean, default: false }
 
   connect() {
+    document.addEventListener("turbo:before-cache", this.beforeCache.bind(this))
+
     if (this.hasButtonTarget) {
       this.buttonTarget.addEventListener("keydown", this._onMenuButtonKeydown)
       this.buttonTarget.setAttribute("aria-haspopup", "true")
     }
   }
 
   disconnect() {
+    document.removeEventListener("turbo:before-cache", this.beforeCache.bind(this))
+
     if (this.hasButtonTarget) {
       this.buttonTarget.removeEventListener("keydown", this._onMenuButtonKeydown)
       this.buttonTarget.removeAttribute("aria-haspopup")
@@ -28,7 +32,11 @@ export default class extends Controller {
   }
 
   show() {
-     this.openValue = true;
+     this.openValue = true
+  }
+
+  close() {
+    this.openValue = false
   }
 
   hide(event) {
@@ -54,4 +62,10 @@ export default class extends Controller {
   get currentItemIndex() {
     return this.menuItemTargets.indexOf(document.activeElement)
   }
+
+  // Ensures the menu is hidden before Turbo caches the page
+  beforeCache() {
+    this.openValue = false
+    this.menuTarget.classList.add("hidden")
+  }
 }