feat: Timeout before calling autocomplete (#8790)

openfoodfacts · Aug 8, 2023 · b2cc3d4 · b2cc3d4
1 parent e38efae
commit b2cc3d4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/.github/labeler.yml b/.github/labeler.yml
@@ -1,5 +1,8 @@
 # For reference, please look at https://github.com/actions/labeler
 
+javascript:
+- '**/*.js'
+
 github_actions:
 - .github/**/*
 
@@ -743,6 +746,7 @@ unit tests:
 multilingual products:
 - cgi/product_jqm_multilingual.pl
 - cgi/product_multilingual.pl
+- html/js/product-multilingual.js
 
 file import:
 - cgi/import_file_process.pl

diff --git a/html/js/product-multilingual.js b/html/js/product-multilingual.js
@@ -544,26 +544,33 @@ function initializeTagifyInput(el) {
     });
 
     let abortController;
+    let debounceTimer;
+    const timeoutWait = 300;
+
     input.on("input", function(event) {
         const value = event.detail.value;
         input.whitelist = null; // reset the whitelist
 
         if (el.dataset.autocomplete && el.dataset.autocomplete !== "") {
-            // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
-            if (abortController) {
-                abortController.abort();
-            }
+            clearTimeout(debounceTimer);
+
+            debounceTimer = setTimeout(function(){
+                // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
+                if (abortController) {
+                    abortController.abort();
+                }
 
-            abortController = new AbortController();
+                abortController = new AbortController();
 
-            fetch(el.dataset.autocomplete + "&string=" + value, {
-                signal: abortController.signal
-            }).
-            then((RES) => RES.json()).
-            then(function(json) {
-                input.whitelist = json.suggestions;
-                input.dropdown.show(value); // render the suggestions dropdown
-            });
+                fetch(el.dataset.autocomplete + "&string=" + value, {
+                    signal: abortController.signal
+                }).
+                then((RES) => RES.json()).
+                then(function(json) {
+                    input.whitelist = json.suggestions;
+                    input.dropdown.show(value); // render the suggestions dropdown
+                });
+            }, timeoutWait);
         }
     });