Fix several issues around browser back navigation (#825)

bookmarks/frontend/behaviors/bulk-edit.js

@@ -4,8 +4,9 @@ class BulkEdit extends Behavior {
   constructor(element) {
     super(element);
 
-    this.active = false;
+    this.active = element.classList.contains("active");
 
+    this.init = this.init.bind(this);
     this.onToggleActive = this.onToggleActive.bind(this);
     this.onToggleAll = this.onToggleAll.bind(this);
     this.onToggleBookmark = this.onToggleBookmark.bind(this);
@@ -13,7 +14,11 @@ class BulkEdit extends Behavior {
 
     this.init();
     // Reset when bookmarks are refreshed
-    document.addEventListener("refresh-bookmark-list-done", () => this.init());
+    document.addEventListener("refresh-bookmark-list-done", this.init);
+  }
+
+  destroy() {
+    document.removeEventListener("refresh-bookmark-list-done", this.init);
   }
 
   init() {

bookmarks/frontend/behaviors/confirm-button.js

@@ -13,7 +13,10 @@ class ConfirmButtonBehavior extends Behavior {
   }
 
   destroy() {
-    Behavior.interacting = false;
+    this.reset();
+    this.element.setAttribute("type", this.element.dataset.type);
+    this.element.setAttribute("name", this.element.dataset.name);
+    this.element.setAttribute("value", this.element.dataset.value);
   }
 
   onClick(event) {
@@ -70,7 +73,10 @@ class ConfirmButtonBehavior extends Behavior {
   reset() {
     setTimeout(() => {
       Behavior.interacting = false;
-      this.container.remove();
+      if (this.container) {
+        this.container.remove();
+        this.container = null;
+      }
       this.element.classList.remove("d-none");
     });
   }

bookmarks/frontend/behaviors/dropdown.js

@@ -16,6 +16,10 @@ class DropdownBehavior extends Behavior {
     });
   }
 
+  destroy() {
+    this.close();
+  }
+
   open() {
     this.element.classList.add("active");
     document.addEventListener("click", this.onOutsideClick);

bookmarks/frontend/behaviors/global-shortcuts.js

@@ -4,7 +4,12 @@ class GlobalShortcuts extends Behavior {
   constructor(element) {
     super(element);
 
-    document.addEventListener("keydown", this.onKeyDown.bind(this));
+    this.onKeyDown = this.onKeyDown.bind(this);
+    document.addEventListener("keydown", this.onKeyDown);
+  }
+
+  destroy() {
+    document.removeEventListener("keydown", this.onKeyDown);
   }
 
   onKeyDown(event) {

bookmarks/frontend/behaviors/index.js

@@ -16,7 +16,7 @@ const mutationObserver = new MutationObserver((mutations) => {
   });
 });
 
-window.addEventListener("turbo:load", () => {
+document.addEventListener("turbo:load", () => {
   mutationObserver.observe(document.body, {
     childList: true,
     subtree: true,
@@ -25,6 +25,10 @@ window.addEventListener("turbo:load", () => {
   applyBehaviors(document.body);
 });
 
+document.addEventListener("turbo:before-cache", () => {
+  destroyBehaviors(document.body);
+});
+
 export class Behavior {
   constructor(element) {
     this.element = element;

bookmarks/frontend/behaviors/tag-autocomplete.js

@@ -5,23 +5,35 @@ import { ApiClient } from "../api";
 class TagAutocomplete extends Behavior {
   constructor(element) {
     super(element);
-    const wrapper = document.createElement("div");
+    const input = element.querySelector("input");
+    if (!input) {
+      console.warning("TagAutocomplete: input element not found");
+      return;
+    }
+
+    const container = document.createElement("div");
     const apiBaseUrl = document.documentElement.dataset.apiBaseUrl || "";
     const apiClient = new ApiClient(apiBaseUrl);
 
     new TagAutoCompleteComponent({
-      target: wrapper,
+      target: container,
       props: {
-        id: element.id,
-        name: element.name,
-        value: element.value,
-        placeholder: element.getAttribute("placeholder") || "",
+        id: input.id,
+        name: input.name,
+        value: input.value,
+        placeholder: input.getAttribute("placeholder") || "",
         apiClient: apiClient,
-        variant: element.getAttribute("variant"),
+        variant: input.getAttribute("variant"),
       },
     });
 
-    element.replaceWith(wrapper.firstElementChild);
+    this.input = input;
+    this.autocomplete = container.firstElementChild;
+    input.replaceWith(this.autocomplete);
+  }
+
+  destroy() {
+    this.autocomplete.replaceWith(this.input);
   }
 }