Commit d4bb48b8 authored by Natalia Tepluhina's avatar Natalia Tepluhina

Merge branch 'ph/325932/fixUsersSelectDebounce' into 'master'

Fixes debounce for user select dropdown

See merge request gitlab-org/gitlab!57472
parents 179454bc 129992e6
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import fuzzaldrinPlus from 'fuzzaldrin-plus'; import fuzzaldrinPlus from 'fuzzaldrin-plus';
import $ from 'jquery'; import $ from 'jquery';
import { debounce } from 'lodash';
import { isObject } from '~/lib/utils/type_utility'; import { isObject } from '~/lib/utils/type_utility';
const BLUR_KEYCODES = [27, 40]; const BLUR_KEYCODES = [27, 40];
...@@ -11,13 +12,21 @@ const HAS_VALUE_CLASS = 'has-value'; ...@@ -11,13 +12,21 @@ const HAS_VALUE_CLASS = 'has-value';
export class GitLabDropdownFilter { export class GitLabDropdownFilter {
constructor(input, options) { constructor(input, options) {
let ref; let ref;
let timeout;
this.input = input; this.input = input;
this.options = options; this.options = options;
// eslint-disable-next-line no-cond-assign // eslint-disable-next-line no-cond-assign
this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true; this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true;
const $inputContainer = this.input.parent(); const $inputContainer = this.input.parent();
const $clearButton = $inputContainer.find('.js-dropdown-input-clear'); 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) => { $clearButton.on('click', (e) => {
// Clear click // Clear click
e.preventDefault(); e.preventDefault();
...@@ -25,7 +34,6 @@ export class GitLabDropdownFilter { ...@@ -25,7 +34,6 @@ export class GitLabDropdownFilter {
return this.input.val('').trigger('input').focus(); return this.input.val('').trigger('input').focus();
}); });
// Key events // Key events
timeout = '';
this.input this.input
.on('keydown', (e) => { .on('keydown', (e) => {
const keyCode = e.which; const keyCode = e.which;
...@@ -41,16 +49,7 @@ export class GitLabDropdownFilter { ...@@ -41,16 +49,7 @@ export class GitLabDropdownFilter {
} }
// Only filter asynchronously only if option remote is set // Only filter asynchronously only if option remote is set
if (this.options.remote) { if (this.options.remote) {
clearTimeout(timeout); return filterRemoteDebounced();
// 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 this.filter(this.input.val()); return this.filter(this.input.val());
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment