1 files changed, 11 insertions, 12 deletions
diff --git a/app/assets/javascripts/deprecated_jquery_dropdown/gl_dropdown_filter.js b/app/assets/javascripts/deprecated_jquery_dropdown/gl_dropdown_filter.js
index b1d486c5d66..8ca4dc587a8 100644
--- a/app/assets/javascripts/deprecated_jquery_dropdown/gl_dropdown_filter.js
+++ b/app/assets/javascripts/deprecated_jquery_dropdown/gl_dropdown_filter.js
@@ -2,6 +2,7 @@
 
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
 import $ from 'jquery';
+import { debounce } from 'lodash';
 import { isObject } from '~/lib/utils/type_utility';
 
 const BLUR_KEYCODES = [27, 40];
@@ -11,13 +12,21 @@ const HAS_VALUE_CLASS = 'has-value';
 export class GitLabDropdownFilter {
   constructor(input, options) {
     let ref;
-    let timeout;
     this.input = input;
     this.options = options;
     // eslint-disable-next-line no-cond-assign
     this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true;
     const $inputContainer = this.input.parent();
     const $clearButton = $inputContainer.find('.js-dropdown-input-clear');
+    const filterRemoteDebounced = debounce(() => {
+      $inputContainer.parent().addClass('is-loading');
+
+      return this.options.query(this.input.val(), (data) => {
+        $inputContainer.parent().removeClass('is-loading');
+        return this.options.callback(data);
+      });
+    }, 500);
+
     $clearButton.on('click', (e) => {
       // Clear click
       e.preventDefault();
@@ -25,7 +34,6 @@ export class GitLabDropdownFilter {
       return this.input.val('').trigger('input').focus();
     });
     // Key events
-    timeout = '';
     this.input
       .on('keydown', (e) => {
         const keyCode = e.which;
@@ -41,16 +49,7 @@ export class GitLabDropdownFilter {
         }
         // Only filter asynchronously only if option remote is set
         if (this.options.remote) {
-          clearTimeout(timeout);
-          // eslint-disable-next-line no-return-assign
-          return (timeout = setTimeout(() => {
-            $inputContainer.parent().addClass('is-loading');
-
-            return this.options.query(this.input.val(), (data) => {
-              $inputContainer.parent().removeClass('is-loading');
-              return this.options.callback(data);
-            });
-          }, 250));
+          return filterRemoteDebounced();
         }
         return this.filter(this.input.val());
       });