Lookup: Fix load indicator when minSearchLength specified (T1215813) (#…

…28833)
DevExpress · Jan 24, 2025 · 6eaf3c0 · 6eaf3c0
1 parent dac127a
commit 6eaf3c0
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git 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
@@ -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)');
+    });
 });