Slight debounce on form

PRX · Aug 2, 2023 · e4d1f02 · e4d1f02
1 parent e964aa1
commit e4d1f02
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/app/javascript/controllers/click_controller.js b/app/javascript/controllers/click_controller.js
@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["submit"]
-  static values = { immediate: Boolean }
+  static values = { immediate: Boolean, debounce: Number }
 
   connect() {
     if (this.immediateValue) {
@@ -11,6 +11,15 @@ export default class extends Controller {
   }
 
   submit() {
+    if (this.debounceValue) {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => this.doClick(), this.debounceValue)
+    } else {
+      this.doClick()
+    }
+  }
+
+  doClick() {
     if (this.hasSubmitTarget) {
       this.submitTarget.click()
     } else if (this.element) {

diff --git a/app/views/podcast_planner/_form_calculator.html.erb b/app/views/podcast_planner/_form_calculator.html.erb
@@ -1,4 +1,5 @@
-<%= form_with(url: podcast_planner_path(@podcast), method: :get, data: {controller: "click"}) do |form| %>
+<% data = {controller: "click", click_debounce_value: 200} %>
+<%= form_with(url: podcast_planner_path(@podcast), method: :get, data: data) do |form| %>
 
   <div class="col-12 mb-4">
     <div class="card shadow border-0">