@syncfusion/ej2-dropdowns 25.1.40 → 25.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.1.40
+*  version : 25.1.41
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@25.1.39",
+  "_id": "@syncfusion/ej2-dropdowns@25.1.40",
   "_inBundle": false,
-  "_integrity": "sha512-je9KBRXAhBy6CRCnSDXedx6YR/DL1utntJyJ4Qv0mBMyNKrQJK9bp7Ibi+xqkD51+YHDi1hpICWyyET7lR7NMA==",
+  "_integrity": "sha512-6DDoNXRwihclI1cvrUHH8Gvr/wxNd9q6xbG0MDIKI+YkHlXQmKzFpWMJiryVAUISQ9FxXkZ31GbC4odDlpX8QA==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -34,8 +34,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-25.1.39.tgz",
-  "_shasum": "7319a3b0eb2a2ece822d01db03ceae81efbdee8b",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-25.1.40.tgz",
+  "_shasum": "5279cf8e0bc8d91c654d5be6c294f94c62c51a12",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
@@ -46,10 +46,10 @@
     "@syncfusion/ej2-base": "~25.1.35",
     "@syncfusion/ej2-data": "~25.1.35",
     "@syncfusion/ej2-inputs": "~25.1.40",
-    "@syncfusion/ej2-lists": "~25.1.39",
-    "@syncfusion/ej2-navigations": "~25.1.40",
+    "@syncfusion/ej2-lists": "~25.1.41",
+    "@syncfusion/ej2-navigations": "~25.1.41",
     "@syncfusion/ej2-notifications": "~25.1.35",
-    "@syncfusion/ej2-popups": "~25.1.39"
+    "@syncfusion/ej2-popups": "~25.1.41"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -74,7 +74,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "25.1.40",
+  "version": "25.1.41",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/auto-complete/auto-complete.js

@@ -90,7 +90,7 @@ var AutoComplete = /** @class */ (function (_super) {
             if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                 filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
-            else if ((!this.enableVirtualization) || (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource)))) {
+            else {
                 var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';
                 filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
@@ -106,7 +106,7 @@ var AutoComplete = /** @class */ (function (_super) {
             }
             filterQuery.take(this.suggestionCount);
         }
-        if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+        if (this.enableVirtualization) {
             var queryTakeValue = 0;
             var querySkipValue = 0;
             var takeValue = this.getTakeValue();
@@ -156,14 +156,6 @@ var AutoComplete = /** @class */ (function (_super) {
             }
             filterQuery.requiresCount();
         }
-        else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
-            for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
-                if (filterQuery.queries[queryElements].fn === 'onSkip' || filterQuery.queries[queryElements].fn === 'onTake') {
-                    filterQuery.queries.splice(queryElements, 1);
-                    --queryElements;
-                }
-            }
-        }
         return filterQuery;
     };
     AutoComplete.prototype.searchLists = function (e) {

package/src/combo-box/combo-box.js

@@ -151,7 +151,7 @@ var ComboBox = /** @class */ (function (_super) {
             if (this.enableVirtualization && this.value) {
                 var fields = (this.fields.value) ? this.fields.value : '';
                 var currentValue_1 = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
-                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                if (this.dataSource instanceof DataManager) {
                     var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue_1)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];

package/src/common/interface.d.ts

@@ -47,6 +47,8 @@ export interface IDropdownlist extends Component<HTMLElement> {
     allowFiltering: boolean;
     isPopupOpen: boolean;
     isTyped: boolean;
+    setCurrentView: boolean;
+    isRequesting: boolean;
     itemCount: number;
     fields: FieldSettingsModel;
     generatedDataObject: GeneratedData;

package/src/common/virtual-scroll.js

@@ -198,9 +198,10 @@ var VirtualScroll = /** @class */ (function () {
                         var query = this.parent.getForQuery(this.parent.value).clone();
                         query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
                         this.parent.appendUncheckList = true;
+                        this.parent.setCurrentView = false;
                         this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                         isListUpdated = false;
-                        this.parent.appendUncheckList = false;
+                        this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;
                         isListUpdated = false;
                     }
                     else {
@@ -223,9 +224,10 @@ var VirtualScroll = /** @class */ (function () {
                     var query = this.parent.getForQuery(this.parent.value).clone();
                     query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
                     this.parent.appendUncheckList = true;
+                    this.parent.setCurrentView = false;
                     this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                     isListUpdated = false;
-                    this.parent.appendUncheckList = false;
+                    this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;
                 }
             }
             else {
@@ -236,6 +238,7 @@ var VirtualScroll = /** @class */ (function () {
                 var query = this.parent.getForQuery(this.parent.value).clone();
                 var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0 ? this.parent.viewPortInfo.startIndex - this.parent.value.length : 0;
                 query = query.skip(skipvalue);
+                this.parent.setCurrentView = false;
                 this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                 isListUpdated = false;
             }
@@ -257,6 +260,7 @@ var VirtualScroll = /** @class */ (function () {
                             else {
                                 query = query.skip(this.parent.viewPortInfo.startIndex);
                             }
+                            this.parent.setCurrentView = false;
                             this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                             isResetListCalled = true;
                             break;
@@ -278,6 +282,7 @@ var VirtualScroll = /** @class */ (function () {
                                 else {
                                     query = query.skip(this.parent.viewPortInfo.startIndex);
                                 }
+                                this.parent.setCurrentView = false;
                                 this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                                 isResetListCalled = true;
                             }
@@ -289,6 +294,7 @@ var VirtualScroll = /** @class */ (function () {
                         currentData.push(alreadyAddedData[0]);
                     }
                 }
+                this.parent.setCurrentView = false;
             }
         }
         if (!isResetListCalled && isListUpdated) {
@@ -356,6 +362,7 @@ var VirtualScroll = /** @class */ (function () {
         if (isStartIndexInitialised && !((this.parent.totalItemCount == queryStartIndex) && (this.parent.totalItemCount == queryEndIndex))) {
             this.parent.virtualItemStartIndex = queryStartIndex;
             this.parent.virtualItemEndIndex = queryEndIndex;
+            this.parent.setCurrentView = true;
             this.generateAndExecuteQueryAsync(query, queryStartIndex, queryEndIndex);
             if (this.component === 'multiselect' && this.parent.hideSelectedItem && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0) {
                 this.parent.totalItemsCount();
@@ -365,7 +372,9 @@ var VirtualScroll = /** @class */ (function () {
                 this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;
             }
         }
-        this.setCurrentViewDataAsync();
+        if (!(this.parent.dataSource instanceof DataManager) || (this.parent.dataSource instanceof DataManager && !this.parent.isRequesting)) {
+            this.setCurrentViewDataAsync();
+        }
     };
     VirtualScroll.prototype.dataProcessAsync = function (isOpenPopup) {
         this.parent.selectedValueInfo = null;
@@ -398,7 +407,7 @@ var VirtualScroll = /** @class */ (function () {
                         return [4 /*yield*/, this.dataProcessAsync()];
                     case 1:
                         _a.sent();
-                        if (this.parent.keyboardEvent != null) {
+                        if (this.parent.keyboardEvent != null && (!(this.parent.dataSource instanceof DataManager) || (this.parent.dataSource instanceof DataManager && !this.parent.isRequesting))) {
                             this.parent.handleVirtualKeyboardActions(this.parent.keyboardEvent, this.parent.pageCount);
                         }
                         if (!this.parent.customFilterQuery) {

package/src/drop-down-base/drop-down-base.d.ts

@@ -233,6 +233,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     private isCheckBoxSelection;
     protected totalItemCount: number;
     protected dataCount: number;
+    protected remoteDataCount: number;
     protected isRemoteDataUpdated: boolean;
     protected virtualGroupDataSource: {
         [key: string]: Object;
@@ -277,6 +278,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected appendUncheckList: boolean;
     protected getInitialData: boolean;
     protected preventPopupOpen: boolean;
+    protected setCurrentView: boolean;
     protected customFilterQuery: Query;
     protected virtualSelectAllData: {
         [key: string]: Object;
@@ -563,6 +565,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @returns {void}
      */
     private setListData;
+    protected handleVirtualKeyboardActions(e: KeyboardEventArgs, pageCount: number): void;
     protected updatePopupState(): void;
     protected updateRemoteData(): void;
     private bindChildItems;

package/src/drop-down-base/drop-down-base.js

@@ -100,9 +100,10 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.isCheckBoxSelection = false;
         _this.totalItemCount = 0;
         _this.dataCount = 0;
+        _this.remoteDataCount = -1;
         _this.isRemoteDataUpdated = false;
         _this.isIncrementalRequest = false;
-        _this.itemCount = 10;
+        _this.itemCount = 30;
         _this.virtualListHeight = 0;
         _this.isVirtualScrolling = false;
         _this.isPreventScrollAction = false;
@@ -129,7 +130,6 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.appendUncheckList = false;
         _this.getInitialData = false;
         _this.preventPopupOpen = true;
-        _this.customFilterQuery = new Query();
         _this.virtualListInfo = {
             currentPageNumber: null,
             direction: null,
@@ -405,10 +405,9 @@ var DropDownBase = /** @class */ (function (_super) {
         this.virtualListInfo = this.viewPortInfo;
     };
     DropDownBase.prototype.getFilteringSkeletonCount = function () {
-        var difference = this.dataCount - this.viewPortInfo.endIndex;
         var currentSkeletonCount = this.skeletonCount;
         this.getSkeletonCount(true);
-        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
+        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : 0;
         var skeletonUpdated = true;
         if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && (this.totalItemCount < (this.itemCount * 2))) {
             this.skeletonCount = 0;
@@ -442,10 +441,10 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.getSkeletonCount = function (retainSkeleton) {
         this.virtualListHeight = this.listContainerHeight != null ? parseInt(this.listContainerHeight, 10) : this.virtualListHeight;
         var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
-        this.skeletonCount = actualCount * 2 < this.itemCount ? this.itemCount : actualCount * 2;
+        this.skeletonCount = actualCount * 4 < this.itemCount ? this.itemCount : actualCount * 4;
         this.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;
         this.virtualItemCount = this.itemCount;
-        this.skeletonCount = Math.floor(this.skeletonCount / 2) + 2;
+        this.skeletonCount = Math.floor(this.skeletonCount / 2);
     };
     DropDownBase.prototype.GetVirtualTrackHeight = function () {
         var height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
@@ -670,41 +669,53 @@ var DropDownBase = /** @class */ (function (_super) {
                 if (!eventArgs.cancel) {
                     _this.isRequesting = true;
                     _this.showSpinner();
-                    if (dataSource instanceof DataManager && !_this.virtualGroupDataSource) {
+                    if (dataSource instanceof DataManager) {
                         _this.isRequested = true;
+                        var isWhereExist_1 = false;
                         if (_this.isDataFetched) {
                             _this.emptyDataRequest(fields);
                             return;
                         }
                         eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {
                             _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
-                            _this.trigger('actionComplete', e, function (e) {
-                                if (!_this.virtualGroupDataSource && _this.isVirtualizationEnabled) {
-                                    _this.isRemoteDataUpdated = true;
-                                    if ((_this.getModuleName() === 'combobox' && !_this.initialRemoteRender && _this.isAllowFiltering && _this.isVirtualizationEnabled && e.result)) {
-                                        e.result = e.result.result;
+                            var isReOrder = true;
+                            if (!_this.virtualSelectAll) {
+                                var newQuery = _this.getQuery(eventArgs.query);
+                                for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                    if (newQuery.queries[queryElements].fn === 'onWhere') {
+                                        isWhereExist_1 = true;
                                     }
-                                    if (e.result.length > 0) {
-                                        var dataSource_2 = e.result;
-                                        if (_this.isVirtualizationEnabled && _this.fields.groupBy) {
-                                            var data = new DataManager(dataSource_2).executeLocal(new Query().group(_this.fields.groupBy));
-                                            _this.virtualGroupDataSource = data.records;
+                                }
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                if (_this.isVirtualizationEnabled && (e.count != 0 && e.count < (_this.itemCount * 2))) {
+                                    if (newQuery) {
+                                        for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                            if (newQuery.queries[queryElements].fn === 'onTake') {
+                                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                                newQuery.queries[queryElements].e.nos = e.count;
+                                            }
+                                            if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition == 'or' || newQuery.queries[queryElements].e.operator == 'equal')) {
+                                                isReOrder = false;
+                                            }
                                         }
-                                        else {
-                                            _this.virtualGroupDataSource = dataSource_2;
-                                            _this.hideSpinner();
-                                            _this.isRequested = false;
-                                            _this.isRequesting = false;
-                                            _this.setListData(dataSource_2, fields, query, event);
-                                            return;
+                                    }
+                                }
+                                else {
+                                    _this.isVirtualTrackHeight = false;
+                                    if (newQuery) {
+                                        for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                            if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition == 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator == 'equal'))) {
+                                                isReOrder = false;
+                                            }
                                         }
                                     }
-                                    _this.hideSpinner();
-                                    _this.isRequested = false;
-                                    _this.isRequesting = false;
-                                    _this.updatePopupState();
-                                    return;
                                 }
+                            }
+                            if (isReOrder) {
+                                // eslint-disable @typescript-eslint/no-explicit-any
+                                _this.dataCount = _this.totalItemCount = e.count;
+                            }
+                            _this.trigger('actionComplete', e, function (e) {
                                 if (!e.cancel) {
                                     _this.isRequesting = false;
                                     var listItems = e.result;
@@ -712,12 +723,16 @@ var DropDownBase = /** @class */ (function (_super) {
                                         ulElement = _this.renderItems(listItems, fields);
                                         return;
                                     }
-                                    if (listItems.length === 0) {
+                                    if ((!_this.isVirtualizationEnabled && listItems.length === 0) || (_this.isVirtualizationEnabled && listItems.length === 0 && !isWhereExist_1)) {
                                         _this.isDataFetched = true;
                                     }
+                                    if (!isWhereExist_1) {
+                                        _this.remoteDataCount = e.count;
+                                    }
                                     _this.dataCount = e.count;
                                     _this.totalItemCount = e.count;
                                     ulElement = _this.renderItems(listItems, fields);
+                                    _this.appendUncheckList = false;
                                     _this.onActionComplete(ulElement, listItems, e);
                                     if (_this.groupTemplate) {
                                         _this.renderGroupTemplate(ulElement);
@@ -730,6 +745,17 @@ var DropDownBase = /** @class */ (function (_super) {
                                         _this.preventPopupOpen = false;
                                         return;
                                     }
+                                    if (_this.isVirtualizationEnabled && _this.setCurrentView) {
+                                        _this.notify("setCurrentViewDataAsync", {
+                                            module: "VirtualScroll",
+                                        });
+                                    }
+                                    if (_this.keyboardEvent != null) {
+                                        _this.handleVirtualKeyboardActions(_this.keyboardEvent, _this.pageCount);
+                                    }
+                                    if (_this.isVirtualizationEnabled) {
+                                        _this.getFilteringSkeletonCount();
+                                    }
                                 }
                             });
                         }).catch(function (e) {
@@ -766,7 +792,7 @@ var DropDownBase = /** @class */ (function (_super) {
                                     }
                                     if (isReOrder) {
                                         listItems = (newQuery).executeLocal(dataManager);
-                                        _this.isVirtualTrackHeight = true;
+                                        _this.isVirtualTrackHeight = (!(_this.dataSource instanceof DataManager) && !_this.isCustomDataUpdated) ? true : false;
                                     }
                                 }
                             }
@@ -781,7 +807,7 @@ var DropDownBase = /** @class */ (function (_super) {
                                 }
                             }
                         }
-                        if (isReOrder) {
+                        if (isReOrder && (!(_this.dataSource instanceof DataManager) && !_this.isCustomDataUpdated)) {
                             // eslint-disable @typescript-eslint/no-explicit-any
                             _this.dataCount = _this.totalItemCount = _this.virtualSelectAll ? listItems.length : listItems.count;
                         }
@@ -818,6 +844,9 @@ var DropDownBase = /** @class */ (function (_super) {
             });
         }
     };
+    DropDownBase.prototype.handleVirtualKeyboardActions = function (e, pageCount) {
+        // Used this method in component side.
+    };
     DropDownBase.prototype.updatePopupState = function () {
         // Used this method in component side.
     };
@@ -929,6 +958,9 @@ var DropDownBase = /** @class */ (function (_super) {
                         addClass([ulElement.children[i]], HIDE_GROUPLIST);
                     }
                 }
+                if (ulElement.children[0].classList.contains('e-hide-group-header')) {
+                    setStyleAttribute(ulElement.children[1], { zIndex: 11 });
+                }
             }
         }
         if (!isNullOrUndefined(this.list)) {
@@ -1077,19 +1109,11 @@ var DropDownBase = /** @class */ (function (_super) {
         for (var i = topIndex; i > -1; i--) {
             var index = this.isVirtualizationEnabled ? i + virtualListCount : i;
             if (this.isVirtualizationEnabled) {
-                var groupListLength = this.list.querySelectorAll('.e-list-group-item').length;
-                var loadedGroupList = 0;
                 if (isCount) {
                     count++;
                 }
                 if (this.fixedHeaderElement && this.updateGroupHeader(index, liCollections, target)) {
-                    loadedGroupList++;
-                    if (count >= this.getPageCount()) {
-                        break;
-                    }
-                    if (groupListLength <= loadedGroupList) {
-                        break;
-                    }
+                    break;
                 }
                 if (isDownkey) {
                     if ((!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.selected) && this.getModuleName() !== 'autocomplete') || (!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.focus) && this.getModuleName() === 'autocomplete')) {

package/src/drop-down-list/drop-down-list.d.ts

@@ -436,7 +436,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private updateHomeEndAction;
     protected selectCurrentValueOnTab(e: KeyboardEventArgs): void;
     protected mobileKeyActionHandler(e: KeyboardEventArgs): void;
-    private handleVirtualKeyboardActions;
+    protected handleVirtualKeyboardActions(e: KeyboardEventArgs, pageCount: number): void;
     protected selectCurrentItem(e: KeyboardEventArgs): void;
     protected isSelectFocusItem(element: Element): boolean;
     private pageUpSelection;

package/src/drop-down-list/drop-down-list.js

@@ -898,8 +898,11 @@ var DropDownList = /** @class */ (function (_super) {
         var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
         if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
             this.setSelection(focusEle, e);
-            if (this.enableVirtualization && !this.fields.groupBy && this.getModuleName() !== 'combobox') {
+            if (this.enableVirtualization) {
                 var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+                if (this.fields.groupBy) {
+                    selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex == 0 ? this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;
+                }
                 this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
             }
         }
@@ -936,7 +939,13 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
             if (!isNullOrUndefined(nextItem)) {
+                var focusAtFirstElement = this.liCollections[this.skeletonCount] && this.liCollections[this.skeletonCount].classList.contains('e-item-focus');
                 this.setSelection(nextItem, e);
+                if (focusAtFirstElement && this.enableVirtualization && this.getModuleName() === 'autocomplete' && !isVirtualKeyAction) {
+                    var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+                    selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex == 0 && this.fields.groupBy ? this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;
+                    this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
+                }
             }
             else if (this.enableVirtualization && !this.isPopupOpen && this.getModuleName() !== 'autocomplete' && ((this.viewPortInfo.endIndex !== this.totalItemCount && e.action === 'down') || (this.viewPortInfo.startIndex !== 0 && e.action === 'up'))) {
                 if (e.action === 'down') {
@@ -1063,14 +1072,13 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 break;
             case 'pageUp':
-                var count = (pageCount * 2) - 4;
-                this.activeIndex = Math.round(count);
+                this.activeIndex = this.getModuleName() === 'autocomplete' ? this.getIndexByValue(this.selectedLI.getAttribute('data-value')) + this.getPageCount() - 1 : this.getIndexByValue(this.previousValue);
                 this.pageUpSelection(this.activeIndex - this.getPageCount(), e, true);
                 e.preventDefault();
                 break;
             case 'pageDown':
-                this.activeIndex = 1;
-                this.pageDownSelection(this.activeIndex + this.getPageCount(), e, true);
+                this.activeIndex = this.getModuleName() === 'autocomplete' ? this.getIndexByValue(this.selectedLI.getAttribute('data-value')) - this.getPageCount() : this.getIndexByValue(this.previousValue);
+                this.pageDownSelection(!isNullOrUndefined(this.activeIndex) ? (this.activeIndex + this.getPageCount()) : (2 * this.getPageCount()), e, true);
                 e.preventDefault();
                 break;
             case 'home':
@@ -1107,8 +1115,8 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.pageUpSelection = function (steps, event, isVirtualKeyAction) {
         var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
-        if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
-            previousItem = steps >= 0 ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];
+        if ((this.enableVirtualization && this.activeIndex == null)) {
+            previousItem = (this.liCollections.length >= steps && steps >= 0) ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];
         }
         if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {
             previousItem = this.liCollections[this.skeletonCount];
@@ -1140,7 +1148,7 @@ var DropDownList = /** @class */ (function (_super) {
             steps = this.getModuleName() === 'dropdownlist' && this.allowFiltering ? steps + 1 : steps;
             previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
         }
-        if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
+        if ((this.enableVirtualization && this.activeIndex == null)) {
             previousItem = steps <= list.length ? this.liCollections[steps + this.skeletonCount - 1] : this.liCollections[list.length - 1];
         }
         this.PageUpDownSelection(previousItem, event);
@@ -1326,6 +1334,11 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
         else {
+            if (this.enableVirtualization && this.activeIndex == null && this.dataSource instanceof DataManager) {
+                this.UpdateSkeleton();
+                this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.ulElement = this.list.querySelector('ul');
+            }
             this.activeIndex = this.getIndexByValue(value);
         }
     };
@@ -1385,7 +1398,7 @@ var DropDownList = /** @class */ (function (_super) {
             if (this.enableVirtualization && this.value) {
                 var fields = (this.fields.value) ? this.fields.value : '';
                 var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
-                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                if (this.dataSource instanceof DataManager) {
                     var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
@@ -1730,7 +1743,7 @@ var DropDownList = /** @class */ (function (_super) {
             if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                 filterQuery.where('', filterType, this.typedString, this.ignoreCase, this.ignoreAccent);
             }
-            else if (((this.getModuleName() !== 'combobox') || this.enableVirtualization) || (this.isFiltering() && this.getModuleName() === 'combobox' && this.typedString !== '')) {
+            else if (((this.getModuleName() !== 'combobox')) || (this.isFiltering() && this.getModuleName() === 'combobox' && this.typedString !== '')) {
                 var fields = (this.fields.text) ? this.fields.text : '';
                 filterQuery.where(fields, filterType, this.typedString, this.ignoreCase, this.ignoreAccent);
             }
@@ -1738,7 +1751,7 @@ var DropDownList = /** @class */ (function (_super) {
         else {
             filterQuery = (this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery)) ? this.customFilterQuery.clone() : query ? query.clone() : this.query ? this.query.clone() : new Query();
         }
-        if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+        if (this.enableVirtualization && this.viewPortInfo.endIndex != 0) {
             var takeValue = this.getTakeValue();
             var alreadySkipAdded = false;
             if (filterQuery) {
@@ -1805,14 +1818,6 @@ var DropDownList = /** @class */ (function (_super) {
             }
             filterQuery.requiresCount();
         }
-        else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
-            for (var queryElements_4 = 0; queryElements_4 < filterQuery.queries.length; queryElements_4++) {
-                if (filterQuery.queries[queryElements_4].fn === 'onSkip' || filterQuery.queries[queryElements_4].fn === 'onTake') {
-                    filterQuery.queries.splice(queryElements_4, 1);
-                    --queryElements_4;
-                }
-            }
-        }
         return filterQuery;
     };
     DropDownList.prototype.getSelectionPoints = function () {
@@ -1839,7 +1844,7 @@ var DropDownList = /** @class */ (function (_super) {
                         return;
                     }
                     _this.isCustomFilter = true;
-                    _this.customFilterQuery = query;
+                    _this.customFilterQuery = query.clone();
                     _this.filteringAction(dataSource, query, fields);
                 },
                 baseEventArgs: e,
@@ -2145,6 +2150,9 @@ var DropDownList = /** @class */ (function (_super) {
                     this.addNewItem(list, selectedItem);
                 }
                 if (!isNullOrUndefined(this.itemData) || (isNullOrUndefined(this.itemData) && this.enableVirtualization)) {
+                    this.getSkeletonCount();
+                    this.skeletonCount = this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2) ? 0 : this.skeletonCount;
+                    this.UpdateSkeleton();
                     this.focusIndexItem();
                 }
                 if (this.enableVirtualization) {
@@ -2247,7 +2255,7 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.focusIndexItem = function () {
         var value = this.getItemData().value;
-        this.activeIndex = this.getIndexByValue(value);
+        this.activeIndex = ((this.enableVirtualization && !isNullOrUndefined(value)) || !this.enableVirtualization) ? this.getIndexByValue(value) : this.activeIndex;
         var element = this.findListElement(this.list, 'li', 'data-value', value);
         this.selectedLI = element;
         this.activeItem(element);
@@ -2668,7 +2676,7 @@ var DropDownList = /** @class */ (function (_super) {
                         }
                         else {
                             if (this.enableVirtualization) {
-                                liCount = keyAction == "pageDown" ? this.getPageCount() : liCount;
+                                liCount = keyAction == "pageDown" ? this.getPageCount() + 1 : liCount;
                             }
                             this.list.scrollTop += this.selectedLI.offsetHeight * liCount;
                         }
@@ -2687,7 +2695,6 @@ var DropDownList = /** @class */ (function (_super) {
                             this.isPreventKeyAction = false;
                             this.isKeyBoardAction = false;
                             this.isPreventScrollAction = false;
-                            nextOffset = nextOffset + (this.selectedLI.offsetHeight * liCount);
                         }
                         this.list.scrollTop = nextOffset;
                     }
@@ -2745,7 +2752,6 @@ var DropDownList = /** @class */ (function (_super) {
                         this.isPreventKeyAction = false;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
-                        nextOffset = nextOffset - (this.selectedLI.offsetHeight * liCount);
                     }
                     this.list.scrollTop = this.list.scrollTop + nextOffset;
                 }
@@ -2940,7 +2946,7 @@ var DropDownList = /** @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: 0,
+            endIndex: this.itemCount,
         };
         if (this.getModuleName() === 'combobox') {
             this.typedString = "";
@@ -2948,8 +2954,12 @@ var DropDownList = /** @class */ (function (_super) {
         this.previousStartIndex = 0;
         this.previousEndIndex = 0;
         if (this.dataSource instanceof DataManager) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.totalItemCount = this.dataCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+            if (this.remoteDataCount >= 0) {
+                this.totalItemCount = this.dataCount = this.remoteDataCount;
+            }
+            else {
+                this.resetList(this.dataSource);
+            }
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any