From 9e99d961bacee216472fbc1dd25113c0b8f43fb6 Mon Sep 17 00:00:00 2001
From: Jose Farias <jose@37signals.com>
Date: Mon, 11 Nov 2024 15:05:54 -0600
Subject: [PATCH] Iron out quirks from navigating back and forth

---
 app/helpers/filters_helper.rb                   |  4 +++-
 .../controllers/filter_form_controller.js       | 17 ++++++++++++++---
 app/views/bubbles/_filters.html.erb             |  2 +-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb
index 80621407e..f2f224dd6 100644
--- a/app/helpers/filters_helper.rb
+++ b/app/helpers/filters_helper.rb
@@ -10,7 +10,9 @@ module FiltersHelper
   end
 
   def filter_button_tag(display:, value:, name:, **options)
-    tag.button id: filter_button_id(value, name), class: [ "btn txt-small btn--remove", options.delete(:class) ], data: { action: "filter-form#removeFilter form#submit" } do
+    tag.button id: filter_button_id(value, name),
+        class: [ "btn txt-small btn--remove", options.delete(:class) ],
+        data: { action: "filter-form#removeFilter form#submit", filter_form_target: "button" } do
       concat hidden_field_tag(name, value, id: nil)
       concat tag.span(display)
       concat image_tag("close.svg", aria: { hidden: true }, size: 24)
diff --git a/app/javascript/controllers/filter_form_controller.js b/app/javascript/controllers/filter_form_controller.js
index b55cc6069..65ac570a1 100644
--- a/app/javascript/controllers/filter_form_controller.js
+++ b/app/javascript/controllers/filter_form_controller.js
@@ -1,16 +1,27 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
+  static targets = [ "button" ]
+
+  connect() {
+    this.buttonTargets.forEach(button => this.#showButton(button))
+  }
+
   removeFilter(event) {
     event.preventDefault()
-    this.#removeButton(event.target.closest("button"))
+    this.#hideButton(event.target.closest("button"))
   }
 
   clearCategory({ params: { name } }) {
-    this.element.querySelectorAll(`input[name="${name}"]`).forEach(input => this.#removeButton(input.closest("button")))
+    this.element.querySelectorAll(`input[name="${name}"]`).forEach(input => this.#hideButton(input.closest("button")))
   }
 
-  #removeButton(button) {
+  #showButton(button) {
+    button.querySelector("input").disabled = false
+    button.hidden = false
+  }
+
+  #hideButton(button) {
     button.querySelector("input").disabled = true
     button.hidden = true
   }
diff --git a/app/views/bubbles/_filters.html.erb b/app/views/bubbles/_filters.html.erb
index ebe553043..f5233e139 100644
--- a/app/views/bubbles/_filters.html.erb
+++ b/app/views/bubbles/_filters.html.erb
@@ -1,4 +1,4 @@
-<div class="flex flex-column gap-half align-center" data-controller="dialog filter-form" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+<div class="flex flex-column gap-half align-center" data-controller="dialog filter-form" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside turbo:before-cache@document->dialog#close">
   <h1 class="txt-large flex align-center gap-half">
     <%= filter.buckets.first&.name || "All projects" %>
   </h1>