@syncfusion/ej2-dropdowns 22.2.12 → 23.1.38

package/dist/es6/ej2-dropdowns.es5.js

@@ -1,8 +1,9 @@
-import { Animation, Browser, ChildProperty, Complex, Component, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getComponent, getUniqueID, getValue, isNullOrUndefined, isUndefined, matches, prepend, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Complex, Component, Event, EventHandler, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, attributes, classList, closest, compile, createElement, debounce, detach, extend, formatUnit, getComponent, getUniqueID, getValue, isNullOrUndefined, isUndefined, matches, prepend, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
 import { DataManager, DataUtil, JsonAdaptor, Predicate, Query } from '@syncfusion/ej2-data';
 import { ListBase, Sortable, cssClass, moveTo } from '@syncfusion/ej2-lists';
 import { Popup, createSpinner, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
 import { Input, TextBox } from '@syncfusion/ej2-inputs';
+import { Skeleton } from '@syncfusion/ej2-notifications';
 import { Button, createCheckBox } from '@syncfusion/ej2-buttons';
 import { TreeView } from '@syncfusion/ej2-navigations';
 
@@ -194,6 +195,382 @@ function revertHighlightSearch(content) {
     }
 }
 
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var VirtualScroll = /** @__PURE__ @class */ (function () {
+    function VirtualScroll(parent) {
+        var _this = this;
+        this.sentinelInfo = {
+            'up': {
+                check: function (rect, info) {
+                    var top = rect.top - _this.containerElementRect.top;
+                    info.entered = top >= 0;
+                    return top + (_this.parent.listItemHeight * _this.parent.virtualItemCount / 2) >= 0;
+                },
+                axis: 'Y'
+            },
+            'down': {
+                check: function (rect, info) {
+                    var cHeight = _this.parent.popupContentElement.clientHeight;
+                    var top = rect.bottom;
+                    info.entered = rect.bottom <= _this.containerElementRect.bottom;
+                    return top - (_this.parent.listItemHeight * _this.parent.virtualItemCount / 2) <= _this.parent.listItemHeight * _this.parent.virtualItemCount / 2;
+                }, axis: 'Y'
+            }
+        };
+        this.parent = parent;
+        this.removeEventListener();
+        this.addEventListener();
+    }
+    VirtualScroll.prototype.addEventListener = function () {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.parent.on('observe', this.observe, this);
+        this.parent.on('setGeneratedData', this.setGeneratedData, this);
+        this.parent.on('dataProcessAsync', this.dataProcessAsync, this);
+        this.parent.on('setCurrentViewDataAsync', this.setCurrentViewDataAsync, this);
+        this.parent.on('bindScrollEvent', this.bindScrollEvent, this);
+    };
+    VirtualScroll.prototype.removeEventListener = function () {
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.parent.off('observe', this.observe);
+        this.parent.off('setGeneratedData', this.setGeneratedData);
+        this.parent.off('dataProcessAsync', this.dataProcessAsync);
+        this.parent.off('setCurrentViewDataAsync', this.setCurrentViewDataAsync);
+        this.parent.off('bindScrollEvent', this.bindScrollEvent);
+    };
+    VirtualScroll.prototype.bindScrollEvent = function (component) {
+        var _this = this;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.component = component.component;
+        this.observe(function (scrollArgs) { return _this.scrollListener(scrollArgs); });
+    };
+    VirtualScroll.prototype.observe = function (callback) {
+        this.containerElementRect = this.parent.popupContentElement.getBoundingClientRect();
+        EventHandler.add(this.parent.popupContentElement, 'wheel mousedown', this.popupScrollHandler, this);
+        this.touchModule = new Touch(this.parent.popupContentElement, {
+            scroll: this.popupScrollHandler.bind(this)
+        });
+        EventHandler.add(this.parent.popupContentElement, 'scroll', this.virtualScrollHandler(callback), this);
+    };
+    VirtualScroll.prototype.getModuleName = function () {
+        return 'VirtualScroll';
+    };
+    VirtualScroll.prototype.popupScrollHandler = function (e) {
+        this.parent.isMouseScrollAction = true;
+        this.parent.isPreventScrollAction = false;
+    };
+    VirtualScroll.prototype.getPageQuery = function (query, virtualStartIndex, virtualEndIndex) {
+        if (virtualEndIndex !== 0 && !this.parent.allowFiltering && this.component !== 'autocomplete') {
+            query = query.skip(virtualStartIndex);
+        }
+        return query;
+    };
+    VirtualScroll.prototype.setGeneratedData = function (qStartIndex, recentlyGeneratedData) {
+        var loopIteration = 0;
+        var endIndex = this.parent.listData.length + this.parent.virtualItemStartIndex;
+        for (var i = this.parent.virtualItemStartIndex; i < endIndex; i++) {
+            var alreadyAddedData = this.parent.generatedDataObject[i];
+            if (!alreadyAddedData) {
+                if (recentlyGeneratedData !== null && this.parent.listData.slice(loopIteration, loopIteration + 1).length > 0) {
+                    var slicedData = this.parent.listData.slice(loopIteration, loopIteration + 1);
+                    if (slicedData.length > 0) {
+                        // Safely assign slicedData to this.parent.generatedDataObject[i]
+                        this.parent.generatedDataObject[i] = slicedData;
+                    }
+                }
+            }
+            loopIteration++;
+        }
+    };
+    VirtualScroll.prototype.generateAndExecuteQueryAsync = function (query, virtualItemStartIndex, virtualItemEndIndex, isQueryGenerated) {
+        if (virtualItemStartIndex === void 0) { virtualItemStartIndex = 0; }
+        if (virtualItemEndIndex === void 0) { virtualItemEndIndex = 0; }
+        if (isQueryGenerated === void 0) { isQueryGenerated = false; }
+        var dataSource = this.parent.dataSource;
+        if (!isQueryGenerated) {
+            query = this.getPageQuery(query, virtualItemStartIndex, virtualItemEndIndex);
+        }
+        this.parent.resetList(dataSource, this.parent.fields, query);
+    };
+    VirtualScroll.prototype.setCurrentViewDataAsync = function () {
+        // eslint-disable-next-line
+        var currentData = [];
+        for (var i = this.parent.viewPortInfo.startIndex; i < this.parent.viewPortInfo.endIndex; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var alreadyAddedData = this.parent.generatedDataObject[i];
+            if (alreadyAddedData) {
+                currentData.push(alreadyAddedData[0]);
+            }
+        }
+        this.parent.renderItems(currentData, this.parent.fields);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0];
+        if (virtualTrackElement) {
+            (virtualTrackElement).style = this.parent.GetVirtualTrackHeight();
+        }
+        this.parent.UpdateSkeleton();
+        this.parent.liCollections = this.parent.list.querySelectorAll('.e-list-item');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var virtualContentElement = this.parent.list.getElementsByClassName('e-virtual-ddl-content')[0];
+        if (virtualContentElement) {
+            (virtualContentElement).style = this.parent.getTransformValues();
+        }
+    };
+    VirtualScroll.prototype.generateQueryAndSetQueryIndexAsync = function (query, isPopupOpen) {
+        var isStartIndexInitialised = false;
+        var queryStartIndex = 0;
+        var queryEndIndex = 0;
+        var sortedDataStartIndex = 0;
+        var vEndIndex = this.parent && this.parent.viewPortInfo.endIndex !== 0 ? this.parent.viewPortInfo.endIndex : sortedDataStartIndex + this.parent.getItems().length;
+        if (!isPopupOpen && vEndIndex !== 0) {
+            for (var i = this.parent.viewPortInfo.startIndex; i <= vEndIndex; i++) {
+                if (!(i in this.parent.generatedDataObject)) {
+                    if (!isStartIndexInitialised) {
+                        isStartIndexInitialised = true;
+                        queryStartIndex = queryEndIndex = i;
+                    }
+                    else {
+                        queryEndIndex = i === vEndIndex ? i : i + 1;
+                    }
+                }
+            }
+        }
+        if (isStartIndexInitialised && !((this.parent.totalItemCount == queryStartIndex) && (this.parent.totalItemCount == queryEndIndex))) {
+            this.parent.virtualItemStartIndex = queryStartIndex;
+            this.parent.virtualItemEndIndex = queryEndIndex;
+            this.generateAndExecuteQueryAsync(query, queryStartIndex, queryEndIndex);
+        }
+        this.setCurrentViewDataAsync();
+    };
+    VirtualScroll.prototype.dataProcessAsync = function (isOpenPopup) {
+        this.parent.selectedValueInfo = null;
+        this.parent.virtualItemStartIndex = this.parent.viewPortInfo.startIndex;
+        this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;
+        this.generateQueryAndSetQueryIndexAsync(new Query(), isOpenPopup);
+    };
+    VirtualScroll.prototype.virtualScrollRefreshAsync = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        this.parent.isCustomFilter = (!(this.parent.isTyped || (this.component === 'combobox' && this.parent.allowFiltering && this.parent.queryString != this.parent.typedString) || (!isNullOrUndefined(this.parent.filterInput) && !isNullOrUndefined(this.parent.filterInput.value) && this.parent.filterInput.value !== '') && this.component !== 'combobox') && !(this.component === 'autocomplete' && this.parent.value != null)) || this.parent.isCustomFilter;
+                        if (this.parent.allowFiltering || this.component === 'autocomplete') {
+                            if (!isNullOrUndefined(this.parent.typedString) && !(this.component === 'combobox' && !isNullOrUndefined(this.parent.typedString) && this.parent.allowFiltering)) {
+                                if (this.parent.viewPortInfo.endIndex >= this.parent.dataCount) {
+                                    this.parent.viewPortInfo.endIndex = this.parent.dataCount;
+                                }
+                                if (this.parent.viewPortInfo.startIndex >= this.parent.dataCount) {
+                                    this.parent.viewPortInfo.startIndex = this.parent.dataCount - this.parent.itemCount;
+                                }
+                            }
+                            else {
+                                this.parent.getSkeletonCount(true);
+                            }
+                        }
+                        return [4 /*yield*/, this.dataProcessAsync()];
+                    case 1:
+                        _a.sent();
+                        if (this.parent.keyboardEvent != null) {
+                            this.parent.handleVirtualKeyboardActions(this.parent.keyboardEvent, this.parent.pageCount);
+                        }
+                        this.parent.isCustomFilter = false;
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    VirtualScroll.prototype.scrollListener = function (scrollArgs) {
+        var _this = this;
+        if (!this.parent.isPreventScrollAction) {
+            var info = scrollArgs.sentinel;
+            var pStartIndex = this.parent.previousStartIndex;
+            this.parent.viewPortInfo = this.getInfoFromView(scrollArgs.direction, info, scrollArgs.offset, false);
+            this.parent.isUpwardScrolling = false;
+            if (this.parent.previousStartIndex !== pStartIndex && !this.parent.isKeyBoardAction) {
+                this.parent.isScrollActionTriggered = false;
+                this.parent.currentPageNumber = this.parent.viewPortInfo.currentPageNumber;
+                this.parent.virtualListInfo = __assign({}, this.parent.viewPortInfo);
+                this.parent.isPreventKeyAction = true;
+                this.parent.isVirtualScrolling = true;
+                setTimeout(function () {
+                    _this.parent.pageCount = _this.parent.getPageCount();
+                    _this.virtualScrollRefreshAsync().then(function () {
+                        if (_this.parent.popupObj) {
+                            _this.parent.list = _this.parent.popupObj.element.querySelector('.' + 'e-content') || select('.' + 'e-content');
+                            _this.parent.updateSelectionList();
+                            _this.parent.liCollections = _this.parent.getItems();
+                        }
+                        _this.parent.isKeyBoardAction = false;
+                        _this.parent.isVirtualScrolling = false;
+                        _this.parent.isPreventKeyAction = false;
+                    });
+                }, 5);
+            }
+            else if (this.parent.isScrollActionTriggered) {
+                this.parent.isPreventKeyAction = false;
+                this.parent.isScrollActionTriggered = false;
+                var virtualListCount = this.parent.list.querySelectorAll('.e-virtual-list').length;
+                var listElement = this.parent.list.querySelector('.' + 'e-list-item');
+                var translateY = scrollArgs.offset.top - (listElement.offsetHeight * virtualListCount);
+                this.parent.list.getElementsByClassName('e-virtual-ddl-content')[0].style.transform = "translate(0px," + translateY + "px)";
+            }
+            this.parent.previousInfo = this.parent.viewPortInfo;
+        }
+    };
+    VirtualScroll.prototype.getPageCount = function (popupElement, returnExactCount) {
+        if (returnExactCount === void 0) { returnExactCount = false; }
+        var list = popupElement && popupElement.querySelector('.e-content');
+        if (list) {
+            var liHeight = list.classList.contains('e-nodata') ? null : getComputedStyle(list.querySelectorAll('.e-list-item')[0], null).getPropertyValue('height');
+            var pageCount = list.getBoundingClientRect().height / parseInt(liHeight, 10);
+            return returnExactCount ? pageCount : Math.round(pageCount);
+        }
+        return 0;
+    };
+    
+    VirtualScroll.prototype.getRowHeight = function () {
+        return (isNullOrUndefined(this.parent.liCollections) || this.parent.liCollections.length == 0) ? 0 : Math.ceil(this.parent.liCollections[0].getBoundingClientRect().height);
+    };
+    VirtualScroll.prototype.getInfoFromView = function (direction, info, e, isscrollAction) {
+        var infoType = {
+            direction: direction, sentinelInfo: info, offsets: e,
+            startIndex: this.parent.previousStartIndex, endIndex: this.parent.previousEndIndex
+        };
+        var vHeight = this.parent.popupContentElement.getBoundingClientRect().height;
+        //Row Start and End Index calculation
+        var rowHeight = this.parent.listItemHeight;
+        var exactTopIndex = e.top / rowHeight;
+        var infoViewIndices = vHeight / rowHeight;
+        var exactEndIndex = exactTopIndex + infoViewIndices;
+        var pageSizeBy4 = this.parent.virtualItemCount / 4;
+        var totalItemCount = this.parent.totalItemCount;
+        if (infoType.direction === 'down') {
+            var sIndex = Math.round(exactEndIndex) - Math.round((pageSizeBy4));
+            if (isNullOrUndefined(infoType.startIndex) || (exactEndIndex >
+                (infoType.startIndex + Math.round((this.parent.virtualItemCount / 2 + pageSizeBy4)))
+                && infoType.endIndex !== totalItemCount)) {
+                infoType.startIndex = sIndex >= 0 ? Math.round(sIndex) : 0;
+                infoType.startIndex = infoType.startIndex > exactTopIndex ? Math.floor(exactTopIndex) : infoType.startIndex;
+                var eIndex = infoType.startIndex + this.parent.virtualItemCount;
+                infoType.startIndex = eIndex < exactEndIndex ? (Math.ceil(exactEndIndex) - this.parent.virtualItemCount)
+                    : infoType.startIndex;
+                infoType.endIndex = eIndex < totalItemCount ? eIndex : totalItemCount;
+                infoType.startIndex = eIndex >= totalItemCount ? (infoType.endIndex - this.parent.virtualItemCount > 0 ? infoType.endIndex - this.parent.virtualItemCount : 0) : infoType.startIndex;
+                infoType.currentPageNumber = Math.ceil(infoType.endIndex / this.parent.virtualItemCount);
+            }
+        }
+        else if (infoType.direction === 'up') {
+            if (infoType.startIndex && infoType.endIndex) {
+                var loadAtIndex = Math.round(((infoType.startIndex * rowHeight) + (pageSizeBy4 * rowHeight)) / rowHeight);
+                if (exactTopIndex < loadAtIndex) {
+                    var idxAddedToExactTop = (pageSizeBy4) > infoViewIndices ? pageSizeBy4 :
+                        (infoViewIndices + infoViewIndices / 4);
+                    var eIndex = Math.round(exactTopIndex + idxAddedToExactTop);
+                    infoType.endIndex = eIndex < totalItemCount ? eIndex : totalItemCount;
+                    var sIndex = infoType.endIndex - this.parent.virtualItemCount;
+                    infoType.startIndex = sIndex > 0 ? sIndex : 0;
+                    infoType.endIndex = sIndex < 0 ? this.parent.virtualItemCount : infoType.endIndex;
+                    infoType.currentPageNumber = Math.ceil(infoType.startIndex / this.parent.virtualItemCount);
+                }
+            }
+        }
+        if (!isscrollAction) {
+            this.parent.previousStartIndex = infoType.startIndex;
+            this.parent.startIndex = infoType.startIndex;
+            this.parent.previousEndIndex = infoType.endIndex;
+        }
+        else {
+            this.parent.scrollPreStartIndex = infoType.startIndex;
+        }
+        return infoType;
+    };
+    VirtualScroll.prototype.virtualScrollHandler = function (callback) {
+        var _this = this;
+        var delay = Browser.info.name === 'chrome' ? 200 : 100;
+        var prevTop = 0;
+        var debounced100 = debounce(callback, delay);
+        var debounced50 = debounce(callback, 50);
+        return function (e) {
+            var top = e.target.scrollTop;
+            var left = e.target.scrollLeft;
+            var direction = prevTop < top && !_this.parent.isUpwardScrolling ? 'down' : 'up';
+            prevTop = top;
+            var current = _this.sentinelInfo[direction];
+            var pstartIndex = _this.parent.scrollPreStartIndex;
+            var scrollOffsetargs = {
+                top: top,
+                left: left
+            };
+            if (_this.parent.list.querySelectorAll('.e-virtual-list').length > 0) {
+                var infoview = _this.getInfoFromView(direction, current, scrollOffsetargs, true);
+                if (_this.parent.scrollPreStartIndex != pstartIndex && !_this.parent.isPreventScrollAction) {
+                    _this.parent.isScrollActionTriggered = true;
+                    var virtualPoup = (_this.parent.list.querySelector('.e-virtual-ddl-content'));
+                    virtualPoup.style.transform = "translate(0px," + top + "px)";
+                }
+            }
+            var debounceFunction = debounced100;
+            if (current.axis === 'X') {
+                debounceFunction = debounced50;
+            }
+            debounceFunction({ direction: direction, sentinel: current, offset: { top: top, left: left },
+                focusElement: document.activeElement });
+        };
+    };
+    VirtualScroll.prototype.destroy = function () {
+        this.removeEventListener();
+    };
+    return VirtualScroll;
+}());
+
 /**
  * Common source
  */
@@ -284,6 +661,11 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         _this.addedNewItem = false;
         _this.isAddNewItemTemplate = false;
         _this.isRequesting = false;
+        _this.isVirtualizationEnabled = false;
+        _this.isAllowFiltering = false;
+        _this.virtualizedItemsCount = 0;
+        _this.totalItemCount = 0;
+        _this.dataCount = 0;
         return _this;
     }
     DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {
@@ -688,11 +1070,12 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                             _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                             _this.trigger('actionComplete', e, function (e) {
                                 if (!e.cancel) {
-                                    _this.isRequesting = false;
                                     var listItems = e.result;
                                     if (listItems.length === 0) {
                                         _this.isDataFetched = true;
                                     }
+                                    _this.dataCount = e.count;
+                                    _this.totalItemCount = e.count;
                                     ulElement = _this.renderItems(listItems, fields);
                                     _this.onActionComplete(ulElement, listItems, e);
                                     if (_this.groupTemplate) {
@@ -701,6 +1084,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                                     _this.isRequested = false;
                                     _this.bindChildItems(listItems, ulElement, fields, e);
                                 }
+                                _this.isRequesting = false;
                             });
                         }).catch(function (e) {
                             _this.isRequested = false;
@@ -710,13 +1094,19 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                         });
                     }
                     else {
+                        _this.isRequesting = false;
                         var dataManager = new DataManager(eventArgs.data);
                         var listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        _this.dataCount = listItems.count;
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        _this.totalItemCount = listItems.count;
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        listItems = _this.isVirtualizationEnabled ? listItems.result : listItems;
                         var localDataArgs = { cancel: false, result: listItems };
                         _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                         _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {
                             if (!localDataArgs.cancel) {
-                                _this.isRequesting = false;
                                 ulElement = _this.renderItems(localDataArgs.result, fields);
                                 _this.onActionComplete(ulElement, localDataArgs.result, event);
                                 if (_this.groupTemplate) {
@@ -810,6 +1200,11 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
     DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         this.listData = list;
+        if (this.isVirtualizationEnabled) {
+            this.notify("setGeneratedData", {
+                module: "VirtualScroll",
+            });
+        }
         if (this.getModuleName() !== 'listbox') {
             ulElement.setAttribute('tabindex', '0');
         }
@@ -828,11 +1223,13 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
         if (!isNullOrUndefined(this.list)) {
-            this.list.innerHTML = '';
-            this.list.appendChild(ulElement);
-            this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-            this.ulElement = this.list.querySelector('ul');
-            this.postRender(this.list, list, this.bindEvent);
+            if (!this.isVirtualizationEnabled) {
+                this.list.innerHTML = '';
+                this.list.appendChild(ulElement);
+                this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.ulElement = this.list.querySelector('ul');
+                this.postRender(this.list, list, this.bindEvent);
+            }
         }
     };
     /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -860,6 +1257,11 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
     DropDownBase.prototype.getQuery = function (query) {
         return query ? query : this.query ? this.query : new Query();
     };
+    DropDownBase.prototype.updateVirtualizationProperties = function (itemCount, filtering) {
+        this.isVirtualizationEnabled = true;
+        this.virtualizedItemsCount = itemCount;
+        this.isAllowFiltering = filtering;
+    };
     /**
      * To render the template content for group header element.
      *
@@ -998,9 +1400,47 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 new DataManager(dataSource).executeLocal(new Query().take(100))
                 : dataSource;
             ulElement = this.templateListItem((this.getModuleName() === 'autocomplete') ? spliceData : dataSource, fields);
+            if (this.isVirtualizationEnabled) {
+                var oldUlElement = this.list.querySelector('.e-list-parent');
+                var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
+                if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
+                    virtualUlElement.replaceChild(ulElement, oldUlElement);
+                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                    this.ulElement = this.list.querySelector('ul');
+                    this.listData = listData;
+                    this.postRender(this.list, listData, this.bindEvent);
+                }
+                else if ((!virtualUlElement)) {
+                    this.list.innerHTML = '';
+                    this.list.appendChild(ulElement);
+                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                    this.ulElement = this.list.querySelector('ul');
+                    this.listData = listData;
+                    this.postRender(this.list, listData, this.bindEvent);
+                }
+            }
         }
         else {
             ulElement = this.createListItems(listData, fields);
+            if (this.isVirtualizationEnabled) {
+                var oldUlElement = this.list.querySelector('.e-list-parent');
+                var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
+                if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
+                    virtualUlElement.replaceChild(ulElement, oldUlElement);
+                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                    this.ulElement = this.list.querySelector('ul');
+                    this.listData = listData;
+                    this.postRender(this.list, listData, this.bindEvent);
+                }
+                else if ((!virtualUlElement)) {
+                    this.list.innerHTML = '';
+                    this.list.appendChild(ulElement);
+                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                    this.ulElement = this.list.querySelector('ul');
+                    this.listData = listData;
+                    this.postRender(this.list, listData, this.bindEvent);
+                }
+            }
         }
         return ulElement;
     };
@@ -1140,7 +1580,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownBase.prototype.updateSelectElementData = function (isFiltering) {
-        if (isFiltering && isNullOrUndefined(this.selectData) && this.listData && this.listData.length > 0) {
+        if ((isFiltering || this.isVirtualizationEnabled) && isNullOrUndefined(this.selectData) && this.listData && this.listData.length > 0) {
             this.selectData = this.listData;
         }
     };
@@ -1154,6 +1594,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     DropDownBase.prototype.updateDataSource = function (props) {
         this.resetList(this.dataSource);
+        this.totalItemCount = this.dataSource instanceof DataManager ? this.dataSource.dataSource.json.length : 0;
     };
     DropDownBase.prototype.setUpdateInitial = function (props, newProp) {
         this.isDataFetched = false;
@@ -1587,6 +2028,7 @@ var dropDownListClasses = {
     disable: dropDownBaseClasses.disabled,
     base: dropDownBaseClasses.root,
     focus: dropDownBaseClasses.focus,
+    content: dropDownBaseClasses.content,
     input: 'e-input-group',
     inputFocus: 'e-input-focus',
     icon: 'e-input-group-icon e-ddl-icon',
@@ -1604,7 +2046,8 @@ var dropDownListClasses = {
     clearIconHide: 'e-clear-icon-hide',
     popupFullScreen: 'e-popup-full-page',
     disableIcon: 'e-ddl-disable-icon',
-    hiddenElement: 'e-ddl-hidden'
+    hiddenElement: 'e-ddl-hidden',
+    virtualList: 'e-list-item e-virtual-list',
 };
 var inputObject = {
     container: null,
@@ -1632,9 +2075,52 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
      */
     function DropDownList(options, element) {
         var _this = _super.call(this, options, element) || this;
+        _this.skeletonCount = 32;
         _this.isListSearched = false;
         _this.preventChange = false;
         _this.isAngular = false;
+        _this.itemCount = 10;
+        _this.virtualListHeight = 0;
+        _this.isVirtualScrolling = false;
+        _this.isPreventScrollAction = false;
+        _this.scrollPreStartIndex = 0;
+        _this.isScrollActionTriggered = false;
+        _this.previousStartIndex = 0;
+        _this.isMouseScrollAction = false;
+        _this.isKeyBoardAction = false;
+        _this.isUpwardScrolling = false;
+        _this.startIndex = 0;
+        _this.currentPageNumber = 0;
+        _this.pageCount = 0;
+        _this.isPreventKeyAction = false;
+        _this.generatedDataObject = {};
+        _this.virtualListInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        _this.viewPortInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        _this.selectedValueInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        _this.IsScrollerAtEnd = function () {
+            return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
+        };
         return _this;
     }
     /**
@@ -1693,14 +2179,31 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             hide: 'alt+38',
             space: '32'
         };
+        this.viewPortInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: this.itemCount,
+        };
     };
     DropDownList.prototype.setZIndex = function () {
         if (this.popupObj) {
             this.popupObj.setProperties({ 'zIndex': this.zIndex });
         }
     };
+    DropDownList.prototype.requiredModules = function () {
+        var modules = [];
+        if (this.enableVirtualization) {
+            modules.push({ args: [this], member: 'VirtualScroll' });
+        }
+        return modules;
+    };
     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;
         this.unWireListEvents();
         this.wireListEvents();
     };
@@ -1718,6 +2221,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.resetHandler = function (e) {
         e.preventDefault();
         this.clearAll(e);
+        if (this.enableVirtualization) {
+            this.list.scrollTop = 0;
+            this.virtualListInfo = null;
+            this.previousStartIndex = 0;
+            this.previousEndIndex = 0;
+        }
     };
     DropDownList.prototype.resetFocusElement = function () {
         this.removeHover();
@@ -1726,6 +2235,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.list.scrollTop = 0;
         if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {
             var li = this.ulElement.querySelector('.' + dropDownListClasses.li);
+            if (this.enableVirtualization) {
+                li = this.liCollections[this.skeletonCount];
+            }
             if (li) {
                 li.classList.add(dropDownListClasses.focus);
             }
@@ -1744,6 +2256,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             return;
         }
         this.onChangeEvent(e);
+        this.checkAndResetCache();
+        if (this.enableVirtualization) {
+            this.updateInitialData();
+        }
     };
     DropDownList.prototype.resetSelection = function (properties) {
         if (this.list) {
@@ -1810,10 +2326,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     this.inputWrapper.container.setAttribute('style', this.htmlAttributes["" + htmlAttr]);
                 }
                 else if (htmlAttr === 'aria-label') {
-                    if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
+                    if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') && !this.readonly) {
                         this.inputElement.setAttribute('aria-label', this.htmlAttributes["" + htmlAttr]);
                     }
-                    else {
+                    else if (this.getModuleName() === 'dropdownlist') {
                         this.inputWrapper.container.setAttribute('aria-label', this.htmlAttributes["" + htmlAttr]);
                     }
                 }
@@ -1913,6 +2429,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         return item;
     };
     DropDownList.prototype.initValue = function () {
+        this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
             this.initRemoteRender = true;
@@ -1922,6 +2440,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownList.prototype.updateValues = function () {
+        this.selectedValueInfo = this.viewPortInfo;
         if (!isNullOrUndefined(this.value)) {
             this.setSelection(this.getElementByValue(this.value), null);
         }
@@ -2110,6 +2629,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     };
     DropDownList.prototype.onMouseClick = function (e) {
         var target = e.target;
+        this.keyboardEvent = null;
         var li = closest(target, '.' + dropDownBaseClasses.li);
         if (!this.isValidLI(li)) {
             return;
@@ -2190,6 +2710,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
+        this.keyboardEvent = e;
+        if (this.isPreventKeyAction && this.enableVirtualization) {
+            e.preventDefault();
+        }
         var preventAction = e.action === 'pageUp' || e.action === 'pageDown';
         var preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');
         this.isEscapeKey = e.action === 'escape';
@@ -2229,9 +2753,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     e.preventDefault();
                     break;
                 case 'home':
+                    this.isMouseScrollAction = true;
                     this.updateHomeEndAction(e);
                     break;
                 case 'end':
+                    this.isMouseScrollAction = true;
                     this.updateHomeEndAction(e);
                     break;
                 case 'space':
@@ -2265,13 +2791,19 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    DropDownList.prototype.updateUpDownAction = function (e) {
+    DropDownList.prototype.updateUpDownAction = function (e, isVirtualKeyAction) {
         var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
-        if (this.isSelectFocusItem(focusEle)) {
+        if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
             this.setSelection(focusEle, e);
+            if (this.enableVirtualization) {
+                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);
+            }
         }
         else if (!isNullOrUndefined(this.liCollections)) {
+            var virtualIndex = this.activeIndex;
             var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;
+            index = isVirtualKeyAction ? virtualIndex : index;
             var startIndex = 0;
             if (this.getModuleName() === 'autocomplete') {
                 startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;
@@ -2279,8 +2811,26 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
             var nextItem = void 0;
             if (this.getModuleName() !== 'autocomplete' || this.getModuleName() === 'autocomplete' && this.isPopupOpen) {
-                nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex]
-                    : this.liCollections[index];
+                if (!this.enableVirtualization) {
+                    nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex]
+                        : this.liCollections[index];
+                }
+                else {
+                    if (!isVirtualKeyAction) {
+                        nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[this.skeletonCount]
+                            : this.liCollections[index];
+                        nextItem = !isNullOrUndefined(nextItem) && !nextItem.classList.contains('e-virtual-list') ? nextItem : null;
+                    }
+                    else {
+                        if (this.getModuleName() === 'autocomplete') {
+                            var value = this.selectedLI.dataset.value;
+                            nextItem = this.getElementByValue(value);
+                        }
+                        else {
+                            nextItem = this.getElementByValue(this.getItemData().value);
+                        }
+                    }
+                }
             }
             if (!isNullOrUndefined(nextItem)) {
                 this.setSelection(nextItem, e);
@@ -2288,17 +2838,23 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         e.preventDefault();
     };
-    DropDownList.prototype.updateHomeEndAction = function (e) {
+    DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
             var findLi = 0;
             if (e.action === 'home') {
                 findLi = 0;
+                if (this.enableVirtualization) {
+                    findLi = this.skeletonCount;
+                }
             }
             else {
                 findLi = this.getItems().length - 1;
             }
             e.preventDefault();
             if (this.activeIndex === findLi) {
+                if (isVirtualKeyAction) {
+                    this.setSelection(this.liCollections[findLi], e);
+                }
                 return;
             }
             this.setSelection(this.liCollections[findLi], e);
@@ -2336,6 +2892,36 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    DropDownList.prototype.handleVirtualKeyboardActions = function (e, pageCount) {
+        switch (e.action) {
+            case 'down':
+            case 'up':
+                if (this.itemData != null || this.getModuleName() === 'autocomplete') {
+                    this.updateUpDownAction(e, true);
+                }
+                break;
+            case 'pageUp':
+                var count = (pageCount * 2) - 4;
+                this.activeIndex = Math.round(count);
+                this.pageUpSelection(this.activeIndex - this.getPageCount(), e, true);
+                e.preventDefault();
+                break;
+            case 'pageDown':
+                this.activeIndex = 1;
+                this.pageDownSelection(this.activeIndex + this.getPageCount(), e, true);
+                e.preventDefault();
+                break;
+            case 'home':
+                this.isMouseScrollAction = true;
+                this.updateHomeEndAction(e, true);
+                break;
+            case 'end':
+                this.isMouseScrollAction = true;
+                this.updateHomeEndAction(e, true);
+                break;
+        }
+        this.keyboardEvent = null;
+    };
     DropDownList.prototype.selectCurrentItem = function (e) {
         if (this.isPopupOpen) {
             var li = this.list.querySelector('.' + dropDownListClasses.focus);
@@ -2357,19 +2943,39 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.isSelectFocusItem = function (element) {
         return !isNullOrUndefined(element);
     };
-    DropDownList.prototype.getPageCount = function () {
+    DropDownList.prototype.getPageCount = function (returnExactCount) {
         var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
             getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
-        return Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
+        var pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
+        return returnExactCount ? pageCount : Math.round(pageCount);
     };
-    DropDownList.prototype.pageUpSelection = function (steps, event) {
+    DropDownList.prototype.pageUpSelection = function (steps, event, isVirtualKeyAction) {
         var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
-        this.setSelection(previousItem, event);
+        if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
+            previousItem = 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];
+        }
+        this.PageUpDownSelection(previousItem, event);
+    };
+    DropDownList.prototype.PageUpDownSelection = function (previousItem, event) {
+        if (this.enableVirtualization) {
+            if (!isNullOrUndefined(previousItem) && ((this.getModuleName() !== 'autocomplete' && !previousItem.classList.contains('e-active')) || (this.getModuleName() === 'autocomplete' && !previousItem.classList.contains('e-item-focus')))) {
+                this.setSelection(previousItem, event);
+            }
+        }
+        else {
+            this.setSelection(previousItem, event);
+        }
     };
-    DropDownList.prototype.pageDownSelection = function (steps, event) {
+    DropDownList.prototype.pageDownSelection = function (steps, event, isVirtualKeyAction) {
         var list = this.getItems();
         var previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];
-        this.setSelection(previousItem, event);
+        if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
+            previousItem = steps <= list.length ? this.liCollections[steps + this.skeletonCount - 1] : this.liCollections[list.length - 1];
+        }
+        this.PageUpDownSelection(previousItem, event);
     };
     DropDownList.prototype.unWireEvent = function () {
         if (!isNullOrUndefined(this.inputWrapper)) {
@@ -2434,6 +3040,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (e.which === 3 || e.button === 2) {
             return;
         }
+        this.keyboardEvent = null;
         if (this.targetElement().classList.contains(dropDownListClasses.disable) || this.inputWrapper.clearButton === e.target) {
             return;
         }
@@ -2579,6 +3186,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             this.setSelectOptions(li, e);
+            if (this.enableVirtualization) {
+                var fields = (this.fields.value) ? this.fields.value : '';
+                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);
+                }
+            }
         }
     };
     DropDownList.prototype.setSelectOptions = function (li, e) {
@@ -2837,6 +3452,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     this.typedString = this.filterInput.value;
                     this.preventAutoFill = false;
                     this.searchLists(e);
+                    if (this.enableVirtualization) {
+                        this.getFilteringSkeletonCount();
+                    }
                     break;
             }
         }
@@ -2844,6 +3462,33 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.isValidKey = false;
         }
     };
+    DropDownList.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;
+        if (!this.list.classList.contains(dropDownBaseClasses.noData)) {
+            var isSkeletonCountChange = currentSkeletonCount !== this.skeletonCount;
+            if (currentSkeletonCount !== this.skeletonCount) {
+                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();
+        }
+    };
+    DropDownList.prototype.getSkeletonCount = function (retainSkeleton) {
+        this.virtualListHeight = this.listHeight != null ? parseInt(this.listHeight, 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.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;
+        this.skeletonCount = Math.floor(this.skeletonCount / 2) + 2;
+    };
     DropDownList.prototype.onFilterDown = function (e) {
         switch (e.keyCode) {
             case 13: //enter
@@ -2887,6 +3532,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         else {
             filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
         }
+        if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0)) {
+            var takeValue = this.getTakeValue();
+            if (this.allowFiltering) {
+                filterQuery.skip(this.virtualItemStartIndex);
+            }
+            filterQuery.take(takeValue);
+            filterQuery.requiresCount();
+        }
         return filterQuery;
     };
     DropDownList.prototype.getSelectionPoints = function () {
@@ -2904,6 +3557,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         this.isDataFetched = false;
         if (this.isFiltering()) {
+            this.checkAndResetCache();
             var eventArgs_1 = {
                 preventDefaultAction: false,
                 text: this.filterInput.value,
@@ -2941,10 +3595,30 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.filterInput)) {
             this.beforePopupOpen = (!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') ?
                 false : true;
+            var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
             if (this.filterInput.value.trim() === '' && !this.itemTemplate) {
                 this.actionCompleteData.isUpdated = false;
                 this.isTyped = false;
                 if (!isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {
+                    if (this.enableVirtualization) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+                        this.resetList(dataSource, fields, query);
+                        if (isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+                            if (!this.list.querySelector('.e-virtual-ddl-content')) {
+                                this.list.appendChild(this.createElement('div', {
+                                    className: 'e-virtual-ddl-content',
+                                    styles: this.getTransformValues()
+                                })).appendChild(this.list.querySelector('.e-list-parent'));
+                            }
+                            if (!this.list.querySelector('.e-virtual-ddl')) {
+                                var virualElement = this.createElement('div', {
+                                    id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                                });
+                                document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                            }
+                        }
+                    }
                     this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list);
                 }
                 this.isTyped = true;
@@ -2957,7 +3631,30 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             else {
                 this.isNotSearchList = false;
                 query = (this.filterInput.value.trim() === '') ? null : query;
+                if (this.enableVirtualization && this.isFiltering() && this.isTyped) {
+                    this.isPreventScrollAction = true;
+                    this.list.scrollTop = 0;
+                    this.previousStartIndex = 0;
+                    this.virtualListInfo = null;
+                }
                 this.resetList(dataSource, fields, query);
+                if (this.enableVirtualization && isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+                    if (!this.list.querySelector('.e-virtual-ddl-content')) {
+                        this.list.appendChild(this.createElement('div', {
+                            className: 'e-virtual-ddl-content',
+                            styles: this.getTransformValues()
+                        })).appendChild(this.list.querySelector('.e-list-parent'));
+                    }
+                    if (!this.list.querySelector('.e-virtual-ddl')) {
+                        var virualElement = this.createElement('div', {
+                            id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                        });
+                        document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                    }
+                }
+            }
+            if (this.enableVirtualization) {
+                this.getFilteringSkeletonCount();
             }
             this.renderReactTemplates();
         }
@@ -3055,16 +3752,48 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.renderPopup();
         }
     };
+    DropDownList.prototype.UpdateSkeleton = function (isSkeletonCountChange, skeletonCount) {
+        var isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
+        var isContainVirtualList = this.list.querySelector('.e-virtual-list');
+        if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.enableVirtualization) {
+            var totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
+            for (var i = 0; i < totalSkeletonCount; i++) {
+                var liElement = this.createElement('li', { className: dropDownListClasses.virtualList, styles: 'overflow: inherit' });
+                if (this.enableVirtualization && this.itemTemplate) {
+                    liElement.style.height = this.listItemHeight + 'px';
+                }
+                var skeleton = new Skeleton({
+                    shape: "Text",
+                    height: "10px",
+                    width: "95%",
+                    cssClass: "e-skeleton-text",
+                });
+                skeleton.appendTo(this.createElement('div'));
+                liElement.appendChild(skeleton.element);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
+            }
+        }
+    };
+    DropDownList.prototype.getTakeValue = function () {
+        return this.allowFiltering && this.getModuleName() === 'dropdownlist' && Browser.isDevice ? Math.round(window.outerHeight / this.listItemHeight) : this.itemCount;
+    };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
         var _this = this;
-        if (this.isNotSearchList) {
+        if (this.dataSource instanceof DataManager && !isNullOrUndefined(e)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = e.count;
+        }
+        if (this.isNotSearchList && !this.enableVirtualization) {
             this.isNotSearchList = false;
             return;
         }
+        var tempItemCount = this.itemCount;
         if (this.isActive || !isNullOrUndefined(ulElement)) {
             var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;
             _super.prototype.onActionComplete.call(this, ulElement, list, e);
+            this.skeletonCount = this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2) ? 0 : this.skeletonCount;
             this.updateSelectElementData(this.allowFiltering);
             if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent) && this.searchKeyEvent.type === 'keydown') {
                 this.isRequested = false;
@@ -3075,7 +3804,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.incrementalSearch(this.searchKeyEvent);
                 this.searchKeyEvent = null;
             }
-            this.list.scrollTop = 0;
+            if (!this.enableVirtualization) {
+                this.list.scrollTop = 0;
+            }
             if (!isNullOrUndefined(ulElement)) {
                 attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
             }
@@ -3129,13 +3860,36 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         this.updateActionCompleteDataValues(ulElement, list);
                     }
                 }
-                this.addNewItem(list, selectedItem);
-                if (!isNullOrUndefined(this.itemData)) {
+                if (!this.enableVirtualization) {
+                    this.addNewItem(list, selectedItem);
+                }
+                if (!isNullOrUndefined(this.itemData) || (isNullOrUndefined(this.itemData) && this.enableVirtualization)) {
                     this.focusIndexItem();
                 }
+                if (this.enableVirtualization) {
+                    this.updateActionCompleteDataValues(ulElement, list);
+                }
+            }
+            else if (this.enableVirtualization && this.getModuleName() !== 'autocomplete' && !this.isFiltering()) {
+                var value = this.getItemData().value;
+                this.activeIndex = this.getIndexByValue(value);
+                var element = this.findListElement(this.list, 'li', 'data-value', value);
+                this.selectedLI = element;
+            }
+            else if (this.enableVirtualization && this.getModuleName() === 'autocomplete') {
+                this.activeIndex = this.skeletonCount;
             }
             if (this.beforePopupOpen) {
                 this.renderPopup(e);
+                if (this.enableVirtualization) {
+                    if (!this.list.querySelector('.e-virtual-list')) {
+                        this.UpdateSkeleton();
+                        this.liCollections = this.list.querySelectorAll('.e-list-item');
+                    }
+                }
+                if (this.enableVirtualization && tempItemCount != this.itemCount) {
+                    this.resetList(this.dataSource, this.fields);
+                }
             }
         }
     };
@@ -3198,7 +3952,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var element = this.findListElement(this.list, 'li', 'data-value', value);
         this.selectedLI = element;
         this.activeItem(element);
-        this.removeFocus();
+        if (!(this.enableVirtualization && isNullOrUndefined(element))) {
+            this.removeFocus();
+        }
     };
     DropDownList.prototype.updateSelection = function () {
         var selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);
@@ -3211,12 +3967,46 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);
         }
     };
+    DropDownList.prototype.updateSelectionList = function () {
+        var selectedItem = this.list && this.list.querySelector('.' + 'e-active');
+        if (!selectedItem && !isNullOrUndefined(this.value)) {
+            var findEle = this.findListElement(this.list, 'li', 'data-value', this.value);
+            if (findEle) {
+                findEle.classList.add('e-active');
+            }
+        }
+    };
+    DropDownList.prototype.checkAndResetCache = function () {
+        if (this.enableVirtualization) {
+            this.generatedDataObject = {};
+            this.virtualItemStartIndex = this.virtualItemEndIndex = 0;
+            this.viewPortInfo = { currentPageNumber: null,
+                direction: null,
+                sentinelInfo: {},
+                offsets: {},
+                startIndex: 0,
+                endIndex: this.itemCount, };
+            this.selectedValueInfo = null;
+        }
+    };
     DropDownList.prototype.removeFocus = function () {
         var highlightedItem = this.list.querySelectorAll('.' + dropDownListClasses.focus);
         if (highlightedItem && highlightedItem.length) {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     };
+    DropDownList.prototype.getTransformValues = function () {
+        var translateY = this.viewPortInfo.startIndex * this.listItemHeight;
+        translateY = translateY - (this.skeletonCount * this.listItemHeight);
+        translateY = this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0 ? 0 : translateY;
+        var styleText = "transform: translate(0px, " + translateY + "px);";
+        return styleText;
+    };
+    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;";
+        return heightDimension;
+    };
     DropDownList.prototype.renderPopup = function (e) {
         var _this = this;
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
@@ -3239,10 +4029,39 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     _this.setFooterTemplate(popupEle);
                 }
                 document.body.appendChild(popupEle);
+                if (_this.enableVirtualization && _this.itemTemplate) {
+                    var listitems = popupEle.querySelectorAll('li.e-list-item:not(.e-virtual-list)');
+                    _this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) : 0;
+                }
+                if (_this.enableVirtualization && !_this.list.classList.contains(dropDownBaseClasses.noData)) {
+                    if (!_this.list.querySelector('.e-virtual-ddl-content')) {
+                        _this.list.appendChild(_this.createElement('div', {
+                            className: 'e-virtual-ddl-content',
+                            styles: _this.getTransformValues()
+                        })).appendChild(_this.list.querySelector('.e-list-parent'));
+                    }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        _this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = _this.getTransformValues();
+                    }
+                    _this.UpdateSkeleton();
+                    _this.liCollections = _this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                    _this.virtualItemCount = _this.itemCount;
+                    if (!_this.list.querySelector('.e-virtual-ddl')) {
+                        var virualElement = _this.createElement('div', {
+                            id: _this.element.id + '_popup', className: 'e-virtual-ddl', styles: _this.GetVirtualTrackHeight()
+                        });
+                        popupEle.querySelector('.e-dropdownbase').appendChild(virualElement);
+                    }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        _this.list.getElementsByClassName('e-virtual-ddl')[0].style = _this.GetVirtualTrackHeight();
+                    }
+                }
                 popupEle.style.visibility = 'hidden';
                 if (_this.popupHeight !== 'auto') {
                     _this.searchBoxHeight = 0;
-                    if (!isNullOrUndefined(searchBox.container)) {
+                    if (!isNullOrUndefined(searchBox.container) && _this.getModuleName() !== 'combobox' && _this.getModuleName() !== 'autocomplete') {
                         _this.searchBoxHeight = (searchBox.container.parentElement).getBoundingClientRect().height;
                         _this.listHeight = (parseInt(_this.listHeight, 10) - (_this.searchBoxHeight)).toString() + 'px';
                     }
@@ -3264,9 +4083,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
                 var offsetValue = 0;
                 var left = void 0;
+                _this.isPreventScrollAction = true;
                 if (!isNullOrUndefined(_this.selectedLI) && (!isNullOrUndefined(_this.activeIndex) && _this.activeIndex >= 0)) {
                     _this.setScrollPosition();
                 }
+                else if (_this.enableVirtualization) {
+                    _this.setScrollPosition();
+                }
                 else {
                     _this.list.scrollTop = 0;
                 }
@@ -3282,6 +4105,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
                 _this.getFocusElement();
                 _this.createPopup(popupEle, offsetValue, left);
+                _this.popupContentElement = _this.popupObj.element.querySelector('.e-content');
                 _this.checkCollision(popupEle);
                 if (Browser.isDevice) {
                     _this.popupObj.element.classList.add(dropDownListClasses.device);
@@ -3314,6 +4138,24 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     _this.wireListEvents();
                 }
                 _this.selectedElementID = _this.selectedLI ? _this.selectedLI.id : null;
+                if (_this.enableVirtualization) {
+                    _this.notify("bindScrollEvent", {
+                        module: "VirtualScroll",
+                        component: _this.getModuleName(),
+                        enable: _this.enableVirtualization,
+                    });
+                    setTimeout(function () {
+                        if (_this.value) {
+                            _this.updateSelectionList();
+                            if (_this.selectedValueInfo && _this.viewPortInfo && _this.viewPortInfo.offsets.top) {
+                                _this.list.scrollTop = _this.viewPortInfo.offsets.top;
+                            }
+                            else {
+                                _this.scrollBottom(true, true);
+                            }
+                        }
+                    }, 5);
+                }
                 attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_options' });
                 _this.inputElement.setAttribute('aria-expanded', 'true');
                 var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;
@@ -3362,7 +4204,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         this.popupObj = new Popup(element, {
             width: this.setWidth(), targetType: 'relative',
-            relateTo: this.inputWrapper.container, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,
+            relateTo: this.inputWrapper.container,
+            collision: this.enableRtl ? { X: 'fit', Y: 'flip' } : { X: 'flip', Y: 'flip' }, offsetY: offsetValue,
             enableRtl: this.enableRtl, offsetX: left,
             position: this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' },
             zIndex: this.zIndex,
@@ -3448,6 +4291,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
         var lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];
         var liHeight = firstItem.getBoundingClientRect().height;
+        this.listItemHeight = liHeight;
         var listHeight = this.list.offsetHeight / 2;
         var height = isNullOrUndefined(selectedLI) ? firstItem.offsetTop : selectedLI.offsetTop;
         var lastItemOffsetValue = lastItem.offsetTop;
@@ -3458,7 +4302,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             offsetValue = (count - (this.liCollections.length - this.activeIndex)) * liHeight - popupOffset + paddingBottom;
             this.list.scrollTop = selectedLI.offsetTop;
         }
-        else if (height > listHeight) {
+        else if (height > listHeight && !this.enableVirtualization) {
             offsetValue = listHeight - liHeight / 2;
             this.list.scrollTop = height - listHeight + liHeight / 2;
         }
@@ -3484,34 +4328,113 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         return width;
     };
-    DropDownList.prototype.scrollBottom = function (isInitial) {
+    DropDownList.prototype.scrollBottom = function (isInitial, isInitialSelection, keyAction) {
+        if (isInitialSelection === void 0) { isInitialSelection = false; }
+        if (keyAction === void 0) { keyAction = null; }
+        if (isNullOrUndefined(this.selectedLI) && this.enableVirtualization) {
+            this.selectedLI = this.list.querySelector('.' + dropDownBaseClasses.li);
+            if (!isNullOrUndefined(this.selectedLI) && this.selectedLI.classList.contains('e-virtual-list')) {
+                this.selectedLI = this.liCollections[this.skeletonCount];
+            }
+        }
         if (!isNullOrUndefined(this.selectedLI)) {
+            this.isUpwardScrolling = false;
+            var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+            var lastElementValue = this.list.querySelector('li:last-of-type') ? this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;
+            var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
             var currentOffset = this.list.offsetHeight;
-            var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
+            var nextBottom = selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) + this.selectedLI.offsetHeight - this.list.scrollTop;
             var nextOffset = this.list.scrollTop + nextBottom - currentOffset;
-            nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;
-            var boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
+            var isScrollerCHanged = false;
+            nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10);
+            var boxRange = selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) + this.selectedLI.offsetHeight - this.list.scrollTop;
             boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
                 boxRange - this.fixedHeaderElement.offsetHeight : boxRange;
-            if (this.activeIndex === 0) {
+            if (this.activeIndex === 0 && !this.enableVirtualization) {
                 this.list.scrollTop = 0;
+                isScrollerCHanged = this.isKeyBoardAction;
             }
             else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {
-                this.list.scrollTop = nextOffset;
+                var currentElementValue = this.selectedLI ? this.selectedLI.getAttribute('data-value') : null;
+                var liCount = keyAction == "pageDown" ? this.getPageCount() - 2 : 1;
+                if (!this.enableVirtualization || this.isKeyBoardAction || isInitialSelection) {
+                    if (this.isKeyBoardAction && this.enableVirtualization && lastElementValue && currentElementValue === lastElementValue && keyAction != "end" && !this.isVirtualScrolling) {
+                        this.isPreventKeyAction = true;
+                        if (this.enableVirtualization && this.itemTemplate) {
+                            this.list.scrollTop += nextOffset;
+                        }
+                        else {
+                            this.list.scrollTop += this.selectedLI.offsetHeight * liCount;
+                        }
+                        this.isPreventKeyAction = this.IsScrollerAtEnd() ? false : this.isPreventKeyAction;
+                        this.isKeyBoardAction = false;
+                        this.isPreventScrollAction = false;
+                    }
+                    else if (this.enableVirtualization && keyAction == "end") {
+                        this.isPreventKeyAction = false;
+                        this.isKeyBoardAction = false;
+                        this.isPreventScrollAction = false;
+                        this.list.scrollTop = this.list.scrollHeight;
+                    }
+                    else {
+                        if (keyAction == "pageDown" && this.enableVirtualization && !this.isVirtualScrolling) {
+                            this.isPreventKeyAction = false;
+                            this.isKeyBoardAction = false;
+                            this.isPreventScrollAction = false;
+                            nextOffset = nextOffset + (this.selectedLI.offsetHeight * liCount);
+                        }
+                        this.list.scrollTop = nextOffset;
+                    }
+                }
+                else {
+                    this.list.scrollTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight : 0;
+                }
+                isScrollerCHanged = this.isKeyBoardAction;
+                
             }
+            this.isKeyBoardAction = isScrollerCHanged;
         }
     };
-    DropDownList.prototype.scrollTop = function () {
+    DropDownList.prototype.scrollTop = function (keyAction) {
+        if (keyAction === void 0) { keyAction = null; }
         if (!isNullOrUndefined(this.selectedLI)) {
-            var nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;
+            var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+            var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+            var nextOffset = selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) - this.list.scrollTop;
+            var firstElementValue = this.list.querySelector('li.e-list-item:not(.e-virtual-list)') ? this.list.querySelector('li.e-list-item:not(.e-virtual-list)').getAttribute('data-value') : null;
             nextOffset = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
                 nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;
-            var boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);
-            if (this.activeIndex === 0) {
+            var boxRange = (selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) + this.selectedLI.offsetHeight - this.list.scrollTop);
+            var isPageUpKeyAction = this.enableVirtualization && this.getModuleName() === 'autocomplete' && nextOffset <= 0;
+            if (this.activeIndex === 0 && !this.enableVirtualization) {
                 this.list.scrollTop = 0;
             }
-            else if (nextOffset < 0) {
-                this.list.scrollTop = this.list.scrollTop + nextOffset;
+            else if (nextOffset < 0 || isPageUpKeyAction) {
+                var currentElementValue = this.selectedLI ? this.selectedLI.getAttribute('data-value') : null;
+                var liCount = keyAction == "pageUp" ? this.getPageCount() - 2 : 1;
+                if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue && currentElementValue === firstElementValue && keyAction != "home" && !this.isVirtualScrolling) {
+                    this.isUpwardScrolling = true;
+                    this.isPreventKeyAction = true;
+                    this.list.scrollTop -= this.selectedLI.offsetHeight * liCount;
+                    this.isPreventKeyAction = this.list.scrollTop != 0 ? this.isPreventKeyAction : false;
+                    this.isKeyBoardAction = false;
+                    this.isPreventScrollAction = false;
+                }
+                else if (this.enableVirtualization && keyAction == "home") {
+                    this.isPreventScrollAction = false;
+                    this.isPreventKeyAction = true;
+                    this.isKeyBoardAction = false;
+                    this.list.scrollTo(0, 0);
+                }
+                else {
+                    if (keyAction == "pageUp" && this.enableVirtualization && !this.isVirtualScrolling) {
+                        this.isPreventKeyAction = false;
+                        this.isKeyBoardAction = false;
+                        this.isPreventScrollAction = false;
+                        nextOffset = nextOffset - (this.selectedLI.offsetHeight * liCount);
+                    }
+                    this.list.scrollTop = this.list.scrollTop + nextOffset;
+                }
             }
             else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {
                 this.list.scrollTop = this.selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
@@ -3529,25 +4452,47 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         return true;
     };
     DropDownList.prototype.setScrollPosition = function (e) {
+        this.isPreventScrollAction = true;
         if (!isNullOrUndefined(e)) {
             switch (e.action) {
                 case 'pageDown':
                 case 'down':
                 case 'end':
-                    this.scrollBottom();
+                    this.isKeyBoardAction = true;
+                    this.scrollBottom(false, false, e.action);
                     break;
                 default:
-                    this.scrollTop();
+                    this.isKeyBoardAction = e.action == 'up' || e.action == 'pageUp' || e.action == 'open';
+                    this.scrollTop(e.action);
                     break;
             }
         }
         else {
             this.scrollBottom(true);
         }
+        this.isKeyBoardAction = false;
     };
     DropDownList.prototype.clearText = function () {
         this.filterInput.value = this.typedString = '';
         this.searchLists(null);
+        if (this.enableVirtualization) {
+            this.list.scrollTop = 0;
+            // 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
+                this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+            }
+            this.getSkeletonCount();
+            this.UpdateSkeleton();
+            this.liCollections = this.list.querySelectorAll('.e-list-item');
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (this.list.getElementsByClassName('e-virtual-ddl-content')[0]) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+            }
+        }
     };
     DropDownList.prototype.setEleWidth = function (width) {
         if (!isNullOrUndefined(width)) {
@@ -3561,10 +4506,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     };
     DropDownList.prototype.closePopup = function (delay, e) {
         var _this = this;
+        var isFilterValue = !isNullOrUndefined(this.filterInput) && !isNullOrUndefined(this.filterInput.value) && this.filterInput.value !== '';
+        var typedString = this.getModuleName() === 'combobox' ? this.typedString : null;
         this.isTyped = false;
         if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {
             return;
         }
+        this.keyboardEvent = null;
         EventHandler.remove(document, 'mousedown', this.onDocumentClick);
         this.isActive = false;
         this.filterInputObj = null;
@@ -3606,6 +4554,20 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (this.isFiltering()) {
             this.actionCompleteData.isUpdated = false;
         }
+        if (this.enableVirtualization) {
+            if ((this.value == null || this.isTyped)) {
+                this.viewPortInfo.endIndex = this.viewPortInfo && this.viewPortInfo.endIndex > 0 ? this.viewPortInfo.endIndex : this.itemCount;
+                if (this.getModuleName() === 'autocomplete' || (this.getModuleName() === 'dropdownlist' && !isNullOrUndefined(this.typedString) && this.typedString != "") || (this.getModuleName() === 'combobox' && this.allowFiltering && !isNullOrUndefined(this.typedString) && this.typedString != "")) {
+                    this.checkAndResetCache();
+                }
+            }
+            else if (this.getModuleName() === 'autocomplete') {
+                this.checkAndResetCache();
+            }
+            if ((this.getModuleName() === 'dropdownlist' || this.getModuleName() === 'combobox') && !(this.skeletonCount == 0)) {
+                this.getSkeletonCount(true);
+            }
+        }
         this.beforePopupOpen = false;
         var animModel = {
             name: 'FadeOut',
@@ -3636,6 +4598,46 @@ var DropDownList = /** @__PURE__ @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;
+        if (this.enableVirtualization && this.isFiltering() && this.value != null && isFilterValue && this.totalItemCount !== dataSourceCount) {
+            this.updateInitialData();
+            this.checkAndResetCache();
+        }
+    };
+    DropDownList.prototype.updateInitialData = function () {
+        var currentData = this.selectData;
+        var ulElement = this.renderItems(currentData, this.fields);
+        this.list.scrollTop = 0;
+        this.virtualListInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        if (this.getModuleName() === 'combobox') {
+            this.typedString = "";
+        }
+        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;
+        // 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
+            this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+        }
+        this.getSkeletonCount();
+        this.UpdateSkeleton();
+        this.listData = currentData;
+        this.updateActionCompleteDataValues(ulElement, currentData);
+        this.liCollections = this.list.querySelectorAll('.e-list-item');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.list.getElementsByClassName('e-virtual-ddl-content')[0]) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+        }
     };
     DropDownList.prototype.destroyPopup = function () {
         this.isPopupOpen = false;
@@ -3722,10 +4724,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.element.id = id;
         this.hiddenElement.id = id + '_hidden';
         this.targetElement().setAttribute('tabindex', this.tabIndex);
-        if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
+        if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') && !this.readonly) {
             this.inputElement.setAttribute('aria-label', this.getModuleName());
         }
-        else {
+        else if (this.getModuleName() === 'dropdownlist') {
             attributes(this.targetElement(), { 'aria-label': this.getModuleName() });
         }
         attributes(this.targetElement(), this.getAriaAttributes());
@@ -3735,7 +4737,16 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.inputElement.removeAttribute('aria-labelledby');
         }
         if (this.value !== null || this.activeIndex !== null || this.text !== null) {
+            if (this.enableVirtualization) {
+                this.listItemHeight = this.getListHeight();
+                this.getSkeletonCount();
+                this.updateVirtualizationProperties(this.itemCount, this.allowFiltering);
+            }
             this.initValue();
+            this.selectedValueInfo = this.viewPortInfo;
+            if (this.enableVirtualization) {
+                this.activeIndex = this.activeIndex + this.skeletonCount;
+            }
         }
         else if (this.element.tagName === 'SELECT' && this.element.options[0]) {
             var selectElement = this.element;
@@ -3771,6 +4782,29 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             attributes(this.inputElement, { 'aria-labelledby': floatLabelElement.id });
         }
         this.renderComplete();
+        this.listItemHeight = this.getListHeight();
+        this.getSkeletonCount();
+        if (this.enableVirtualization) {
+            this.updateVirtualizationProperties(this.itemCount, this.allowFiltering);
+        }
+        this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.viewPortInfo.startIndex > 0 ? this.viewPortInfo.endIndex : this.itemCount;
+    };
+    DropDownList.prototype.getListHeight = function () {
+        var listParent = this.createElement('div', {
+            className: 'e-dropdownbase'
+        });
+        var item = this.createElement('li', {
+            className: 'e-list-item'
+        });
+        var listParentHeight = formatUnit(this.popupHeight);
+        listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';
+        listParent.appendChild(item);
+        document.body.appendChild(listParent);
+        this.virtualListHeight = listParent.getBoundingClientRect().height;
+        var listItemHeight = Math.ceil(item.getBoundingClientRect().height);
+        listParent.remove();
+        return listItemHeight;
     };
     DropDownList.prototype.setFooterTemplate = function (popupEle) {
         var compiledString;
@@ -3914,7 +4948,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var _loop_1 = function (prop) {
             switch (prop) {
                 case 'query':
-                case 'dataSource': break;
+                case 'dataSource':
+                    this_1.getSkeletonCount();
+                    this_1.checkAndResetCache();
+                    break;
                 case 'htmlAttributes':
                     this_1.setHTMLAttributes();
                     break;
@@ -4208,7 +5245,23 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {
             this.renderList(e);
         }
+        if (this.enableVirtualization && this.listData && this.listData.length) {
+            if (!isNullOrUndefined(this.value) && (this.getModuleName() === 'dropdownlist' || this.getModuleName() === 'combobox')) {
+                this.removeHover();
+            }
+            if (!this.beforePopupOpen) {
+                this.notify("setCurrentViewDataAsync", {
+                    module: "VirtualScroll",
+                });
+            }
+        }
         this.invokeRenderPopup(e);
+        if (this.enableVirtualization && !this.allowFiltering && this.selectedValueInfo != null && this.selectedValueInfo.startIndex > 0 && this.value != null) {
+            this.notify("dataProcessAsync", {
+                module: "VirtualScroll",
+                isOpen: true,
+            });
+        }
     };
     DropDownList.prototype.invokeRenderPopup = function (e) {
         if (Browser.isDevice && this.isFilterLayout()) {
@@ -4302,7 +5355,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
-        this.isTyped = true;
+        if (!this.enableVirtualization && this.getModuleName() === 'combobox') {
+            this.isTyped = true;
+        }
         this.hidePopup(e);
         if (this.targetElement()) {
             this.targetElement().blur();
@@ -4358,6 +5413,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.ulElement = null;
         this.list = null;
         this.popupObj = null;
+        this.popupContentElement = null;
         this.rippleFun = null;
         this.selectedLI = null;
         this.liCollections = null;
@@ -4454,6 +5510,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Property(false)
     ], DropDownList.prototype, "readonly", void 0);
+    __decorate$1([
+        Property(false)
+    ], DropDownList.prototype, "enableVirtualization", void 0);
     __decorate$1([
         Property(null)
     ], DropDownList.prototype, "text", void 0);
@@ -7963,14 +9022,18 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
                 if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {
                     this.removeFocus();
                     var fixedHead = this.fields.groupBy ? this.liCollections[0].offsetHeight : 0;
-                    this.list.scrollTop = count * height + fixedHead;
+                    if (!this.enableVirtualization) {
+                        this.list.scrollTop = count * height + fixedHead;
+                    }
                     addClass([activeElement], dropDownListClasses.focus);
                 }
             }
             else {
                 if (this.isSelectCustom && this.inputElement.value.trim() !== '') {
                     this.removeFocus();
-                    this.list.scrollTop = 0;
+                    if (!this.enableVirtualization) {
+                        this.list.scrollTop = 0;
+                    }
                 }
             }
             return activeElement;
@@ -8106,7 +9169,9 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         else if (this.inputElement.value === '') {
             this.activeIndex = null;
             if (!isNullOrUndefined(this.list)) {
-                this.list.scrollTop = 0;
+                if (!this.enableVirtualization) {
+                    this.list.scrollTop = 0;
+                }
                 var focusItem = this.list.querySelector('.' + dropDownListClasses.li);
                 this.setHoverList(focusItem);
             }
@@ -8664,7 +9729,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
                 filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
         }
-        if (!isNullOrUndefined(this.suggestionCount)) {
+        if (!isNullOrUndefined(this.suggestionCount) && !this.enableVirtualization) {
             // Since defualt value of suggestioncount is 20, checked the condition
             if (this.suggestionCount !== 20) {
                 for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
@@ -8675,12 +9740,19 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
             }
             filterQuery.take(this.suggestionCount);
         }
+        if (this.enableVirtualization) {
+            var takeValue = this.getTakeValue();
+            filterQuery.skip(this.virtualItemStartIndex);
+            filterQuery.take(takeValue);
+            filterQuery.requiresCount();
+        }
         return filterQuery;
     };
     AutoComplete.prototype.searchLists = function (e) {
         var _this_1 = this;
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
+        this.checkAndResetCache();
         if (isNullOrUndefined(this.list)) {
             _super.prototype.renderList.call(this, e, true);
         }
@@ -8727,8 +9799,32 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
     };
     AutoComplete.prototype.filterAction = function (dataSource, query, fields, e) {
         this.beforePopupOpen = true;
+        var isNoDataElement = this.list.classList.contains('e-nodata');
         if (this.queryString !== '' && (this.queryString.length >= this.minLength)) {
+            if (this.enableVirtualization && this.isFiltering() && this.isTyped) {
+                this.isPreventScrollAction = true;
+                this.list.scrollTop = 0;
+                this.previousStartIndex = 0;
+                this.virtualListInfo = null;
+            }
             this.resetList(dataSource, fields, query, e);
+            if (this.enableVirtualization && isNoDataElement && !this.list.classList.contains('e-nodata')) {
+                if (!this.list.querySelector('.e-virtual-ddl-content')) {
+                    this.list.appendChild(this.createElement('div', {
+                        className: 'e-virtual-ddl-content',
+                        styles: this.getTransformValues()
+                    })).appendChild(this.list.querySelector('.e-list-parent'));
+                }
+                if (!this.list.querySelector('.e-virtual-ddl')) {
+                    var virualElement = this.createElement('div', {
+                        id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                    });
+                    document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                }
+            }
+            if (this.enableVirtualization) {
+                this.getFilteringSkeletonCount();
+            }
         }
         else {
             this.hidePopup(e);
@@ -8739,6 +9835,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
     AutoComplete.prototype.clearAll = function (e, property) {
         if (isNullOrUndefined(property) || (!isNullOrUndefined(property) && isNullOrUndefined(property.dataSource))) {
             _super.prototype.clearAll.call(this, e);
+            this.checkAndResetCache();
         }
         if (this.beforePopupOpen) {
             this.hidePopup();
@@ -8821,7 +9918,9 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
         return true;
     };
     AutoComplete.prototype.renderPopup = function (e) {
-        this.list.scrollTop = 0;
+        if (!this.enableVirtualization) {
+            this.list.scrollTop = 0;
+        }
         _super.prototype.renderPopup.call(this, e);
     };
     AutoComplete.prototype.isEditTextBox = function () {
@@ -8889,6 +9988,10 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
     AutoComplete.prototype.hidePopup = function (e) {
         _super.prototype.hidePopup.call(this, e);
         this.activeIndex = null;
+        this.virtualListInfo = this.viewPortInfo;
+        this.previousStartIndex = this.viewPortInfo.startIndex;
+        this.startIndex = this.viewPortInfo.startIndex;
+        this.previousEndIndex = this.viewPortInfo.endIndex;
     };
     /**
      * Dynamically change the value of properties.
@@ -9425,6 +10528,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 if (_this.isFirstClick) {
                     _this.loadTemplate();
                 }
+                if (_this.mode === 'CheckBox' && _this.showSelectAll) {
+                    EventHandler.add(_this.popupObj.element, 'click', _this.clickHandler, _this);
+                }
             }
         });
     };
@@ -10431,11 +11537,19 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.spaceKeySelection = function (e) {
         if (this.mode === 'CheckBox') {
-            if (!document.activeElement.classList.contains(FILTERINPUT)) {
+            var li = this.list.querySelector('li.' + dropDownBaseClasses.focus);
+            var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+            if (!isNullOrUndefined(li) || (selectAllParent && selectAllParent.classList.contains('e-item-focus'))) {
                 e.preventDefault();
                 this.keyAction = true;
             }
             this.selectByKey(e);
+            if (this.keyAction) {
+                var li_1 = this.list.querySelector('li.' + dropDownBaseClasses.focus);
+                if (!isNullOrUndefined(li_1) && selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                    li_1.classList.remove('e-item-focus');
+                }
+            }
         }
         this.checkPlaceholderSize();
     };
@@ -10591,9 +11705,6 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
         }
         var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-        if (selectAllParent && !selectAllParent.classList.contains('e-item-focus')) {
-            e.preventDefault();
-        }
         if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
             var selectAllCheckBox = selectAllParent.childNodes[0];
             if (!selectAllCheckBox.classList.contains('e-check')) {
@@ -10666,6 +11777,14 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         this.updateAriaAttribute();
     };
+    MultiSelect.prototype.clickHandler = function (e) {
+        var targetElement = e.target;
+        var filterInputClassName = targetElement.className;
+        var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+        if ((filterInputClassName === 'e-input-filter e-input' || filterInputClassName === 'e-input-group e-control-wrapper e-input-focus') && selectAllParent.classList.contains('e-item-focus')) {
+            selectAllParent.classList.remove('e-item-focus');
+        }
+    };
     MultiSelect.prototype.moveByList = function (position) {
         if (this.list) {
             var elements = this.list.querySelectorAll('li.'
@@ -10680,12 +11799,19 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             var temp = -1;
             var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
             if (this.mode === 'CheckBox' && this.showSelectAll && position == 1 && !isNullOrUndefined(selectAllParent) && !selectAllParent.classList.contains('e-item-focus') && this.list.getElementsByClassName('e-item-focus').length == 0 && this.liCollections.length > 1) {
-                selectAllParent.classList.add('e-item-focus');
+                if (!this.focusFirstListItem && selectAllParent.classList.contains('e-item-focus')) {
+                    selectAllParent.classList.remove('e-item-focus');
+                }
+                else if (!selectAllParent.classList.contains('e-item-focus')) {
+                    selectAllParent.classList.add('e-item-focus');
+                }
             }
             else if (elements.length) {
-                if (this.mode === 'CheckBox' && this.showSelectAll && !isNullOrUndefined(selectAllParent)) {
-                    selectAllParent.classList.remove('e-item-focus');
-                    if (this.showSelectAll && position == -1 && !isNullOrUndefined(selectAllParent) && this.liCollections.length > 1 && (this.focusFirstListItem || this.list.getElementsByClassName('e-item-focus').length == 0)) {
+                if (this.mode === 'CheckBox' && this.showSelectAll && !isNullOrUndefined(selectAllParent && position == -1)) {
+                    if (!this.focusFirstListItem && selectAllParent.classList.contains('e-item-focus')) {
+                        selectAllParent.classList.remove('e-item-focus');
+                    }
+                    else if (this.focusFirstListItem && !selectAllParent.classList.contains('e-item-focus')) {
                         selectAllParent.classList.add('e-item-focus');
                     }
                 }
@@ -11284,7 +12410,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 this.popupObj = new Popup(this.popupWrapper, {
                     width: this.calcPopupWidth(), targetType: 'relative',
                     position: this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' },
-                    relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
+                    relateTo: this.overAllWrapper,
+                    collision: this.enableRtl ? { X: 'fit', Y: 'flip' } : { X: 'flip', Y: 'flip' }, offsetY: 1,
                     enableRtl: this.enableRtl, zIndex: this.zIndex,
                     close: function () {
                         if (_this.popupObj.element.parentElement) {
@@ -12958,6 +14085,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     _this.popupObj.hide();
                     removeClass([document.body, _this.popupObj.element], 'e-popup-full-page');
                     EventHandler.remove(_this.list, 'keydown', _this.onKeyDown);
+                    if (_this.mode === 'CheckBox' && _this.showSelectAll) {
+                        EventHandler.remove(_this.popupObj.element, 'click', _this.clickHandler);
+                    }
                 }
             });
         }
@@ -13721,7 +14851,7 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
     };
     CheckBoxSelection.prototype.clickHandler = function (e) {
         var target;
-        if (e.currentTarget.classList.contains(this.checkAllParent.className)) {
+        if (e.currentTarget.classList.contains(this.checkAllParent.className) || (e.currentTarget.classList.value === this.checkAllParent.className)) {
             target = e.currentTarget.firstElementChild.lastElementChild;
         }
         else {
@@ -17176,7 +18306,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 _this.trigger('opened', eventArgs, function (eventArgs) {
                     if (!eventArgs.cancel) {
                         _this.renderReactTemplates();
-                        _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.inputElement : null);
+                        if (_this.popupObj) {
+                            _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.inputElement : null);
+                        }
                         if (isNullOrUndefined(_this.getTriggerCharPosition())) {
                             return;
                         }
@@ -17889,6 +19021,11 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         if (this.inputElement && !this.inputElement.classList.contains('e-' + this.getModuleName())) {
             return;
         }
+        this.previousSelectedLI = null;
+        this.item = null;
+        this.selectedLI = null;
+        this.inputElement.innerText = null;
+        this.popupObj = null;
         _super.prototype.destroy.call(this);
     };
     Mention.prototype.getLocaleName = function () {
@@ -18019,5 +19156,5 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
  * export all modules from current location
  */
 
-export { incrementalSearch, Search, escapeCharRegExp, resetIncrementalSearchValues, highlightSearch, revertHighlightSearch, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, encodePlaceholder, SelectionSettings, ToolbarSettings, ListBox, Mention };
+export { incrementalSearch, Search, escapeCharRegExp, resetIncrementalSearchValues, highlightSearch, revertHighlightSearch, VirtualScroll, FieldSettings, dropDownBaseClasses, DropDownBase, dropDownListClasses, DropDownList, Fields, TreeSettings, DropDownTree, ComboBox, AutoComplete, MultiSelect, CheckBoxSelection, createFloatLabel, updateFloatLabelState, removeFloating, setPlaceHolder, floatLabelFocus, floatLabelBlur, encodePlaceholder, SelectionSettings, ToolbarSettings, ListBox, Mention };
 //# sourceMappingURL=ej2-dropdowns.es5.js.map