debounce is now regarded on input so the request is only send after l…

…ast input and not on each single input
heimrichhannot · Oct 30, 2020 · 243706e · 243706e
1 parent aaa74f7
commit 243706e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@ All notable changes to this project will be documented in this file.
 
 ## [1.6.0] - 2020-10-29
 - added async submit for `TextConcatType` to update list while typing in field
+- added async submit for `TextType` to update list while typing in field
 
 ## [1.5.4] - 2020-10-08
 - fixed reviseOptions placeholder bug

diff --git a/src/Filter/Type/TextConcatType.php b/src/Filter/Type/TextConcatType.php
@@ -124,6 +124,9 @@ public function getDefaultOperator(FilterConfigElementModel $element)
         return DatabaseUtil::OPERATOR_LIKE;
     }
 
+    /**
+     * @return array
+     */
     public function getOptions(FilterConfigElementModel $element, FormBuilderInterface $builder, bool $triggerEvent = true)
     {
         $options = parent::getOptions($element, $builder, $triggerEvent);

diff --git a/src/Resources/npm-package/js/contao-filter-bundle.js b/src/Resources/npm-package/js/contao-filter-bundle.js
@@ -55,6 +55,18 @@ class FilterBundle {
                 FilterBundle.initAsyncFormSubmit(element);
             });
 
+        EventUtil.addDynamicEventListener('click', '.mod_filter form[data-async] button[type="submit"]',
+            function(element, event) {
+                event.preventDefault();
+                FilterBundle.asyncSubmit(element.form, element);
+            });
+
+        FilterBundle.initAsyncSubmitOnInput();
+    }
+
+    static initAsyncSubmitOnInput() {
+        let timeout;
+
         EventUtil.addDynamicEventListener('input',
             '.mod_filter form[data-async] input[data-submit-on-input], .mod_filter form[data-async] [data-submit-on-input] input',
             function(element, event) {
@@ -64,25 +76,21 @@ class FilterBundle {
                     return;
                 }
 
-                setTimeout(function() {
+                clearTimeout(timeout);
+                timeout = setTimeout(function() {
                     element.form.classList.add('keep-form');
                     FilterBundle.initAsyncFormSubmit(element);
                 }, element.dataset.debounce);
-            });
+        });
 
         EventUtil.addDynamicEventListener('focusout',
             '.mod_filter form[data-async] input[data-submit-on-input], .mod_filter form[data-async] [data-submit-on-input] input',
             function(element, event) {
                 element.form.classList.remove('keep-form');
-            });
-
-        EventUtil.addDynamicEventListener('click', '.mod_filter form[data-async] button[type="submit"]',
-            function(element, event) {
-                event.preventDefault();
-                FilterBundle.asyncSubmit(element.form, element);
-            });
+        });
     }
 
+
     static initAsyncFormSubmit(element) {
         let buttonName = element.form.name + '[submit]',
             clickedButton = document.createElement('div');