From 6eaf3c0c01b906f75c1cdc5d55d896902a7a47b4 Mon Sep 17 00:00:00 2001
From: Anna Shakhova <68295572+anna-shakhova@users.noreply.github.com>
Date: Fri, 24 Jan 2025 17:02:35 +0100
Subject: [PATCH] Lookup: Fix load indicator when minSearchLength specified
(T1215813) (#28833)
---
.../devextreme/js/__internal/ui/m_lookup.ts | 14 +++++++
.../lookup.tests.js | 39 +++++++++++++++++++
2 files changed, 53 insertions(+)
diff --git a/packages/devextreme/js/__internal/ui/m_lookup.ts b/packages/devextreme/js/__internal/ui/m_lookup.ts
index 66d75c8d67d1..2e47a7d6b017 100644
--- a/packages/devextreme/js/__internal/ui/m_lookup.ts
+++ b/packages/devextreme/js/__internal/ui/m_lookup.ts
@@ -783,6 +783,20 @@ const Lookup = DropDownList.inherit({
}
},
+ _filterDataSource(...args) {
+ if (this._list && !this._list._dataSource && this._isMinSearchLengthExceeded()) {
+ this._list?._scrollView.startLoading();
+ }
+
+ this.callBase(...args);
+ },
+
+ _dataSourceFiltered(...args) {
+ this.callBase(...args);
+
+ this._list?._scrollView.finishLoading();
+ },
+
_updateActiveDescendant() {
this.callBase();
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js
index 1e5d869d0504..aa6203e40d24 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/lookup.tests.js
@@ -3267,6 +3267,45 @@ QUnit.module('dataSource integration', {
assert.ok($loadPanel.is(':visible'), 'load panel is visible');
});
+
+ QUnit.test('load panel should be displayed if search value length exceed minSearchLength and showDataBeforeSearch=false, (T1215813)', function(assert) {
+ const loadDelay = 1000;
+ const timeoutDelay = 100;
+ const instance = this.$element.dxLookup({
+ dataSource: {
+ load: () => {
+ const d = new $.Deferred();
+
+ setTimeout(() => {
+ d.resolve([]);
+ }, loadDelay);
+
+ return d;
+ }
+ },
+ searchEnabled: true,
+ showDataBeforeSearch: false,
+ minSearchLength: 3,
+ searchTimeout: timeoutDelay,
+ useNativeScrolling: false,
+ opened: true
+ }).dxLookup('instance');
+
+ const $content = $(instance.content());
+ const $input = $content.find(`.${LOOKUP_SEARCH_CLASS} .${TEXTEDITOR_INPUT_CLASS}`);
+ const $loadPanel = $content.find(`.${SCROLL_VIEW_LOAD_PANEL_CLASS}`);
+ const keyboard = keyboardMock($input);
+
+ keyboard.type('abc');
+ this.clock.tick(timeoutDelay + loadDelay / 2);
+ assert.ok($loadPanel.is(':visible'), 'load panel is visible');
+ this.clock.tick(loadDelay / 2);
+ assert.ok($loadPanel.is(':hidden'), 'load panel is not visible when loading has been finished');
+
+ keyboard.press('backspace');
+ this.clock.tick(loadDelay / 2);
+ assert.ok($loadPanel.is(':hidden'), 'load panel is not visible if value length less than minSearchLength)');
+ });
});