search: Only show the 'Save' link upon change

The previous behavior of just toggling between 'hidden' classes was just
too naive, we need to check that the value has changed from the initial
one in order to show that to the user.

Signed-off-by: Miquel Sabaté Solà <mikisabate@gmail.com>

2 files changed, 13 insertions, 1 deletions

diff --git a/app/javascript/controllers/search_controller.js b/app/javascript/controllers/search_controller.js
index 63df81d..3a47d67 100644
--- a/app/javascript/controllers/search_controller.js
+++ b/app/javascript/controllers/search_controller.js
@@ -4,8 +4,12 @@ import { Controller } from "@hotwired/stimulus"
 // introduced on an input. Then it fills the `results` elements with them.
 export default class extends Controller {
   static targets = ["body"]
+  static values = {
+    initialBody: String
+  }
 
   connect() {
+    this.initialBody = this.bodyTarget.value.trim();
     document.getElementById("search_body").focus();
   }
 
@@ -17,7 +21,12 @@ export default class extends Controller {
         .then(response => response.text())
         .then(html => {
           document.getElementById("results").innerHTML = html;
-          document.getElementById("save-search").classList.toggle("hidden");
+
+          if (this.initialBody != this.bodyTarget.value) {
+            document.getElementById("save-search").classList.remove('hidden');
+          } else {
+            document.getElementById("save-search").classList.add('hidden');
+          }
         })
     } catch (error) {
       document.getElementById("results").innerHTML = '<div class="notice">Something went wrong!</div>'
diff --git a/test/system/searches_test.rb b/test/system/searches_test.rb
index f1f2de4..e3b4993 100644
--- a/test/system/searches_test.rb
+++ b/test/system/searches_test.rb
@@ -90,6 +90,9 @@ class SearchesTest < ApplicationSystemTestCase
   test 'edit an existing search works' do
     visit edit_search_url(searches(:search1))
 
+    # Fill in the body input and press enter, otherwise the javascript
+    # controller won't fire up.
+    fill_in 'search_body', with: 'Autor'
     find('#search_body').native.send_keys(:return)
 
     # Hit the save button so the hidden form appears.