@syncfusion/ej2-dropdowns 23.2.7 → 24.1.41-566987

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

@@ -1,22 +1,22 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 import { EventHandler, Property, Event, compile, KeyboardEvents, append, select } from '@syncfusion/ej2-base';
@@ -91,7 +91,6 @@ var DropDownList = /** @class */ (function (_super) {
         _this.isListSearched = false;
         _this.preventChange = false;
         _this.isAngular = false;
-        _this.itemCount = 10;
         _this.virtualListHeight = 0;
         _this.isVirtualScrolling = false;
         _this.isPreventScrollAction = false;
@@ -106,6 +105,10 @@ var DropDownList = /** @class */ (function (_super) {
         _this.pageCount = 0;
         _this.isPreventKeyAction = false;
         _this.generatedDataObject = {};
+        _this.incrementalQueryString = '';
+        _this.incrementalEndIndex = 0;
+        _this.incrementalStartIndex = 0;
+        _this.incrementalPreQueryString = '';
         _this.isTouched = false;
         _this.virtualListInfo = {
             currentPageNumber: null,
@@ -215,8 +218,10 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.renderList = function (e, isEmptyData) {
         _super.prototype.render.call(this, e, isEmptyData);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        if (!(this.dataSource instanceof DataManager)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        }
         this.unWireListEvents();
         this.wireListEvents();
     };
@@ -680,12 +685,136 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.isValidLI = function (li) {
         return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');
     };
+    DropDownList.prototype.updateIncrementalInfo = function (startIndex, endIndex) {
+        this.viewPortInfo.startIndex = startIndex;
+        this.viewPortInfo.endIndex = endIndex;
+        this.updateVirtualItemIndex();
+        this.isIncrementalRequest = true;
+        this.resetList(this.dataSource, this.fields, this.query);
+        this.isIncrementalRequest = false;
+    };
+    DropDownList.prototype.updateIncrementalView = function (startIndex, endIndex) {
+        this.viewPortInfo.startIndex = startIndex;
+        this.viewPortInfo.endIndex = endIndex;
+        this.updateVirtualItemIndex();
+        this.resetList(this.dataSource, this.fields, this.query);
+        this.UpdateSkeleton();
+        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+        this.ulElement = this.list.querySelector('ul');
+    };
+    DropDownList.prototype.updateIncrementalItemIndex = function (startIndex, endIndex) {
+        this.incrementalStartIndex = startIndex;
+        this.incrementalEndIndex = endIndex;
+    };
     DropDownList.prototype.incrementalSearch = function (e) {
         if (this.liCollections.length > 0) {
-            var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
-            if (!isNullOrUndefined(li)) {
-                this.setSelection(li, e);
-                this.setScrollPosition();
+            if (this.enableVirtualization) {
+                var updatingincrementalindex = false;
+                var queryStringUpdated = false;
+                var activeElement = this.ulElement.getElementsByClassName('e-active')[0];
+                var currentValue = activeElement ? activeElement.textContent : null;
+                if (this.incrementalQueryString == '') {
+                    this.incrementalQueryString = String.fromCharCode(e.charCode);
+                    this.incrementalPreQueryString = this.incrementalQueryString;
+                }
+                else if (String.fromCharCode(e.charCode).toLocaleLowerCase() == this.incrementalPreQueryString.toLocaleLowerCase()) {
+                    queryStringUpdated = true;
+                }
+                else {
+                    this.incrementalQueryString = String.fromCharCode(e.charCode);
+                }
+                if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {
+                    updatingincrementalindex = true;
+                    this.incrementalStartIndex = this.incrementalEndIndex;
+                    if (this.incrementalEndIndex == 0) {
+                        this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                    }
+                    else {
+                        this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                    }
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                }
+                if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                    this.updateIncrementalView(0, this.itemCount);
+                }
+                var li = incrementalSearch(e.charCode, this.incrementalLiCollections, this.activeIndex, true, this.element.id, queryStringUpdated, currentValue, true);
+                while (isNullOrUndefined(li) && this.incrementalEndIndex < this.totalItemCount) {
+                    this.updateIncrementalItemIndex(this.incrementalEndIndex, this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100);
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                    if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                        this.updateIncrementalView(0, this.itemCount);
+                    }
+                    li = incrementalSearch(e.charCode, this.incrementalLiCollections, 0, true, this.element.id, queryStringUpdated, currentValue, true, true);
+                    if (!isNullOrUndefined(li)) {
+                        break;
+                    }
+                    if (isNullOrUndefined(li) && this.incrementalEndIndex >= this.totalItemCount) {
+                        this.updateIncrementalItemIndex(0, 100 > this.totalItemCount ? this.totalItemCount : 100);
+                        break;
+                    }
+                }
+                if (isNullOrUndefined(li) && this.incrementalEndIndex >= this.totalItemCount) {
+                    this.updateIncrementalItemIndex(0, 100 > this.totalItemCount ? this.totalItemCount : 100);
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                    if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                        this.updateIncrementalView(0, this.itemCount);
+                    }
+                    li = incrementalSearch(e.charCode, this.incrementalLiCollections, 0, true, this.element.id, queryStringUpdated, currentValue, true, true);
+                }
+                var index = li && this.getIndexByValue(li.getAttribute('data-value'));
+                if (!index) {
+                    for (var i = 0; i < this.incrementalLiCollections.length; i++) {
+                        if (!isNullOrUndefined(li) && !isNullOrUndefined(li.getAttribute('data-value')) && this.incrementalLiCollections[i].getAttribute('data-value') === li.getAttribute('data-value').toString()) {
+                            index = i;
+                            index = this.incrementalStartIndex + index;
+                            break;
+                        }
+                    }
+                }
+                else {
+                    index = index - this.skeletonCount;
+                }
+                if (index) {
+                    if ((!(this.viewPortInfo.startIndex >= index)) || (!(index >= this.viewPortInfo.endIndex))) {
+                        var startIndex = index - ((this.itemCount / 2) - 2) > 0 ? index - ((this.itemCount / 2) - 2) : 0;
+                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        this.updateIncrementalView(startIndex, endIndex);
+                    }
+                }
+                if (!isNullOrUndefined(li)) {
+                    var index_1 = this.getIndexByValue(li.getAttribute('data-value')) - this.skeletonCount;
+                    if (index_1 > this.itemCount / 2) {
+                        var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;
+                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        this.updateIncrementalView(startIndex, endIndex);
+                    }
+                    li = this.getElementByValue(li.getAttribute('data-value'));
+                    this.setSelection(li, e);
+                    this.setScrollPosition();
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                    if (this.enableVirtualization && !this.fields.groupBy) {
+                        var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+                        this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
+                    }
+                    this.incrementalPreQueryString = this.incrementalQueryString;
+                }
+                else {
+                    this.updateIncrementalView(0, this.itemCount);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                    this.list.scrollTop = 0;
+                }
+            }
+            else {
+                var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
+                if (!isNullOrUndefined(li)) {
+                    this.setSelection(li, e);
+                    this.setScrollPosition();
+                }
             }
         }
     };
@@ -741,6 +870,9 @@ var DropDownList = /** @class */ (function (_super) {
             if (isNullOrUndefined(this.list) && !this.isRequested && !isTabAction && e.action !== 'escape') {
                 this.searchKeyEvent = e;
                 this.renderList(e);
+                this.UpdateSkeleton();
+                this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.ulElement = this.list.querySelector('ul');
             }
             if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
                 isNavigation && this.liCollections.length === 0) || this.isRequested) {
@@ -818,7 +950,7 @@ var DropDownList = /** @class */ (function (_super) {
         var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
         if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
             this.setSelection(focusEle, e);
-            if (this.enableVirtualization) {
+            if (this.enableVirtualization && !this.fields.groupBy && this.getModuleName() !== 'combobox') {
                 var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
                 this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
             }
@@ -846,7 +978,7 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                     else {
                         if (this.getModuleName() === 'autocomplete') {
-                            var value = this.selectedLI.dataset.value;
+                            var value = this.getFormattedValue(this.selectedLI.getAttribute('data-value'));
                             nextItem = this.getElementByValue(value);
                         }
                         else {
@@ -858,26 +990,75 @@ var DropDownList = /** @class */ (function (_super) {
             if (!isNullOrUndefined(nextItem)) {
                 this.setSelection(nextItem, e);
             }
+            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') {
+                    this.viewPortInfo.startIndex = (this.viewPortInfo.startIndex + this.itemCount) < (this.totalItemCount - this.itemCount) ? this.viewPortInfo.startIndex + this.itemCount : this.totalItemCount - this.itemCount;
+                    this.viewPortInfo.endIndex = this.viewPortInfo.startIndex + this.itemCount;
+                    this.updateVirtualItemIndex();
+                    this.isCustomFilter = this.getModuleName() === 'combobox' ? true : this.isCustomFilter;
+                    this.resetList(this.dataSource, this.fields, this.query);
+                    this.isCustomFilter = this.getModuleName() === 'combobox' ? false : this.isCustomFilter;
+                    var value_2 = this.liCollections[0].getAttribute('data-value') !== "null" ? this.getFormattedValue(this.liCollections[0].getAttribute('data-value')) : null;
+                    var selectedData = this.getDataByValue(value_2);
+                    if (selectedData) {
+                        this.itemData = selectedData;
+                    }
+                }
+                else if (e.action === 'up') {
+                    this.viewPortInfo.startIndex = (this.viewPortInfo.startIndex - this.itemCount) > 0 ? this.viewPortInfo.startIndex - this.itemCount : 0;
+                    this.viewPortInfo.endIndex = this.viewPortInfo.startIndex + this.itemCount;
+                    this.updateVirtualItemIndex();
+                    this.isCustomFilter = this.getModuleName() === 'combobox' ? true : this.isCustomFilter;
+                    this.resetList(this.dataSource, this.fields, this.query);
+                    this.isCustomFilter = this.getModuleName() === 'combobox' ? false : this.isCustomFilter;
+                    var value_3 = this.liCollections[this.liCollections.length - 1].getAttribute('data-value') !== "null" ? this.getFormattedValue(this.liCollections[this.liCollections.length - 1].getAttribute('data-value')) : null;
+                    var selectedData = this.getDataByValue(value_3);
+                    if (selectedData) {
+                        this.itemData = selectedData;
+                    }
+                }
+                this.UpdateSkeleton();
+                this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.ulElement = this.list.querySelector('ul');
+                this.handleVirtualKeyboardActions(e, this.pageCount);
+            }
         }
         if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
-            var value_2 = this.getItemData().value;
-            var filterIndex = this.getIndexByValueFilter(value_2);
+            var value_4 = this.getItemData().value;
+            var filterIndex = this.getIndexByValueFilter(value_4);
             if (!isNullOrUndefined(filterIndex)) {
                 this.activeIndex = filterIndex;
             }
         }
         e.preventDefault();
     };
+    DropDownList.prototype.updateVirtualItemIndex = function () {
+        this.virtualItemStartIndex = this.viewPortInfo.startIndex;
+        this.virtualItemEndIndex = this.viewPortInfo.endIndex;
+        this.virtualListInfo = this.viewPortInfo;
+    };
     DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
             var findLi = 0;
             if (e.action === 'home') {
                 findLi = 0;
-                if (this.enableVirtualization) {
+                if (this.enableVirtualization && this.isPopupOpen) {
                     findLi = this.skeletonCount;
                 }
+                else if (this.enableVirtualization && !this.isPopupOpen && this.viewPortInfo.startIndex !== 0) {
+                    this.viewPortInfo.startIndex = 0;
+                    this.viewPortInfo.endIndex = this.itemCount;
+                    this.updateVirtualItemIndex();
+                    this.resetList(this.dataSource, this.fields, this.query);
+                }
             }
             else {
+                if (this.enableVirtualization && !this.isPopupOpen && this.viewPortInfo.endIndex !== this.totalItemCount) {
+                    this.viewPortInfo.startIndex = this.totalItemCount - this.itemCount;
+                    this.viewPortInfo.endIndex = this.totalItemCount;
+                    this.updateVirtualItemIndex();
+                    this.resetList(this.dataSource, this.fields, this.query);
+                }
                 findLi = this.getItems().length - 1;
             }
             e.preventDefault();
@@ -973,12 +1154,6 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.isSelectFocusItem = function (element) {
         return !isNullOrUndefined(element);
     };
-    DropDownList.prototype.getPageCount = function (returnExactCount) {
-        var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
-            getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
-        var pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
-        return returnExactCount ? pageCount : Math.round(pageCount);
-    };
     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) {
@@ -1241,7 +1416,10 @@ var DropDownList = /** @class */ (function (_super) {
                         .then(function (e) {
                         if (e.result.length > 0) {
                             _this.itemData = e.result[0];
-                            _this.setProperties({ 'text': e.result[0].text, 'value': e.result[0].value }, true);
+                            var dataItem = _this.getItemData();
+                            if ((_this.value === dataItem.value && _this.text !== dataItem.text) || (_this.value !== dataItem.value && _this.text === dataItem.text)) {
+                                _this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                            }
                         }
                     });
                 }
@@ -1249,7 +1427,10 @@ var DropDownList = /** @class */ (function (_super) {
                     var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
-                        this.setProperties({ 'text': getItem[0].text, 'value': getItem[0].value }, true);
+                        var dataItem = this.getItemData();
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                        }
                     }
                 }
             }
@@ -1511,7 +1692,7 @@ var DropDownList = /** @class */ (function (_super) {
                     this.typedString = this.filterInput.value;
                     this.preventAutoFill = false;
                     this.searchLists(e);
-                    if (this.enableVirtualization) {
+                    if ((this.enableVirtualization && this.getModuleName() !== 'autocomplete') || (this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {
                         this.getFilteringSkeletonCount();
                     }
                     break;
@@ -1526,19 +1707,28 @@ var DropDownList = /** @class */ (function (_super) {
         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;
+        var skeletonUpdated = true;
+        if (this.getModuleName() === 'autocomplete' && (this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2))) {
+            this.skeletonCount = 0;
+            skeletonUpdated = false;
+        }
         if (!this.list.classList.contains(dropDownBaseClasses.noData)) {
             var isSkeletonCountChange = currentSkeletonCount !== this.skeletonCount;
-            if (currentSkeletonCount !== this.skeletonCount) {
+            if (currentSkeletonCount !== this.skeletonCount && skeletonUpdated) {
                 this.UpdateSkeleton(true, Math.abs(currentSkeletonCount - this.skeletonCount));
             }
             else {
                 this.UpdateSkeleton();
             }
             this.liCollections = this.list.querySelectorAll('.e-list-item');
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+            if ((this.list.getElementsByClassName('e-virtual-ddl').length > 0)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+            }
+            if (this.list.getElementsByClassName('e-virtual-ddl-content').length > 0) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+            }
         }
     };
     DropDownList.prototype.getSkeletonCount = function (retainSkeleton) {
@@ -1591,12 +1781,26 @@ var DropDownList = /** @class */ (function (_super) {
         else {
             filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
         }
-        if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0)) {
+        if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
             var takeValue = this.getTakeValue();
-            if (this.allowFiltering) {
+            var alreadySkipAdded = false;
+            if (filterQuery) {
+                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                        alreadySkipAdded = true;
+                        break;
+                    }
+                }
+            }
+            if (this.allowFiltering || !this.isPopupOpen || !alreadySkipAdded) {
                 filterQuery.skip(this.virtualItemStartIndex);
             }
-            filterQuery.take(takeValue);
+            if (this.isIncrementalRequest) {
+                filterQuery.take(this.incrementalEndIndex);
+            }
+            else {
+                filterQuery.take(takeValue);
+            }
             filterQuery.requiresCount();
         }
         return filterQuery;
@@ -1644,7 +1848,7 @@ var DropDownList = /** @class */ (function (_super) {
      * @param {Query} query - Specify the query to filter the data.
      * @param {FieldSettingsModel} fields - Specify the fields to map the column in the data table.
      * @returns {void}
-
+     * @deprecated
      */
     DropDownList.prototype.filter = function (dataSource, query, fields) {
         this.isCustomFilter = true;
@@ -1840,7 +2044,7 @@ var DropDownList = /** @class */ (function (_super) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
         var _this = this;
-        if (this.dataSource instanceof DataManager && !isNullOrUndefined(e)) {
+        if (this.dataSource instanceof DataManager && !isNullOrUndefined(e) && !this.virtualGroupDataSource) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.totalItemCount = e.count;
         }
@@ -1867,7 +2071,7 @@ var DropDownList = /** @class */ (function (_super) {
                 this.list.scrollTop = 0;
             }
             if (!isNullOrUndefined(ulElement)) {
-                attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
+                attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'listbox' });
             }
             if (this.initRemoteRender) {
                 this.initial = true;
@@ -1993,10 +2197,10 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.addNewItem = function (listData, newElement) {
         var _this = this;
         if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {
-            var value_3 = this.getItemData().value;
+            var value_5 = this.getItemData().value;
             var isExist = listData.some(function (data) {
-                return (((typeof data === 'string' || typeof data === 'number') && data === value_3) ||
-                    (getValue(_this.fields.value, data) === value_3));
+                return (((typeof data === 'string' || typeof data === 'number') && data === value_5) ||
+                    (getValue(_this.fields.value, data) === value_5));
             });
             if (!isExist) {
                 this.addItem(this.itemData);
@@ -2087,6 +2291,9 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.GetVirtualTrackHeight = function () {
         var height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
         var heightDimension = "height: " + (height - this.itemCount * this.listItemHeight) + "px;";
+        if (this.getModuleName() === 'autocomplete' && this.skeletonCount === 0) {
+            return "height: 0px;";
+        }
         return heightDimension;
     };
     DropDownList.prototype.renderPopup = function (e) {
@@ -2101,6 +2308,8 @@ var DropDownList = /** @class */ (function (_super) {
                 var popupEle = _this.createElement('div', {
                     id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass !== null ? _this.cssClass : '')
                 });
+                popupEle.setAttribute('aria-label', _this.element.id);
+                popupEle.setAttribute('role', 'dialog');
                 var searchBox = _this.setSearchBox(popupEle);
                 _this.listHeight = formatUnit(_this.popupHeight);
                 if (_this.headerTemplate) {
@@ -2185,9 +2394,9 @@ var DropDownList = /** @class */ (function (_super) {
                             parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));
                     }
                 }
-                _this.getFocusElement();
                 _this.createPopup(popupEle, offsetValue, left);
                 _this.popupContentElement = _this.popupObj.element.querySelector('.e-content');
+                _this.getFocusElement();
                 _this.checkCollision(popupEle);
                 if (Browser.isDevice) {
                     _this.popupObj.element.classList.add(dropDownListClasses.device);
@@ -2227,7 +2436,7 @@ var DropDownList = /** @class */ (function (_super) {
                         enable: _this.enableVirtualization,
                     });
                     setTimeout(function () {
-                        if (_this.value) {
+                        if (_this.value || _this.list.querySelector('.e-active')) {
                             _this.updateSelectionList();
                             if (_this.selectedValueInfo && _this.viewPortInfo && _this.viewPortInfo.offsets.top) {
                                 _this.list.scrollTop = _this.viewPortInfo.offsets.top;
@@ -2238,8 +2447,9 @@ var DropDownList = /** @class */ (function (_super) {
                         }
                     }, 5);
                 }
-                attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_options' });
+                attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
                 _this.inputElement.setAttribute('aria-expanded', 'true');
+                _this.inputElement.setAttribute('aria-controls', _this.element.id);
                 var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;
                 addClass([inputParent], [dropDownListClasses.inputFocus]);
                 var animModel = { name: 'FadeIn', duration: 100 };
@@ -2304,7 +2514,12 @@ var DropDownList = /** @class */ (function (_super) {
                 _this.destroyPopup();
                 if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list[0]) {
                     _this.isActive = true;
-                    _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);
+                    if (_this.enableVirtualization) {
+                        _this.onActionComplete(_this.ulElement, _this.listData, null, true);
+                    }
+                    else {
+                        _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);
+                    }
                 }
             },
             open: function () {
@@ -2411,6 +2626,7 @@ var DropDownList = /** @class */ (function (_super) {
         return width;
     };
     DropDownList.prototype.scrollBottom = function (isInitial, isInitialSelection, keyAction) {
+        var _this = this;
         if (isInitialSelection === void 0) { isInitialSelection = false; }
         if (keyAction === void 0) { keyAction = null; }
         if (isNullOrUndefined(this.selectedLI) && this.enableVirtualization) {
@@ -2476,6 +2692,11 @@ var DropDownList = /** @class */ (function (_super) {
                 isScrollTopChanged = true;
             }
             this.isKeyBoardAction = isScrollerCHanged;
+            if (this.enableVirtualization && this.fields.groupBy && this.fixedHeaderElement && (keyAction == "down")) {
+                setTimeout(function () {
+                    _this.scrollStop(null, true);
+                }, 100);
+            }
         }
     };
     DropDownList.prototype.scrollTop = function (keyAction) {
@@ -2681,7 +2902,15 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
             this.actionCompleteData.ulElement = this.ulElement.cloneNode(true);
         }
-        var dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        var dataSourceCount;
+        if (this.dataSource instanceof DataManager) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            dataSourceCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        }
         if (this.enableVirtualization && this.isFiltering() && this.value != null && isFilterValue && this.totalItemCount !== dataSourceCount) {
             this.updateInitialData();
             this.checkAndResetCache();
@@ -2704,8 +2933,14 @@ var DropDownList = /** @class */ (function (_super) {
         }
         this.previousStartIndex = 0;
         this.previousEndIndex = 0;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 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;
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.list.getElementsByClassName('e-virtual-ddl')[0]) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2815,6 +3050,9 @@ var DropDownList = /** @class */ (function (_super) {
         }
         else if (this.getModuleName() === 'dropdownlist') {
             attributes(this.targetElement(), { 'aria-label': this.getModuleName() });
+            this.inputElement.setAttribute('aria-label', this.getModuleName());
+            this.inputElement.setAttribute('aria-expanded', 'false');
+            this.inputElement.setAttribute('aria-controls', this.element.id + '_popups');
         }
         attributes(this.targetElement(), this.getAriaAttributes());
         this.updateDataAttribute(this.htmlAttributes);
@@ -3080,6 +3318,14 @@ var DropDownList = /** @class */ (function (_super) {
                         this_1.clearAll();
                         break;
                     }
+                    if (this_1.enableVirtualization) {
+                        this_1.updateValues();
+                        this_1.updateInputFields();
+                        this_1.notify("setCurrentViewDataAsync", {
+                            module: "VirtualScroll",
+                        });
+                        break;
+                    }
                     if (!this_1.list) {
                         if (this_1.dataSource instanceof DataManager) {
                             this_1.initRemoteRender = true;
@@ -3123,6 +3369,15 @@ var DropDownList = /** @class */ (function (_super) {
                         this_1.clearAll();
                         break;
                     }
+                    if (this_1.enableVirtualization) {
+                        this_1.updateValues();
+                        this_1.updateInputFields();
+                        this_1.notify("setCurrentViewDataAsync", {
+                            module: "VirtualScroll",
+                        });
+                        this_1.preventChange = this_1.isAngular && this_1.preventChange ? !this_1.preventChange : this_1.preventChange;
+                        break;
+                    }
                     this_1.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
                     if (!this_1.list) {
                         if (this_1.dataSource instanceof DataManager) {
@@ -3272,6 +3527,12 @@ var DropDownList = /** @class */ (function (_super) {
             }
         };
     };
+    DropDownList.prototype.updatePopupState = function () {
+        if (this.beforePopupOpen) {
+            this.beforePopupOpen = false;
+            this.showPopup();
+        }
+    };
     DropDownList.prototype.setReadOnly = function () {
         if (this.readonly) {
             addClass([this.inputWrapper.container], ['e-readonly']);
@@ -3404,6 +3665,9 @@ var DropDownList = /** @class */ (function (_super) {
         this.closePopup(0, e);
         var dataItem = this.getItemData();
         var isSelectVal = !isNullOrUndefined(this.selectedLI);
+        if (isSelectVal && this.enableVirtualization && this.selectedLI.classList) {
+            isSelectVal = this.selectedLI.classList.contains('e-active');
+        }
         if (this.inputElement && this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||
             isSelectVal && this.inputElement.value !== dataItem.text)) {
             this.isSelectCustom = false;