feat(forms): add a debounce for Input and Textarea fields

fix #2415

umap/static/umap/js/modules/form/fields.js

@@ -132,7 +132,10 @@ Fields.Textarea = class extends BaseElement {
     super.build()
     this.textarea = this.elements.textarea
     this.fetch()
-    this.textarea.addEventListener('input', () => this.sync())
+    this.textarea.addEventListener(
+      'input',
+      Utils.debounce(() => this.sync(), 300)
+    )
     this.textarea.addEventListener('keypress', (event) => this.onKeyPress(event))
   }
 
@@ -179,7 +182,7 @@ Fields.Input = class extends BaseElement {
       this.input.step = this.properties.step
     }
     this.fetch()
-    this.input.addEventListener(this.getSyncEvent(), () => this.sync())
+    this.listenForSync()
     this.input.addEventListener('keydown', (event) => this.onKeyDown(event))
   }
 
@@ -189,8 +192,11 @@ Fields.Input = class extends BaseElement {
     this.input.value = value
   }
 
-  getSyncEvent() {
-    return 'input'
+  listenForSync() {
+    this.input.addEventListener(
+      'input',
+      Utils.debounce(() => this.sync(), 300)
+    )
   }
 
   type() {
@@ -212,8 +218,8 @@ Fields.Input = class extends BaseElement {
 }
 
 Fields.BlurInput = class extends Fields.Input {
-  getSyncEvent() {
-    return 'blur'
+  listenForSync() {
+    this.input.addEventListener('blur', () => this.sync())
   }
 
   getTemplate() {

umap/static/umap/js/modules/utils.js

@@ -471,6 +471,19 @@ export function isWritable(element) {
   return false
 }
 
+// From https://www.joshwcomeau.com/snippets/javascript/debounce/
+export const debounce = (callback, wait) => {
+  let timeoutId = null
+
+  return (...args) => {
+    window.clearTimeout(timeoutId)
+
+    timeoutId = window.setTimeout(() => {
+      callback.apply(null, args)
+    }, wait)
+  }
+}
+
 export const COLORS = [
   'Black',
   'Navy',

umap/tests/integration/test_import.py

@@ -24,6 +24,7 @@ def test_layers_list_is_updated(live_server, tilelayer, page):
     page.get_by_role("button", name="Add a layer").click()
     page.locator('input[name="name"]').click()
     page.locator('input[name="name"]').fill("foobar")
+    page.wait_for_timeout(300)  # Time for the input debounce.
     page.get_by_role("link", name=f"Import data ({modifier}+I)").click()
     # Should still work
     page.locator("[name=layer-id]").select_option(label="Import in a new layer")

umap/tests/integration/test_optimistic_merge.py

@@ -285,6 +285,7 @@ def test_should_display_alert_on_conflict(context, live_server, datalayer, openm
     # Change name on page one and save
     page_one.locator(".leaflet-marker-icon").click(modifiers=["Shift"])
     page_one.locator('input[name="name"]').fill("name from page one")
+    page_one.wait_for_timeout(300)  # Time for the input debounce.
     with page_one.expect_response(re.compile(r".*/datalayer/update/.*")):
         page_one.get_by_role("button", name="Save").click()
 

umap/tests/integration/test_save.py

@@ -24,6 +24,7 @@ def register_request(request):
     page.get_by_role("button", name="Edit", exact=True).click()
     page.locator('input[name="name"]').click()
     page.locator('input[name="name"]').fill("new datalayer name")
+    page.wait_for_timeout(300)  # Time of the Input debounce
     with page.expect_response(re.compile(".*/datalayer/update/.*")):
         page.get_by_role("button", name="Save").click()
     assert len(requests) == 1

umap/tests/integration/test_tableeditor.py

@@ -74,6 +74,7 @@ def test_table_editor(live_server, openmap, datalayer, page):
     page.locator("dialog").get_by_role("button", name="OK").click()
     page.locator("td").nth(2).dblclick()
     page.locator('input[name="newprop"]').fill("newvalue")
+    page.wait_for_timeout(300)  # Time for the input debounce.
     page.keyboard.press("Enter")
     page.locator("thead button[data-property=name]").click()
     page.get_by_role("button", name="Delete this column").click()