Slight debounce

PRX · Oct 4, 2023 · bfc449c · bfc449c
1 parent d79b320
commit bfc449c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/app/helpers/search_helper.rb b/app/helpers/search_helper.rb
@@ -20,7 +20,7 @@ def search_button(label, name, value)
   def search_field(label, name)
     opts = {
       class: "form-control",
-      data: {action: "blur->blank-field#blur dynamic-form#change"}
+      data: {action: "blur->blank-field#blur dynamic-form#change", debounce: 20}
     }
 
     if params[name].blank?

diff --git a/app/javascript/controllers/dynamic_form_controller.js b/app/javascript/controllers/dynamic_form_controller.js
@@ -4,14 +4,27 @@ export default class extends Controller {
   static targets = ["link"]
 
   change(event) {
+    const name = event.currentTarget.name
+    const value = event.currentTarget.value
+    const debounce = event.currentTarget.dataset.debounce
+
+    if (debounce) {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => this.updateAndClick(name, value), debounce)
+    } else {
+      this.updateAndClick(name, value)
+    }
+  }
+
+  updateAndClick(name, value) {
     for (const link of this.linkTargets) {
       const oldHref = link.href
 
       const search = new URLSearchParams(link.search)
-      if (event.currentTarget.value) {
-        search.set(event.currentTarget.name, event.currentTarget.value)
+      if (value) {
+        search.set(name, value)
       } else {
-        search.delete(event.currentTarget.name)
+        search.delete(name)
       }
       link.search = search