Destroy modals before leaving

spec/rails_app/app/controllers/posts_controller.rb

@@ -7,6 +7,10 @@ def index
     @posts = Post.all
   end
 
+  def show
+    @post = Post.find(params[:id])
+  end
+
   def new
     @post = Post.new
   end

spec/rails_app/app/views/posts/new.html.slim

@@ -6,3 +6,5 @@ h1 Compose Post
   = f.input :image, as: :image, placeholder: "Image of the post"
   = f.submit "Save"
   = link_to "Cancel", close_modal_path
+
+= link_to "Something completely different", other_posts_path

spec/rails_app/app/views/posts/other.html.slim

@@ -0,0 +1 @@
+h1 Something completely different!

spec/rails_app/config/routes.rb

@@ -6,6 +6,8 @@
     collection do
       get :modal
     end
+
+    get :other, on: :collection
   end
 
   get "styleguide", to: "pages#styleguide"

src/modal.ts

@@ -12,6 +12,7 @@ export class ModalPresenter {
 
   constructor() {
     document.addEventListener("turbo:load", this.prepareBlind);
+    document.addEventListener("turbo:before-cache", this.leave.bind(this));
   }
 
   async open(options: ModalOptions): Promise<void> {
@@ -38,8 +39,16 @@ export class ModalPresenter {
     document.body.classList.toggle("modal-open", open);
   }
 
+  private leave(): void {
+    Object.values(this.modals).map((e) => e.destroy());
+    this.modals = {};
+    this.updateBlindStatus();
+  }
+
   private prepareBlind: () => void = () => {
-    createElement(document.body, "modal-blind");
+    if (!document.querySelector("body > .modal-blind")) {
+      createElement(document.body, "modal-blind");
+    }
   };
 }
 
@@ -82,7 +91,11 @@ export class Modal {
     }
     root.classList.remove("modal--open");
     await wait(1);
-    root.remove();
+    this.destroy();
+  }
+
+  destroy(): void {
+    this.root?.remove();
     this.root = undefined;
   }
 }