@syncfusion/ej2-dropdowns 22.2.12 → 23.1.38

package/dist/es6/ej2-dropdowns.es2015.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';
 
@@ -189,6 +190,327 @@ function revertHighlightSearch(content) {
     }
 }
 
+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());
+    });
+};
+class VirtualScroll {
+    constructor(parent) {
+        this.sentinelInfo = {
+            'up': {
+                check: (rect, info) => {
+                    let top = rect.top - this.containerElementRect.top;
+                    info.entered = top >= 0;
+                    return top + (this.parent.listItemHeight * this.parent.virtualItemCount / 2) >= 0;
+                },
+                axis: 'Y'
+            },
+            'down': {
+                check: (rect, info) => {
+                    let cHeight = this.parent.popupContentElement.clientHeight;
+                    let 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();
+    }
+    addEventListener() {
+        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);
+    }
+    removeEventListener() {
+        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);
+    }
+    bindScrollEvent(component) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.component = component.component;
+        this.observe((scrollArgs) => this.scrollListener(scrollArgs));
+    }
+    observe(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);
+    }
+    getModuleName() {
+        return 'VirtualScroll';
+    }
+    popupScrollHandler(e) {
+        this.parent.isMouseScrollAction = true;
+        this.parent.isPreventScrollAction = false;
+    }
+    getPageQuery(query, virtualStartIndex, virtualEndIndex) {
+        if (virtualEndIndex !== 0 && !this.parent.allowFiltering && this.component !== 'autocomplete') {
+            query = query.skip(virtualStartIndex);
+        }
+        return query;
+    }
+    setGeneratedData(qStartIndex, recentlyGeneratedData) {
+        let loopIteration = 0;
+        let endIndex = this.parent.listData.length + this.parent.virtualItemStartIndex;
+        for (let i = this.parent.virtualItemStartIndex; i < endIndex; i++) {
+            const alreadyAddedData = this.parent.generatedDataObject[i];
+            if (!alreadyAddedData) {
+                if (recentlyGeneratedData !== null && this.parent.listData.slice(loopIteration, loopIteration + 1).length > 0) {
+                    const 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++;
+        }
+    }
+    generateAndExecuteQueryAsync(query, virtualItemStartIndex = 0, virtualItemEndIndex = 0, isQueryGenerated = false) {
+        let dataSource = this.parent.dataSource;
+        if (!isQueryGenerated) {
+            query = this.getPageQuery(query, virtualItemStartIndex, virtualItemEndIndex);
+        }
+        this.parent.resetList(dataSource, this.parent.fields, query);
+    }
+    setCurrentViewDataAsync() {
+        // eslint-disable-next-line
+        let currentData = [];
+        for (let i = this.parent.viewPortInfo.startIndex; i < this.parent.viewPortInfo.endIndex; i++) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const 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
+        const 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
+        const virtualContentElement = this.parent.list.getElementsByClassName('e-virtual-ddl-content')[0];
+        if (virtualContentElement) {
+            (virtualContentElement).style = this.parent.getTransformValues();
+        }
+    }
+    generateQueryAndSetQueryIndexAsync(query, isPopupOpen) {
+        let isStartIndexInitialised = false;
+        let queryStartIndex = 0;
+        let queryEndIndex = 0;
+        let sortedDataStartIndex = 0;
+        let vEndIndex = this.parent && this.parent.viewPortInfo.endIndex !== 0 ? this.parent.viewPortInfo.endIndex : sortedDataStartIndex + this.parent.getItems().length;
+        if (!isPopupOpen && vEndIndex !== 0) {
+            for (let 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();
+    }
+    dataProcessAsync(isOpenPopup) {
+        this.parent.selectedValueInfo = null;
+        this.parent.virtualItemStartIndex = this.parent.viewPortInfo.startIndex;
+        this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;
+        this.generateQueryAndSetQueryIndexAsync(new Query(), isOpenPopup);
+    }
+    virtualScrollRefreshAsync() {
+        return __awaiter(this, void 0, void 0, function* () {
+            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);
+                }
+            }
+            yield this.dataProcessAsync();
+            if (this.parent.keyboardEvent != null) {
+                this.parent.handleVirtualKeyboardActions(this.parent.keyboardEvent, this.parent.pageCount);
+            }
+            this.parent.isCustomFilter = false;
+        });
+    }
+    scrollListener(scrollArgs) {
+        if (!this.parent.isPreventScrollAction) {
+            let info = scrollArgs.sentinel;
+            let 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 = Object.assign({}, this.parent.viewPortInfo);
+                this.parent.isPreventKeyAction = true;
+                this.parent.isVirtualScrolling = true;
+                setTimeout(() => {
+                    this.parent.pageCount = this.parent.getPageCount();
+                    this.virtualScrollRefreshAsync().then(() => {
+                        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;
+                let virtualListCount = this.parent.list.querySelectorAll('.e-virtual-list').length;
+                let listElement = this.parent.list.querySelector('.' + 'e-list-item');
+                let 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;
+        }
+    }
+    getPageCount(popupElement, 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;
+    }
+    ;
+    getRowHeight() {
+        return (isNullOrUndefined(this.parent.liCollections) || this.parent.liCollections.length == 0) ? 0 : Math.ceil(this.parent.liCollections[0].getBoundingClientRect().height);
+    }
+    getInfoFromView(direction, info, e, isscrollAction) {
+        let infoType = {
+            direction: direction, sentinelInfo: info, offsets: e,
+            startIndex: this.parent.previousStartIndex, endIndex: this.parent.previousEndIndex
+        };
+        let vHeight = this.parent.popupContentElement.getBoundingClientRect().height;
+        //Row Start and End Index calculation
+        let rowHeight = this.parent.listItemHeight;
+        let exactTopIndex = e.top / rowHeight;
+        let infoViewIndices = vHeight / rowHeight;
+        let exactEndIndex = exactTopIndex + infoViewIndices;
+        let pageSizeBy4 = this.parent.virtualItemCount / 4;
+        let totalItemCount = this.parent.totalItemCount;
+        if (infoType.direction === 'down') {
+            let 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;
+                let 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) {
+                let loadAtIndex = Math.round(((infoType.startIndex * rowHeight) + (pageSizeBy4 * rowHeight)) / rowHeight);
+                if (exactTopIndex < loadAtIndex) {
+                    let idxAddedToExactTop = (pageSizeBy4) > infoViewIndices ? pageSizeBy4 :
+                        (infoViewIndices + infoViewIndices / 4);
+                    let eIndex = Math.round(exactTopIndex + idxAddedToExactTop);
+                    infoType.endIndex = eIndex < totalItemCount ? eIndex : totalItemCount;
+                    let 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;
+    }
+    virtualScrollHandler(callback) {
+        let delay = Browser.info.name === 'chrome' ? 200 : 100;
+        let prevTop = 0;
+        let debounced100 = debounce(callback, delay);
+        let debounced50 = debounce(callback, 50);
+        return (e) => {
+            let top = e.target.scrollTop;
+            let left = e.target.scrollLeft;
+            let direction = prevTop < top && !this.parent.isUpwardScrolling ? 'down' : 'up';
+            prevTop = top;
+            let 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;
+                    let virtualPoup = (this.parent.list.querySelector('.e-virtual-ddl-content'));
+                    virtualPoup.style.transform = "translate(0px," + top + "px)";
+                }
+            }
+            let debounceFunction = debounced100;
+            if (current.axis === 'X') {
+                debounceFunction = debounced50;
+            }
+            debounceFunction({ direction: direction, sentinel: current, offset: { top: top, left: left },
+                focusElement: document.activeElement });
+        };
+    }
+    destroy() {
+        this.removeEventListener();
+    }
+}
+
 /**
  * Common source
  */
@@ -260,6 +582,11 @@ let DropDownBase = class DropDownBase extends Component {
         this.addedNewItem = false;
         this.isAddNewItemTemplate = false;
         this.isRequesting = false;
+        this.isVirtualizationEnabled = false;
+        this.isAllowFiltering = false;
+        this.virtualizedItemsCount = 0;
+        this.totalItemCount = 0;
+        this.dataCount = 0;
     }
     getPropObject(prop, newProp, oldProp) {
         const newProperty = new Object();
@@ -659,11 +986,12 @@ let DropDownBase = class DropDownBase extends Component {
                             this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
                             this.trigger('actionComplete', e, (e) => {
                                 if (!e.cancel) {
-                                    this.isRequesting = false;
                                     const 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) {
@@ -672,6 +1000,7 @@ let DropDownBase = class DropDownBase extends Component {
                                     this.isRequested = false;
                                     this.bindChildItems(listItems, ulElement, fields, e);
                                 }
+                                this.isRequesting = false;
                             });
                         }).catch((e) => {
                             this.isRequested = false;
@@ -681,13 +1010,19 @@ let DropDownBase = class DropDownBase extends Component {
                         });
                     }
                     else {
+                        this.isRequesting = false;
                         const dataManager = new DataManager(eventArgs.data);
-                        const listItems = (this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        let 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;
                         const localDataArgs = { cancel: false, result: listItems };
                         this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
                         this.trigger('actionComplete', localDataArgs, (localDataArgs) => {
                             if (!localDataArgs.cancel) {
-                                this.isRequesting = false;
                                 ulElement = this.renderItems(localDataArgs.result, fields);
                                 this.onActionComplete(ulElement, localDataArgs.result, event);
                                 if (this.groupTemplate) {
@@ -780,6 +1115,11 @@ let DropDownBase = class DropDownBase extends Component {
     onActionComplete(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');
         }
@@ -798,11 +1138,13 @@ let DropDownBase = class DropDownBase extends Component {
             }
         }
         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 */
@@ -830,6 +1172,11 @@ let DropDownBase = class DropDownBase extends Component {
     getQuery(query) {
         return query ? query : this.query ? this.query : new Query();
     }
+    updateVirtualizationProperties(itemCount, filtering) {
+        this.isVirtualizationEnabled = true;
+        this.virtualizedItemsCount = itemCount;
+        this.isAllowFiltering = filtering;
+    }
     /**
      * To render the template content for group header element.
      *
@@ -968,9 +1315,47 @@ let DropDownBase = class DropDownBase extends Component {
                 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;
     }
@@ -1110,7 +1495,7 @@ let DropDownBase = class DropDownBase extends Component {
         }
     }
     updateSelectElementData(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;
         }
     }
@@ -1124,6 +1509,7 @@ let DropDownBase = class DropDownBase extends Component {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     updateDataSource(props) {
         this.resetList(this.dataSource);
+        this.totalItemCount = this.dataSource instanceof DataManager ? this.dataSource.dataSource.json.length : 0;
     }
     setUpdateInitial(props, newProp) {
         this.isDataFetched = false;
@@ -1540,6 +1926,7 @@ const 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',
@@ -1557,7 +1944,8 @@ const 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',
 };
 const inputObject = {
     container: null,
@@ -1584,9 +1972,52 @@ let DropDownList = class DropDownList extends DropDownBase {
      */
     constructor(options, element) {
         super(options, element);
+        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;
+        };
     }
     /**
      * Initialize the event handler.
@@ -1644,14 +2075,31 @@ let DropDownList = class DropDownList extends DropDownBase {
             hide: 'alt+38',
             space: '32'
         };
+        this.viewPortInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: this.itemCount,
+        };
     }
     setZIndex() {
         if (this.popupObj) {
             this.popupObj.setProperties({ 'zIndex': this.zIndex });
         }
     }
+    requiredModules() {
+        const modules = [];
+        if (this.enableVirtualization) {
+            modules.push({ args: [this], member: 'VirtualScroll' });
+        }
+        return modules;
+    }
     renderList(e, isEmptyData) {
         super.render(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();
     }
@@ -1669,6 +2117,12 @@ let DropDownList = class DropDownList extends DropDownBase {
     resetHandler(e) {
         e.preventDefault();
         this.clearAll(e);
+        if (this.enableVirtualization) {
+            this.list.scrollTop = 0;
+            this.virtualListInfo = null;
+            this.previousStartIndex = 0;
+            this.previousEndIndex = 0;
+        }
     }
     resetFocusElement() {
         this.removeHover();
@@ -1676,7 +2130,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.removeFocus();
         this.list.scrollTop = 0;
         if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {
-            const li = this.ulElement.querySelector('.' + dropDownListClasses.li);
+            let li = this.ulElement.querySelector('.' + dropDownListClasses.li);
+            if (this.enableVirtualization) {
+                li = this.liCollections[this.skeletonCount];
+            }
             if (li) {
                 li.classList.add(dropDownListClasses.focus);
             }
@@ -1695,6 +2152,10 @@ let DropDownList = class DropDownList extends DropDownBase {
             return;
         }
         this.onChangeEvent(e);
+        this.checkAndResetCache();
+        if (this.enableVirtualization) {
+            this.updateInitialData();
+        }
     }
     resetSelection(properties) {
         if (this.list) {
@@ -1760,10 +2221,10 @@ let DropDownList = class DropDownList extends DropDownBase {
                     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}`]);
                     }
                 }
@@ -1862,6 +2323,8 @@ let DropDownList = class DropDownList extends DropDownBase {
         return item;
     }
     initValue() {
+        this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
             this.initRemoteRender = true;
@@ -1871,6 +2334,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     updateValues() {
+        this.selectedValueInfo = this.viewPortInfo;
         if (!isNullOrUndefined(this.value)) {
             this.setSelection(this.getElementByValue(this.value), null);
         }
@@ -2059,6 +2523,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     onMouseClick(e) {
         const target = e.target;
+        this.keyboardEvent = null;
         const li = closest(target, '.' + dropDownBaseClasses.li);
         if (!this.isValidLI(li)) {
             return;
@@ -2139,6 +2604,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (!this.enabled) {
             return;
         }
+        this.keyboardEvent = e;
+        if (this.isPreventKeyAction && this.enableVirtualization) {
+            e.preventDefault();
+        }
         const preventAction = e.action === 'pageUp' || e.action === 'pageDown';
         const preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');
         this.isEscapeKey = e.action === 'escape';
@@ -2178,9 +2647,11 @@ let DropDownList = class DropDownList extends DropDownBase {
                     e.preventDefault();
                     break;
                 case 'home':
+                    this.isMouseScrollAction = true;
                     this.updateHomeEndAction(e);
                     break;
                 case 'end':
+                    this.isMouseScrollAction = true;
                     this.updateHomeEndAction(e);
                     break;
                 case 'space':
@@ -2214,13 +2685,19 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
         }
     }
-    updateUpDownAction(e) {
+    updateUpDownAction(e, isVirtualKeyAction) {
         const focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
-        if (this.isSelectFocusItem(focusEle)) {
+        if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
             this.setSelection(focusEle, e);
+            if (this.enableVirtualization) {
+                let 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)) {
+            let virtualIndex = this.activeIndex;
             let index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;
+            index = isVirtualKeyAction ? virtualIndex : index;
             let startIndex = 0;
             if (this.getModuleName() === 'autocomplete') {
                 startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;
@@ -2228,8 +2705,26 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
             let nextItem;
             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);
@@ -2237,17 +2732,23 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         e.preventDefault();
     }
-    updateHomeEndAction(e) {
+    updateHomeEndAction(e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
             let 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);
@@ -2285,6 +2786,36 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
         }
     }
+    handleVirtualKeyboardActions(e, pageCount) {
+        switch (e.action) {
+            case 'down':
+            case 'up':
+                if (this.itemData != null || this.getModuleName() === 'autocomplete') {
+                    this.updateUpDownAction(e, true);
+                }
+                break;
+            case 'pageUp':
+                let 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;
+    }
     selectCurrentItem(e) {
         if (this.isPopupOpen) {
             const li = this.list.querySelector('.' + dropDownListClasses.focus);
@@ -2306,19 +2837,39 @@ let DropDownList = class DropDownList extends DropDownBase {
     isSelectFocusItem(element) {
         return !isNullOrUndefined(element);
     }
-    getPageCount() {
+    getPageCount(returnExactCount) {
         const 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));
+        let pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
+        return returnExactCount ? pageCount : Math.round(pageCount);
     }
-    pageUpSelection(steps, event) {
-        const previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
-        this.setSelection(previousItem, event);
+    pageUpSelection(steps, event, isVirtualKeyAction) {
+        let previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
+        if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
+            previousItem = steps >= 0 ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];
+        }
+        if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {
+            previousItem = this.liCollections[this.skeletonCount];
+        }
+        this.PageUpDownSelection(previousItem, event);
+    }
+    PageUpDownSelection(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);
+        }
     }
-    pageDownSelection(steps, event) {
+    pageDownSelection(steps, event, isVirtualKeyAction) {
         const list = this.getItems();
-        const previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];
-        this.setSelection(previousItem, event);
+        let previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];
+        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);
     }
     unWireEvent() {
         if (!isNullOrUndefined(this.inputWrapper)) {
@@ -2383,6 +2934,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (e.which === 3 || e.button === 2) {
             return;
         }
+        this.keyboardEvent = null;
         if (this.targetElement().classList.contains(dropDownListClasses.disable) || this.inputWrapper.clearButton === e.target) {
             return;
         }
@@ -2527,6 +3079,14 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         else {
             this.setSelectOptions(li, e);
+            if (this.enableVirtualization) {
+                const fields = (this.fields.value) ? this.fields.value : '';
+                const 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);
+                }
+            }
         }
     }
     setSelectOptions(li, e) {
@@ -2785,6 +3345,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.typedString = this.filterInput.value;
                     this.preventAutoFill = false;
                     this.searchLists(e);
+                    if (this.enableVirtualization) {
+                        this.getFilteringSkeletonCount();
+                    }
                     break;
             }
         }
@@ -2792,6 +3355,33 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.isValidKey = false;
         }
     }
+    getFilteringSkeletonCount() {
+        const difference = this.dataCount - this.viewPortInfo.endIndex;
+        const 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)) {
+            const 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();
+        }
+    }
+    getSkeletonCount(retainSkeleton) {
+        this.virtualListHeight = this.listHeight != null ? parseInt(this.listHeight, 10) : this.virtualListHeight;
+        const 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;
+    }
     onFilterDown(e) {
         switch (e.keyCode) {
             case 13: //enter
@@ -2835,6 +3425,14 @@ let DropDownList = class DropDownList extends DropDownBase {
         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;
     }
     getSelectionPoints() {
@@ -2851,6 +3449,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         this.isDataFetched = false;
         if (this.isFiltering()) {
+            this.checkAndResetCache();
             const eventArgs = {
                 preventDefaultAction: false,
                 text: this.filterInput.value,
@@ -2888,10 +3487,30 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (!isNullOrUndefined(this.filterInput)) {
             this.beforePopupOpen = (!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') ?
                 false : true;
+            let 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;
@@ -2904,7 +3523,30 @@ let DropDownList = class DropDownList extends DropDownBase {
             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();
         }
@@ -3001,15 +3643,47 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.renderPopup();
         }
     }
+    UpdateSkeleton(isSkeletonCountChange, skeletonCount) {
+        let isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
+        let isContainVirtualList = this.list.querySelector('.e-virtual-list');
+        if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.enableVirtualization) {
+            const totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
+            for (let i = 0; i < totalSkeletonCount; i++) {
+                const liElement = this.createElement('li', { className: dropDownListClasses.virtualList, styles: 'overflow: inherit' });
+                if (this.enableVirtualization && this.itemTemplate) {
+                    liElement.style.height = this.listItemHeight + 'px';
+                }
+                let 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]);
+            }
+        }
+    }
+    getTakeValue() {
+        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
     onActionComplete(ulElement, list, e, isUpdated) {
-        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;
         }
+        let tempItemCount = this.itemCount;
         if (this.isActive || !isNullOrUndefined(ulElement)) {
             const selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;
             super.onActionComplete(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;
@@ -3020,7 +3694,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                 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' });
             }
@@ -3072,13 +3748,36 @@ let DropDownList = class DropDownList extends DropDownBase {
                         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()) {
+                const value = this.getItemData().value;
+                this.activeIndex = this.getIndexByValue(value);
+                const 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);
+                }
             }
         }
     }
@@ -3139,7 +3838,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         const element = this.findListElement(this.list, 'li', 'data-value', value);
         this.selectedLI = element;
         this.activeItem(element);
-        this.removeFocus();
+        if (!(this.enableVirtualization && isNullOrUndefined(element))) {
+            this.removeFocus();
+        }
     }
     updateSelection() {
         const selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);
@@ -3152,12 +3853,46 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);
         }
     }
+    updateSelectionList() {
+        let 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');
+            }
+        }
+    }
+    checkAndResetCache() {
+        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;
+        }
+    }
     removeFocus() {
         const highlightedItem = this.list.querySelectorAll('.' + dropDownListClasses.focus);
         if (highlightedItem && highlightedItem.length) {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     }
+    getTransformValues() {
+        let 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;
+        const styleText = `transform: translate(0px, ${translateY}px);`;
+        return styleText;
+    }
+    GetVirtualTrackHeight() {
+        const height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
+        const heightDimension = `height: ${height - this.itemCount * this.listItemHeight}px;`;
+        return heightDimension;
+    }
     renderPopup(e) {
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
             this.refreshPopup();
@@ -3179,10 +3914,39 @@ let DropDownList = class DropDownList extends DropDownBase {
                     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';
                     }
@@ -3204,9 +3968,13 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
                 let offsetValue = 0;
                 let left;
+                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;
                 }
@@ -3222,6 +3990,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
                 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);
@@ -3253,6 +4022,24 @@ let DropDownList = class DropDownList extends DropDownBase {
                     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(() => {
+                        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');
                 const inputParent = this.isFiltering() ? this.filterInput.parentElement : this.inputWrapper.container;
@@ -3300,7 +4087,8 @@ let DropDownList = class DropDownList extends DropDownBase {
     createPopup(element, offsetValue, left) {
         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,
@@ -3386,6 +4174,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         const firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
         const lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];
         const liHeight = firstItem.getBoundingClientRect().height;
+        this.listItemHeight = liHeight;
         const listHeight = this.list.offsetHeight / 2;
         const height = isNullOrUndefined(selectedLI) ? firstItem.offsetTop : selectedLI.offsetTop;
         const lastItemOffsetValue = lastItem.offsetTop;
@@ -3396,7 +4185,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             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;
         }
@@ -3422,34 +4211,110 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         return width;
     }
-    scrollBottom(isInitial) {
+    scrollBottom(isInitial, isInitialSelection = false, 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;
+            let virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+            let lastElementValue = this.list.querySelector('li:last-of-type') ? this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;
+            let selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
             const currentOffset = this.list.offsetHeight;
-            const nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
+            let nextBottom = selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) + this.selectedLI.offsetHeight - this.list.scrollTop;
             let nextOffset = this.list.scrollTop + nextBottom - currentOffset;
-            nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;
-            let boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
+            let isScrollerCHanged = false;
+            nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10);
+            let 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;
+                let 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;
         }
     }
-    scrollTop() {
+    scrollTop(keyAction = null) {
         if (!isNullOrUndefined(this.selectedLI)) {
-            let nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;
+            let virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+            let selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+            let nextOffset = selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) - this.list.scrollTop;
+            let 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;
-            const boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);
-            if (this.activeIndex === 0) {
+            let boxRange = (selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) + this.selectedLI.offsetHeight - this.list.scrollTop);
+            let 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) ?
@@ -3467,25 +4332,47 @@ let DropDownList = class DropDownList extends DropDownBase {
         return true;
     }
     setScrollPosition(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;
     }
     clearText() {
         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();
+            }
+        }
     }
     setEleWidth(width) {
         if (!isNullOrUndefined(width)) {
@@ -3498,10 +4385,13 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     closePopup(delay, e) {
+        let isFilterValue = !isNullOrUndefined(this.filterInput) && !isNullOrUndefined(this.filterInput.value) && this.filterInput.value !== '';
+        const 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;
@@ -3542,6 +4432,20 @@ let DropDownList = class DropDownList extends DropDownBase {
         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;
         const animModel = {
             name: 'FadeOut',
@@ -3572,6 +4476,46 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
             this.actionCompleteData.ulElement = this.ulElement.cloneNode(true);
         }
+        const 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();
+        }
+    }
+    updateInitialData() {
+        let currentData = this.selectData;
+        let 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();
+        }
     }
     destroyPopup() {
         this.isPopupOpen = false;
@@ -3658,10 +4602,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         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());
@@ -3671,7 +4615,16 @@ let DropDownList = class DropDownList extends DropDownBase {
             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]) {
             const selectElement = this.element;
@@ -3707,6 +4660,29 @@ let DropDownList = class DropDownList extends DropDownBase {
             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;
+    }
+    getListHeight() {
+        let listParent = this.createElement('div', {
+            className: 'e-dropdownbase'
+        });
+        let item = this.createElement('li', {
+            className: 'e-list-item'
+        });
+        let listParentHeight = formatUnit(this.popupHeight);
+        listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';
+        listParent.appendChild(item);
+        document.body.appendChild(listParent);
+        this.virtualListHeight = listParent.getBoundingClientRect().height;
+        let listItemHeight = Math.ceil(item.getBoundingClientRect().height);
+        listParent.remove();
+        return listItemHeight;
     }
     setFooterTemplate(popupEle) {
         let compiledString;
@@ -3849,7 +4825,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         for (const prop of Object.keys(newProp)) {
             switch (prop) {
                 case 'query':
-                case 'dataSource': break;
+                case 'dataSource':
+                    this.getSkeletonCount();
+                    this.checkAndResetCache();
+                    break;
                 case 'htmlAttributes':
                     this.setHTMLAttributes();
                     break;
@@ -4137,7 +5116,23 @@ let DropDownList = class DropDownList extends DropDownBase {
             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,
+            });
+        }
     }
     invokeRenderPopup(e) {
         if (Browser.isDevice && this.isFilterLayout()) {
@@ -4231,7 +5226,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         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();
@@ -4287,6 +5284,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.ulElement = null;
         this.list = null;
         this.popupObj = null;
+        this.popupContentElement = null;
         this.rippleFun = null;
         this.selectedLI = null;
         this.liCollections = null;
@@ -4384,6 +5382,9 @@ __decorate$1([
 __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);
@@ -7839,14 +8840,18 @@ let ComboBox = class ComboBox extends DropDownList {
                 if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {
                     this.removeFocus();
                     const 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;
@@ -7982,7 +8987,9 @@ let ComboBox = class ComboBox extends DropDownList {
         else if (this.inputElement.value === '') {
             this.activeIndex = null;
             if (!isNullOrUndefined(this.list)) {
-                this.list.scrollTop = 0;
+                if (!this.enableVirtualization) {
+                    this.list.scrollTop = 0;
+                }
                 const focusItem = this.list.querySelector('.' + dropDownListClasses.li);
                 this.setHoverList(focusItem);
             }
@@ -8521,7 +9528,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
                 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 (let queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
@@ -8532,11 +9539,18 @@ let AutoComplete = class AutoComplete extends ComboBox {
             }
             filterQuery.take(this.suggestionCount);
         }
+        if (this.enableVirtualization) {
+            var takeValue = this.getTakeValue();
+            filterQuery.skip(this.virtualItemStartIndex);
+            filterQuery.take(takeValue);
+            filterQuery.requiresCount();
+        }
         return filterQuery;
     }
     searchLists(e) {
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
+        this.checkAndResetCache();
         if (isNullOrUndefined(this.list)) {
             super.renderList(e, true);
         }
@@ -8583,8 +9597,32 @@ let AutoComplete = class AutoComplete extends ComboBox {
     }
     filterAction(dataSource, query, fields, e) {
         this.beforePopupOpen = true;
+        let 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);
@@ -8595,6 +9633,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
     clearAll(e, property) {
         if (isNullOrUndefined(property) || (!isNullOrUndefined(property) && isNullOrUndefined(property.dataSource))) {
             super.clearAll(e);
+            this.checkAndResetCache();
         }
         if (this.beforePopupOpen) {
             this.hidePopup();
@@ -8676,7 +9715,9 @@ let AutoComplete = class AutoComplete extends ComboBox {
         return true;
     }
     renderPopup(e) {
-        this.list.scrollTop = 0;
+        if (!this.enableVirtualization) {
+            this.list.scrollTop = 0;
+        }
         super.renderPopup(e);
     }
     isEditTextBox() {
@@ -8744,6 +9785,10 @@ let AutoComplete = class AutoComplete extends ComboBox {
     hidePopup(e) {
         super.hidePopup(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.
@@ -9261,6 +10306,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 if (this.isFirstClick) {
                     this.loadTemplate();
                 }
+                if (this.mode === 'CheckBox' && this.showSelectAll) {
+                    EventHandler.add(this.popupObj.element, 'click', this.clickHandler, this);
+                }
             }
         });
     }
@@ -10266,11 +11314,19 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     spaceKeySelection(e) {
         if (this.mode === 'CheckBox') {
-            if (!document.activeElement.classList.contains(FILTERINPUT)) {
+            const li = this.list.querySelector('li.' + dropDownBaseClasses.focus);
+            const 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) {
+                const li = this.list.querySelector('li.' + dropDownBaseClasses.focus);
+                if (!isNullOrUndefined(li) && selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                    li.classList.remove('e-item-focus');
+                }
+            }
         }
         this.checkPlaceholderSize();
     }
@@ -10426,9 +11482,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
         const 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')) {
             const selectAllCheckBox = selectAllParent.childNodes[0];
             if (!selectAllCheckBox.classList.contains('e-check')) {
@@ -10501,6 +11554,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.updateAriaAttribute();
     }
+    clickHandler(e) {
+        const targetElement = e.target;
+        const filterInputClassName = targetElement.className;
+        const 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');
+        }
+    }
     moveByList(position) {
         if (this.list) {
             let elements = this.list.querySelectorAll('li.'
@@ -10515,12 +11576,19 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             let temp = -1;
             const 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');
                     }
                 }
@@ -11115,7 +12183,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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: () => {
                         if (this.popupObj.element.parentElement) {
@@ -12779,6 +13848,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     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);
+                    }
                 }
             });
         }
@@ -13537,7 +14609,7 @@ class CheckBoxSelection {
     }
     clickHandler(e) {
         let 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 {
@@ -16911,7 +17983,9 @@ let Mention = class Mention extends DropDownBase {
                 this.trigger('opened', eventArgs, (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;
                         }
@@ -17620,6 +18694,11 @@ let Mention = class Mention extends DropDownBase {
         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.destroy();
     }
     getLocaleName() {
@@ -17749,5 +18828,5 @@ Mention = __decorate$7([
  * 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.es2015.js.map