rename atk.debounce to atk.createDebouncedFx and fix wrong usage

js/src/plugins/conditional-form.plugin.js

@@ -55,15 +55,15 @@ export default class AtkConditionalFormPlugin extends AtkPlugin {
         }
         // add change listener to inputs according to selector
         this.$el.find(':checkbox')
-            .on('change', this, atk.debounce(this.onInputChange, 100, true));
+            .on('change', this, atk.createDebouncedFx(this.onInputChange, 100, true));
         this.$el.find(':radio')
-            .on('change', this, atk.debounce(this.onInputChange, 100, true));
+            .on('change', this, atk.createDebouncedFx(this.onInputChange, 100, true));
         this.$el.find('input[type="hidden"]')
-            .on('change', this, atk.debounce(this.onInputChange, 100, true));
+            .on('change', this, atk.createDebouncedFx(this.onInputChange, 100, true));
         this.$el.find('input')
-            .on(this.settings.validateEvent, this, atk.debounce(this.onInputChange, 250));
+            .on(this.settings.validateEvent, this, atk.createDebouncedFx(this.onInputChange, 250));
         this.$el.find('select')
-            .on('change', this, atk.debounce(this.onInputChange, 100));
+            .on('change', this, atk.createDebouncedFx(this.onInputChange, 100));
 
         this.initialize();
     }

js/src/plugins/js-search.plugin.js

@@ -38,7 +38,7 @@ export default class AtkJsSearchPlugin extends AtkPlugin {
      * Query server on each keystroke after proper timeout.
      */
     onAutoQueryAction() {
-        this.textInput.on('keyup', atk.debounce((e) => {
+        this.textInput.on('keyup', atk.createDebouncedFx((e) => {
             const options = $.extend({}, this.urlArgs, this.settings.urlOptions);
             if (e.target.value === '' || e.keyCode === 27) {
                 this.doSearch(this.settings.url, null, options, () => {
@@ -205,6 +205,6 @@ AtkJsSearchPlugin.DEFAULTS = {
     urlQueryKey: null,
     q: null,
     autoQuery: false,
-    timeOut: 300,
+    timeOut: 250,
     useAjax: true,
 };

js/src/services/panel.service.js

@@ -280,7 +280,7 @@ class PanelService {
      */
     addClickAwayEvent(id) {
         // clicking anywhere in main tag will close panel.
-        $('main').on('click.atkPanel', atk.debounce((evt) => {
+        $('main').on('click.atkPanel', atk.createDebouncedFx((evt) => {
             this.closePanel(id);
         }, 250));
     }
@@ -290,7 +290,7 @@ class PanelService {
      */
     addEscAwayEvent(id) {
         // pressing esc key will close panel.
-        $(document).on('keyup.atkPanel', atk.debounce((evt) => {
+        $(document).on('keyup.atkPanel', atk.createDebouncedFx((evt) => {
             if (evt.keyCode === 27) {
                 this.closePanel(id);
             }

js/src/setup-utils.js

@@ -39,13 +39,13 @@ atk.eventBus = (function () {
     };
 }());
 
-atk.debounce = function (func, wait, options) {
+atk.createDebouncedFx = function (func, wait, options) {
     let timerId = null;
-    let debouncedInner;
+    let lodashDebouncedFx;
 
     function createTimer() {
         timerId = setInterval(() => {
-            if (!debouncedInner.pending()) {
+            if (!lodashDebouncedFx.pending()) {
                 clearInterval(timerId);
                 timerId = null;
                 $.active--;
@@ -54,20 +54,20 @@ atk.debounce = function (func, wait, options) {
         $.active++;
     }
 
-    debouncedInner = lodashDebounce(func, wait, options);
+    lodashDebouncedFx = lodashDebounce(func, wait, options);
 
-    function debounced(...args) {
+    function debouncedFx(...args) {
         if (timerId === null) {
             createTimer();
         }
 
-        return debouncedInner(...args);
+        return lodashDebouncedFx(...args);
     }
-    debounced.cancel = debouncedInner.cancel;
-    debounced.flush = debouncedInner.flush;
-    debounced.pending = debouncedInner.pending;
+    debouncedFx.cancel = lodashDebouncedFx.cancel;
+    debouncedFx.flush = lodashDebouncedFx.flush;
+    debouncedFx.pending = lodashDebouncedFx.pending;
 
-    return debounced;
+    return debouncedFx;
 };
 
 /*

js/src/vue-components/item-search.component.js

@@ -55,15 +55,19 @@ export default {
     },
     methods: {
         onKeyup: function () {
-            atk.debounce((e) => {
-                if (this.query !== this.temp) {
-                    if (this.query === '') {
-                        this.query = null;
+            if (!this.onKeyup.debouncedFx) {
+                this.onKeyup.debouncedFx = atk.createDebouncedFx((e) => {
+                    this.onKeyup.debouncedFx = null;
+                    if (this.query !== this.temp) {
+                        if (this.query === '') {
+                            this.query = null;
+                        }
+                        this.sendQuery();
+                        this.temp = this.query;
                     }
-                    this.sendQuery();
-                    this.temp = this.query;
-                }
-            }, this.options.inputTimeOut).call(this);
+                }, this.options.inputTimeOut);
+            }
+            this.onKeyup.debouncedFx.call(this);
         },
         onEscape: function () {
             if (this.query !== null) {

js/src/vue-components/multiline/multiline.component.js

@@ -115,10 +115,14 @@ export default {
             this.clearError(atkmlId, fieldName);
             this.updateInputValue();
 
-            atk.debounce(() => {
-                this.fetchExpression(atkmlId);
-                this.fetchOnChangeAction(fieldName);
-            }, 300).call(this);
+            if (!this.onUpdate.debouncedFx) {
+                this.onUpdate.debouncedFx = atk.createDebouncedFx(() => {
+                    this.onUpdate.debouncedFx = null;
+                    this.fetchExpression(atkmlId);
+                    this.fetchOnChangeAction(fieldName);
+                }, 250);
+            }
+            this.onUpdate.debouncedFx.call(this);
         },
         /**
          * Creates a new row of data and

js/src/vue-components/share/atk-lookup.js

@@ -60,15 +60,20 @@ export default {
             if (inputValue) {
                 this.isLoading = true;
             }
-            this.temp = inputValue;
-            atk.debounce(() => {
-                if (this.query !== this.temp) {
-                    this.query = this.temp;
-                    if (this.query) {
-                        this.fetchItems(this.query);
+
+            if (!this.onFiltered.debouncedFx) {
+                this.onFiltered.debouncedFx = atk.createDebouncedFx(() => {
+                    this.onFiltered.debouncedFx = null;
+                    if (this.query !== this.temp) {
+                        this.query = this.temp;
+                        if (this.query) {
+                            this.fetchItems(this.query);
+                        }
                     }
-                }
-            }, 300).call(this);
+                }, 250);
+            }
+            this.temp = inputValue;
+            this.onFiltered.debouncedFx(this);
         },
         /**
          * Fetch new data from server.
@@ -80,9 +85,9 @@ export default {
                 if (response.success) {
                     this.dropdownProps.options = response.results;
                 }
-                this.isLoading = false;
             } catch (e) {
                 console.error(e);
+            } finally {
                 this.isLoading = false;
             }
         },

public/js/atk-vue-item-search.js

@@ -69,16 +69,22 @@ const template = `<div class="atk-item-search" :class="inputCss">
   },
   methods: {
     onKeyup: function () {
-      atk__WEBPACK_IMPORTED_MODULE_1__["default"].debounce(e => {
-        if (this.query !== this.temp) {
-          if (this.query === '') {
-            this.query = null;
+      if (!this.onKeyup.debouncedFx) {
+        this.onKeyup.debouncedFx = atk__WEBPACK_IMPORTED_MODULE_1__["default"].createDebouncedFx(e => {
+          this.onKeyup.debouncedFx = null;
+
+          if (this.query !== this.temp) {
+            if (this.query === '') {
+              this.query = null;
+            }
+
+            this.sendQuery();
+            this.temp = this.query;
           }
+        }, this.options.inputTimeOut);
+      }
 
-          this.sendQuery();
-          this.temp = this.query;
-        }
-      }, this.options.inputTimeOut).call(this);
+      this.onKeyup.debouncedFx.call(this);
     },
     onEscape: function () {
       if (this.query !== null) {