debounce blur should only trigger once

... when no other event was received since the last blur Fixes #3689.
phoenixframework · Feb 28, 2025 · b51b835 · b51b835
1 parent 18f8133
commit b51b835
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/assets/js/phoenix_live_view/dom.js b/assets/js/phoenix_live_view/dom.js
@@ -234,10 +234,11 @@ let DOM = {
       case null: return callback()
 
       case "blur":
+        this.incCycle(el, "debounce-blur-cycle", () => {
+          if(asyncFilter()){ callback() }
+        })
         if(this.once(el, "debounce-blur")){
-          el.addEventListener("blur", () => {
-            if(asyncFilter()){ callback() }
-          })
+          el.addEventListener("blur", () => this.triggerCycle(el, "debounce-blur-cycle"))
         }
         return
 

diff --git a/assets/test/debounce_test.js b/assets/test/debounce_test.js
@@ -35,7 +35,7 @@ let container = () => {
 }
 
 describe("debounce", function (){
-  test("triggers on input blur", async () => {
+  test("triggers once on input blur", async () => {
     let calls = 0
     let el = container().querySelector("input[name=blur]")
 
@@ -46,7 +46,7 @@ describe("debounce", function (){
     DOM.dispatchEvent(el, "blur")
     DOM.dispatchEvent(el, "blur")
     DOM.dispatchEvent(el, "blur")
-    expect(calls).toBe(4)
+    expect(calls).toBe(1)
   })
 
   test("triggers debounce on input blur", async () => {
@@ -60,6 +60,8 @@ describe("debounce", function (){
     simulateInput(el, "two")
     simulateInput(el, "three")
     DOM.dispatchEvent(el, "blur")
+    DOM.dispatchEvent(el, "blur")
+    DOM.dispatchEvent(el, "blur")
     expect(calls).toBe(1)
     expect(el.value).toBe("three")
   })