@syncfusion/ej2-dropdowns 22.2.12 → 23.1.38

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

@@ -28,6 +28,8 @@ import { Input } from '@syncfusion/ej2-inputs';
 import { incrementalSearch, resetIncrementalSearchValues } from '../common/incremental-search';
 import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
 import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';
+import { Skeleton } from '@syncfusion/ej2-notifications';
+[];
 // don't use space in classnames
 export var dropDownListClasses = {
     root: 'e-dropdownlist',
@@ -38,6 +40,7 @@ export var dropDownListClasses = {
     disable: dropDownBaseClasses.disabled,
     base: dropDownBaseClasses.root,
     focus: dropDownBaseClasses.focus,
+    content: dropDownBaseClasses.content,
     input: 'e-input-group',
     inputFocus: 'e-input-focus',
     icon: 'e-input-group-icon e-ddl-icon',
@@ -55,7 +58,8 @@ export var dropDownListClasses = {
     clearIconHide: 'e-clear-icon-hide',
     popupFullScreen: 'e-popup-full-page',
     disableIcon: 'e-ddl-disable-icon',
-    hiddenElement: 'e-ddl-hidden'
+    hiddenElement: 'e-ddl-hidden',
+    virtualList: 'e-list-item e-virtual-list',
 };
 var inputObject = {
     container: null,
@@ -83,9 +87,52 @@ var DropDownList = /** @class */ (function (_super) {
      */
     function DropDownList(options, element) {
         var _this = _super.call(this, options, element) || this;
+        _this.skeletonCount = 32;
         _this.isListSearched = false;
         _this.preventChange = false;
         _this.isAngular = false;
+        _this.itemCount = 10;
+        _this.virtualListHeight = 0;
+        _this.isVirtualScrolling = false;
+        _this.isPreventScrollAction = false;
+        _this.scrollPreStartIndex = 0;
+        _this.isScrollActionTriggered = false;
+        _this.previousStartIndex = 0;
+        _this.isMouseScrollAction = false;
+        _this.isKeyBoardAction = false;
+        _this.isUpwardScrolling = false;
+        _this.startIndex = 0;
+        _this.currentPageNumber = 0;
+        _this.pageCount = 0;
+        _this.isPreventKeyAction = false;
+        _this.generatedDataObject = {};
+        _this.virtualListInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        _this.viewPortInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        _this.selectedValueInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        _this.IsScrollerAtEnd = function () {
+            return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
+        };
         return _this;
     }
     /**
@@ -144,14 +191,31 @@ var DropDownList = /** @class */ (function (_super) {
             hide: 'alt+38',
             space: '32'
         };
+        this.viewPortInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: this.itemCount,
+        };
     };
     DropDownList.prototype.setZIndex = function () {
         if (this.popupObj) {
             this.popupObj.setProperties({ 'zIndex': this.zIndex });
         }
     };
+    DropDownList.prototype.requiredModules = function () {
+        var modules = [];
+        if (this.enableVirtualization) {
+            modules.push({ args: [this], member: 'VirtualScroll' });
+        }
+        return modules;
+    };
     DropDownList.prototype.renderList = function (e, isEmptyData) {
         _super.prototype.render.call(this, e, isEmptyData);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
         this.unWireListEvents();
         this.wireListEvents();
     };
@@ -169,6 +233,12 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.resetHandler = function (e) {
         e.preventDefault();
         this.clearAll(e);
+        if (this.enableVirtualization) {
+            this.list.scrollTop = 0;
+            this.virtualListInfo = null;
+            this.previousStartIndex = 0;
+            this.previousEndIndex = 0;
+        }
     };
     DropDownList.prototype.resetFocusElement = function () {
         this.removeHover();
@@ -177,6 +247,9 @@ var DropDownList = /** @class */ (function (_super) {
         this.list.scrollTop = 0;
         if (this.getModuleName() !== 'autocomplete' && !isNullOrUndefined(this.ulElement)) {
             var li = this.ulElement.querySelector('.' + dropDownListClasses.li);
+            if (this.enableVirtualization) {
+                li = this.liCollections[this.skeletonCount];
+            }
             if (li) {
                 li.classList.add(dropDownListClasses.focus);
             }
@@ -195,6 +268,10 @@ var DropDownList = /** @class */ (function (_super) {
             return;
         }
         this.onChangeEvent(e);
+        this.checkAndResetCache();
+        if (this.enableVirtualization) {
+            this.updateInitialData();
+        }
     };
     DropDownList.prototype.resetSelection = function (properties) {
         if (this.list) {
@@ -261,10 +338,10 @@ var DropDownList = /** @class */ (function (_super) {
                     this.inputWrapper.container.setAttribute('style', this.htmlAttributes["" + htmlAttr]);
                 }
                 else if (htmlAttr === 'aria-label') {
-                    if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
+                    if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') && !this.readonly) {
                         this.inputElement.setAttribute('aria-label', this.htmlAttributes["" + htmlAttr]);
                     }
-                    else {
+                    else if (this.getModuleName() === 'dropdownlist') {
                         this.inputWrapper.container.setAttribute('aria-label', this.htmlAttributes["" + htmlAttr]);
                     }
                 }
@@ -364,6 +441,8 @@ var DropDownList = /** @class */ (function (_super) {
         return item;
     };
     DropDownList.prototype.initValue = function () {
+        this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
             this.initRemoteRender = true;
@@ -373,6 +452,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.updateValues = function () {
+        this.selectedValueInfo = this.viewPortInfo;
         if (!isNullOrUndefined(this.value)) {
             this.setSelection(this.getElementByValue(this.value), null);
         }
@@ -561,6 +641,7 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.onMouseClick = function (e) {
         var target = e.target;
+        this.keyboardEvent = null;
         var li = closest(target, '.' + dropDownBaseClasses.li);
         if (!this.isValidLI(li)) {
             return;
@@ -641,6 +722,10 @@ var DropDownList = /** @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
+        this.keyboardEvent = e;
+        if (this.isPreventKeyAction && this.enableVirtualization) {
+            e.preventDefault();
+        }
         var preventAction = e.action === 'pageUp' || e.action === 'pageDown';
         var preventHomeEnd = this.getModuleName() !== 'dropdownlist' && (e.action === 'home' || e.action === 'end');
         this.isEscapeKey = e.action === 'escape';
@@ -680,9 +765,11 @@ var DropDownList = /** @class */ (function (_super) {
                     e.preventDefault();
                     break;
                 case 'home':
+                    this.isMouseScrollAction = true;
                     this.updateHomeEndAction(e);
                     break;
                 case 'end':
+                    this.isMouseScrollAction = true;
                     this.updateHomeEndAction(e);
                     break;
                 case 'space':
@@ -716,13 +803,19 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
     };
-    DropDownList.prototype.updateUpDownAction = function (e) {
+    DropDownList.prototype.updateUpDownAction = function (e, isVirtualKeyAction) {
         var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
-        if (this.isSelectFocusItem(focusEle)) {
+        if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
             this.setSelection(focusEle, e);
+            if (this.enableVirtualization) {
+                var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+                this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
+            }
         }
         else if (!isNullOrUndefined(this.liCollections)) {
+            var virtualIndex = this.activeIndex;
             var index = e.action === 'down' ? this.activeIndex + 1 : this.activeIndex - 1;
+            index = isVirtualKeyAction ? virtualIndex : index;
             var startIndex = 0;
             if (this.getModuleName() === 'autocomplete') {
                 startIndex = e.action === 'down' && isNullOrUndefined(this.activeIndex) ? 0 : this.liCollections.length - 1;
@@ -730,8 +823,26 @@ var DropDownList = /** @class */ (function (_super) {
             }
             var nextItem = void 0;
             if (this.getModuleName() !== 'autocomplete' || this.getModuleName() === 'autocomplete' && this.isPopupOpen) {
-                nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex]
-                    : this.liCollections[index];
+                if (!this.enableVirtualization) {
+                    nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[startIndex]
+                        : this.liCollections[index];
+                }
+                else {
+                    if (!isVirtualKeyAction) {
+                        nextItem = isNullOrUndefined(this.activeIndex) ? this.liCollections[this.skeletonCount]
+                            : this.liCollections[index];
+                        nextItem = !isNullOrUndefined(nextItem) && !nextItem.classList.contains('e-virtual-list') ? nextItem : null;
+                    }
+                    else {
+                        if (this.getModuleName() === 'autocomplete') {
+                            var value = this.selectedLI.dataset.value;
+                            nextItem = this.getElementByValue(value);
+                        }
+                        else {
+                            nextItem = this.getElementByValue(this.getItemData().value);
+                        }
+                    }
+                }
             }
             if (!isNullOrUndefined(nextItem)) {
                 this.setSelection(nextItem, e);
@@ -739,17 +850,23 @@ var DropDownList = /** @class */ (function (_super) {
         }
         e.preventDefault();
     };
-    DropDownList.prototype.updateHomeEndAction = function (e) {
+    DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
             var findLi = 0;
             if (e.action === 'home') {
                 findLi = 0;
+                if (this.enableVirtualization) {
+                    findLi = this.skeletonCount;
+                }
             }
             else {
                 findLi = this.getItems().length - 1;
             }
             e.preventDefault();
             if (this.activeIndex === findLi) {
+                if (isVirtualKeyAction) {
+                    this.setSelection(this.liCollections[findLi], e);
+                }
                 return;
             }
             this.setSelection(this.liCollections[findLi], e);
@@ -787,6 +904,36 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
     };
+    DropDownList.prototype.handleVirtualKeyboardActions = function (e, pageCount) {
+        switch (e.action) {
+            case 'down':
+            case 'up':
+                if (this.itemData != null || this.getModuleName() === 'autocomplete') {
+                    this.updateUpDownAction(e, true);
+                }
+                break;
+            case 'pageUp':
+                var count = (pageCount * 2) - 4;
+                this.activeIndex = Math.round(count);
+                this.pageUpSelection(this.activeIndex - this.getPageCount(), e, true);
+                e.preventDefault();
+                break;
+            case 'pageDown':
+                this.activeIndex = 1;
+                this.pageDownSelection(this.activeIndex + this.getPageCount(), e, true);
+                e.preventDefault();
+                break;
+            case 'home':
+                this.isMouseScrollAction = true;
+                this.updateHomeEndAction(e, true);
+                break;
+            case 'end':
+                this.isMouseScrollAction = true;
+                this.updateHomeEndAction(e, true);
+                break;
+        }
+        this.keyboardEvent = null;
+    };
     DropDownList.prototype.selectCurrentItem = function (e) {
         if (this.isPopupOpen) {
             var li = this.list.querySelector('.' + dropDownListClasses.focus);
@@ -808,19 +955,39 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.isSelectFocusItem = function (element) {
         return !isNullOrUndefined(element);
     };
-    DropDownList.prototype.getPageCount = function () {
+    DropDownList.prototype.getPageCount = function (returnExactCount) {
         var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
             getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
-        return Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
+        var pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
+        return returnExactCount ? pageCount : Math.round(pageCount);
     };
-    DropDownList.prototype.pageUpSelection = function (steps, event) {
+    DropDownList.prototype.pageUpSelection = function (steps, event, isVirtualKeyAction) {
         var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
-        this.setSelection(previousItem, event);
+        if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
+            previousItem = steps >= 0 ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];
+        }
+        if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {
+            previousItem = this.liCollections[this.skeletonCount];
+        }
+        this.PageUpDownSelection(previousItem, event);
     };
-    DropDownList.prototype.pageDownSelection = function (steps, event) {
+    DropDownList.prototype.PageUpDownSelection = function (previousItem, event) {
+        if (this.enableVirtualization) {
+            if (!isNullOrUndefined(previousItem) && ((this.getModuleName() !== 'autocomplete' && !previousItem.classList.contains('e-active')) || (this.getModuleName() === 'autocomplete' && !previousItem.classList.contains('e-item-focus')))) {
+                this.setSelection(previousItem, event);
+            }
+        }
+        else {
+            this.setSelection(previousItem, event);
+        }
+    };
+    DropDownList.prototype.pageDownSelection = function (steps, event, isVirtualKeyAction) {
         var list = this.getItems();
         var previousItem = steps <= list.length ? this.liCollections[steps - 1] : this.liCollections[list.length - 1];
-        this.setSelection(previousItem, event);
+        if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
+            previousItem = steps <= list.length ? this.liCollections[steps + this.skeletonCount - 1] : this.liCollections[list.length - 1];
+        }
+        this.PageUpDownSelection(previousItem, event);
     };
     DropDownList.prototype.unWireEvent = function () {
         if (!isNullOrUndefined(this.inputWrapper)) {
@@ -885,6 +1052,7 @@ var DropDownList = /** @class */ (function (_super) {
         if (e.which === 3 || e.button === 2) {
             return;
         }
+        this.keyboardEvent = null;
         if (this.targetElement().classList.contains(dropDownListClasses.disable) || this.inputWrapper.clearButton === e.target) {
             return;
         }
@@ -1030,6 +1198,14 @@ var DropDownList = /** @class */ (function (_super) {
         }
         else {
             this.setSelectOptions(li, e);
+            if (this.enableVirtualization) {
+                var fields = (this.fields.value) ? this.fields.value : '';
+                var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
+                if (getItem && getItem.length > 0) {
+                    this.itemData = getItem[0];
+                    this.setProperties({ 'text': getItem[0].text, 'value': getItem[0].value }, true);
+                }
+            }
         }
     };
     DropDownList.prototype.setSelectOptions = function (li, e) {
@@ -1288,6 +1464,9 @@ var DropDownList = /** @class */ (function (_super) {
                     this.typedString = this.filterInput.value;
                     this.preventAutoFill = false;
                     this.searchLists(e);
+                    if (this.enableVirtualization) {
+                        this.getFilteringSkeletonCount();
+                    }
                     break;
             }
         }
@@ -1295,6 +1474,33 @@ var DropDownList = /** @class */ (function (_super) {
             this.isValidKey = false;
         }
     };
+    DropDownList.prototype.getFilteringSkeletonCount = function () {
+        var difference = this.dataCount - this.viewPortInfo.endIndex;
+        var currentSkeletonCount = this.skeletonCount;
+        this.getSkeletonCount(true);
+        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
+        if (!this.list.classList.contains(dropDownBaseClasses.noData)) {
+            var isSkeletonCountChange = currentSkeletonCount !== this.skeletonCount;
+            if (currentSkeletonCount !== this.skeletonCount) {
+                this.UpdateSkeleton(true, Math.abs(currentSkeletonCount - this.skeletonCount));
+            }
+            else {
+                this.UpdateSkeleton();
+            }
+            this.liCollections = this.list.querySelectorAll('.e-list-item');
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+        }
+    };
+    DropDownList.prototype.getSkeletonCount = function (retainSkeleton) {
+        this.virtualListHeight = this.listHeight != null ? parseInt(this.listHeight, 10) : this.virtualListHeight;
+        var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
+        this.skeletonCount = actualCount * 2 < this.itemCount ? this.itemCount : actualCount * 2;
+        this.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;
+        this.skeletonCount = Math.floor(this.skeletonCount / 2) + 2;
+    };
     DropDownList.prototype.onFilterDown = function (e) {
         switch (e.keyCode) {
             case 13: //enter
@@ -1338,6 +1544,14 @@ var DropDownList = /** @class */ (function (_super) {
         else {
             filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
         }
+        if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0)) {
+            var takeValue = this.getTakeValue();
+            if (this.allowFiltering) {
+                filterQuery.skip(this.virtualItemStartIndex);
+            }
+            filterQuery.take(takeValue);
+            filterQuery.requiresCount();
+        }
         return filterQuery;
     };
     DropDownList.prototype.getSelectionPoints = function () {
@@ -1355,6 +1569,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         this.isDataFetched = false;
         if (this.isFiltering()) {
+            this.checkAndResetCache();
             var eventArgs_1 = {
                 preventDefaultAction: false,
                 text: this.filterInput.value,
@@ -1392,10 +1607,30 @@ var DropDownList = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.filterInput)) {
             this.beforePopupOpen = (!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') ?
                 false : true;
+            var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
             if (this.filterInput.value.trim() === '' && !this.itemTemplate) {
                 this.actionCompleteData.isUpdated = false;
                 this.isTyped = false;
                 if (!isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {
+                    if (this.enableVirtualization) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+                        this.resetList(dataSource, fields, query);
+                        if (isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+                            if (!this.list.querySelector('.e-virtual-ddl-content')) {
+                                this.list.appendChild(this.createElement('div', {
+                                    className: 'e-virtual-ddl-content',
+                                    styles: this.getTransformValues()
+                                })).appendChild(this.list.querySelector('.e-list-parent'));
+                            }
+                            if (!this.list.querySelector('.e-virtual-ddl')) {
+                                var virualElement = this.createElement('div', {
+                                    id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                                });
+                                document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                            }
+                        }
+                    }
                     this.onActionComplete(this.actionCompleteData.ulElement, this.actionCompleteData.list);
                 }
                 this.isTyped = true;
@@ -1408,7 +1643,30 @@ var DropDownList = /** @class */ (function (_super) {
             else {
                 this.isNotSearchList = false;
                 query = (this.filterInput.value.trim() === '') ? null : query;
+                if (this.enableVirtualization && this.isFiltering() && this.isTyped) {
+                    this.isPreventScrollAction = true;
+                    this.list.scrollTop = 0;
+                    this.previousStartIndex = 0;
+                    this.virtualListInfo = null;
+                }
                 this.resetList(dataSource, fields, query);
+                if (this.enableVirtualization && isNoData && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+                    if (!this.list.querySelector('.e-virtual-ddl-content')) {
+                        this.list.appendChild(this.createElement('div', {
+                            className: 'e-virtual-ddl-content',
+                            styles: this.getTransformValues()
+                        })).appendChild(this.list.querySelector('.e-list-parent'));
+                    }
+                    if (!this.list.querySelector('.e-virtual-ddl')) {
+                        var virualElement = this.createElement('div', {
+                            id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                        });
+                        document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                    }
+                }
+            }
+            if (this.enableVirtualization) {
+                this.getFilteringSkeletonCount();
             }
             this.renderReactTemplates();
         }
@@ -1506,16 +1764,48 @@ var DropDownList = /** @class */ (function (_super) {
             this.renderPopup();
         }
     };
+    DropDownList.prototype.UpdateSkeleton = function (isSkeletonCountChange, skeletonCount) {
+        var isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
+        var isContainVirtualList = this.list.querySelector('.e-virtual-list');
+        if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.enableVirtualization) {
+            var totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
+            for (var i = 0; i < totalSkeletonCount; i++) {
+                var liElement = this.createElement('li', { className: dropDownListClasses.virtualList, styles: 'overflow: inherit' });
+                if (this.enableVirtualization && this.itemTemplate) {
+                    liElement.style.height = this.listItemHeight + 'px';
+                }
+                var skeleton = new Skeleton({
+                    shape: "Text",
+                    height: "10px",
+                    width: "95%",
+                    cssClass: "e-skeleton-text",
+                });
+                skeleton.appendTo(this.createElement('div'));
+                liElement.appendChild(skeleton.element);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
+            }
+        }
+    };
+    DropDownList.prototype.getTakeValue = function () {
+        return this.allowFiltering && this.getModuleName() === 'dropdownlist' && Browser.isDevice ? Math.round(window.outerHeight / this.listItemHeight) : this.itemCount;
+    };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
         var _this = this;
-        if (this.isNotSearchList) {
+        if (this.dataSource instanceof DataManager && !isNullOrUndefined(e)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = e.count;
+        }
+        if (this.isNotSearchList && !this.enableVirtualization) {
             this.isNotSearchList = false;
             return;
         }
+        var tempItemCount = this.itemCount;
         if (this.isActive || !isNullOrUndefined(ulElement)) {
             var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;
             _super.prototype.onActionComplete.call(this, ulElement, list, e);
+            this.skeletonCount = this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2) ? 0 : this.skeletonCount;
             this.updateSelectElementData(this.allowFiltering);
             if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent) && this.searchKeyEvent.type === 'keydown') {
                 this.isRequested = false;
@@ -1526,7 +1816,9 @@ var DropDownList = /** @class */ (function (_super) {
                 this.incrementalSearch(this.searchKeyEvent);
                 this.searchKeyEvent = null;
             }
-            this.list.scrollTop = 0;
+            if (!this.enableVirtualization) {
+                this.list.scrollTop = 0;
+            }
             if (!isNullOrUndefined(ulElement)) {
                 attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
             }
@@ -1580,13 +1872,36 @@ var DropDownList = /** @class */ (function (_super) {
                         this.updateActionCompleteDataValues(ulElement, list);
                     }
                 }
-                this.addNewItem(list, selectedItem);
-                if (!isNullOrUndefined(this.itemData)) {
+                if (!this.enableVirtualization) {
+                    this.addNewItem(list, selectedItem);
+                }
+                if (!isNullOrUndefined(this.itemData) || (isNullOrUndefined(this.itemData) && this.enableVirtualization)) {
                     this.focusIndexItem();
                 }
+                if (this.enableVirtualization) {
+                    this.updateActionCompleteDataValues(ulElement, list);
+                }
+            }
+            else if (this.enableVirtualization && this.getModuleName() !== 'autocomplete' && !this.isFiltering()) {
+                var value = this.getItemData().value;
+                this.activeIndex = this.getIndexByValue(value);
+                var element = this.findListElement(this.list, 'li', 'data-value', value);
+                this.selectedLI = element;
+            }
+            else if (this.enableVirtualization && this.getModuleName() === 'autocomplete') {
+                this.activeIndex = this.skeletonCount;
             }
             if (this.beforePopupOpen) {
                 this.renderPopup(e);
+                if (this.enableVirtualization) {
+                    if (!this.list.querySelector('.e-virtual-list')) {
+                        this.UpdateSkeleton();
+                        this.liCollections = this.list.querySelectorAll('.e-list-item');
+                    }
+                }
+                if (this.enableVirtualization && tempItemCount != this.itemCount) {
+                    this.resetList(this.dataSource, this.fields);
+                }
             }
         }
     };
@@ -1649,7 +1964,9 @@ var DropDownList = /** @class */ (function (_super) {
         var element = this.findListElement(this.list, 'li', 'data-value', value);
         this.selectedLI = element;
         this.activeItem(element);
-        this.removeFocus();
+        if (!(this.enableVirtualization && isNullOrUndefined(element))) {
+            this.removeFocus();
+        }
     };
     DropDownList.prototype.updateSelection = function () {
         var selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);
@@ -1662,12 +1979,46 @@ var DropDownList = /** @class */ (function (_super) {
             this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);
         }
     };
+    DropDownList.prototype.updateSelectionList = function () {
+        var selectedItem = this.list && this.list.querySelector('.' + 'e-active');
+        if (!selectedItem && !isNullOrUndefined(this.value)) {
+            var findEle = this.findListElement(this.list, 'li', 'data-value', this.value);
+            if (findEle) {
+                findEle.classList.add('e-active');
+            }
+        }
+    };
+    DropDownList.prototype.checkAndResetCache = function () {
+        if (this.enableVirtualization) {
+            this.generatedDataObject = {};
+            this.virtualItemStartIndex = this.virtualItemEndIndex = 0;
+            this.viewPortInfo = { currentPageNumber: null,
+                direction: null,
+                sentinelInfo: {},
+                offsets: {},
+                startIndex: 0,
+                endIndex: this.itemCount, };
+            this.selectedValueInfo = null;
+        }
+    };
     DropDownList.prototype.removeFocus = function () {
         var highlightedItem = this.list.querySelectorAll('.' + dropDownListClasses.focus);
         if (highlightedItem && highlightedItem.length) {
             removeClass(highlightedItem, dropDownListClasses.focus);
         }
     };
+    DropDownList.prototype.getTransformValues = function () {
+        var translateY = this.viewPortInfo.startIndex * this.listItemHeight;
+        translateY = translateY - (this.skeletonCount * this.listItemHeight);
+        translateY = this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0 ? 0 : translateY;
+        var styleText = "transform: translate(0px, " + translateY + "px);";
+        return styleText;
+    };
+    DropDownList.prototype.GetVirtualTrackHeight = function () {
+        var height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
+        var heightDimension = "height: " + (height - this.itemCount * this.listItemHeight) + "px;";
+        return heightDimension;
+    };
     DropDownList.prototype.renderPopup = function (e) {
         var _this = this;
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
@@ -1690,10 +2041,39 @@ var DropDownList = /** @class */ (function (_super) {
                     _this.setFooterTemplate(popupEle);
                 }
                 document.body.appendChild(popupEle);
+                if (_this.enableVirtualization && _this.itemTemplate) {
+                    var listitems = popupEle.querySelectorAll('li.e-list-item:not(.e-virtual-list)');
+                    _this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) : 0;
+                }
+                if (_this.enableVirtualization && !_this.list.classList.contains(dropDownBaseClasses.noData)) {
+                    if (!_this.list.querySelector('.e-virtual-ddl-content')) {
+                        _this.list.appendChild(_this.createElement('div', {
+                            className: 'e-virtual-ddl-content',
+                            styles: _this.getTransformValues()
+                        })).appendChild(_this.list.querySelector('.e-list-parent'));
+                    }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        _this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = _this.getTransformValues();
+                    }
+                    _this.UpdateSkeleton();
+                    _this.liCollections = _this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                    _this.virtualItemCount = _this.itemCount;
+                    if (!_this.list.querySelector('.e-virtual-ddl')) {
+                        var virualElement = _this.createElement('div', {
+                            id: _this.element.id + '_popup', className: 'e-virtual-ddl', styles: _this.GetVirtualTrackHeight()
+                        });
+                        popupEle.querySelector('.e-dropdownbase').appendChild(virualElement);
+                    }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        _this.list.getElementsByClassName('e-virtual-ddl')[0].style = _this.GetVirtualTrackHeight();
+                    }
+                }
                 popupEle.style.visibility = 'hidden';
                 if (_this.popupHeight !== 'auto') {
                     _this.searchBoxHeight = 0;
-                    if (!isNullOrUndefined(searchBox.container)) {
+                    if (!isNullOrUndefined(searchBox.container) && _this.getModuleName() !== 'combobox' && _this.getModuleName() !== 'autocomplete') {
                         _this.searchBoxHeight = (searchBox.container.parentElement).getBoundingClientRect().height;
                         _this.listHeight = (parseInt(_this.listHeight, 10) - (_this.searchBoxHeight)).toString() + 'px';
                     }
@@ -1715,9 +2095,13 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 var offsetValue = 0;
                 var left = void 0;
+                _this.isPreventScrollAction = true;
                 if (!isNullOrUndefined(_this.selectedLI) && (!isNullOrUndefined(_this.activeIndex) && _this.activeIndex >= 0)) {
                     _this.setScrollPosition();
                 }
+                else if (_this.enableVirtualization) {
+                    _this.setScrollPosition();
+                }
                 else {
                     _this.list.scrollTop = 0;
                 }
@@ -1733,6 +2117,7 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 _this.getFocusElement();
                 _this.createPopup(popupEle, offsetValue, left);
+                _this.popupContentElement = _this.popupObj.element.querySelector('.e-content');
                 _this.checkCollision(popupEle);
                 if (Browser.isDevice) {
                     _this.popupObj.element.classList.add(dropDownListClasses.device);
@@ -1765,6 +2150,24 @@ var DropDownList = /** @class */ (function (_super) {
                     _this.wireListEvents();
                 }
                 _this.selectedElementID = _this.selectedLI ? _this.selectedLI.id : null;
+                if (_this.enableVirtualization) {
+                    _this.notify("bindScrollEvent", {
+                        module: "VirtualScroll",
+                        component: _this.getModuleName(),
+                        enable: _this.enableVirtualization,
+                    });
+                    setTimeout(function () {
+                        if (_this.value) {
+                            _this.updateSelectionList();
+                            if (_this.selectedValueInfo && _this.viewPortInfo && _this.viewPortInfo.offsets.top) {
+                                _this.list.scrollTop = _this.viewPortInfo.offsets.top;
+                            }
+                            else {
+                                _this.scrollBottom(true, true);
+                            }
+                        }
+                    }, 5);
+                }
                 attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_options' });
                 _this.inputElement.setAttribute('aria-expanded', 'true');
                 var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;
@@ -1813,7 +2216,8 @@ var DropDownList = /** @class */ (function (_super) {
         var _this = this;
         this.popupObj = new Popup(element, {
             width: this.setWidth(), targetType: 'relative',
-            relateTo: this.inputWrapper.container, collision: { X: 'flip', Y: 'flip' }, offsetY: offsetValue,
+            relateTo: this.inputWrapper.container,
+            collision: this.enableRtl ? { X: 'fit', Y: 'flip' } : { X: 'flip', Y: 'flip' }, offsetY: offsetValue,
             enableRtl: this.enableRtl, offsetX: left,
             position: this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' },
             zIndex: this.zIndex,
@@ -1899,6 +2303,7 @@ var DropDownList = /** @class */ (function (_super) {
         var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
         var lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];
         var liHeight = firstItem.getBoundingClientRect().height;
+        this.listItemHeight = liHeight;
         var listHeight = this.list.offsetHeight / 2;
         var height = isNullOrUndefined(selectedLI) ? firstItem.offsetTop : selectedLI.offsetTop;
         var lastItemOffsetValue = lastItem.offsetTop;
@@ -1909,7 +2314,7 @@ var DropDownList = /** @class */ (function (_super) {
             offsetValue = (count - (this.liCollections.length - this.activeIndex)) * liHeight - popupOffset + paddingBottom;
             this.list.scrollTop = selectedLI.offsetTop;
         }
-        else if (height > listHeight) {
+        else if (height > listHeight && !this.enableVirtualization) {
             offsetValue = listHeight - liHeight / 2;
             this.list.scrollTop = height - listHeight + liHeight / 2;
         }
@@ -1935,34 +2340,114 @@ var DropDownList = /** @class */ (function (_super) {
         }
         return width;
     };
-    DropDownList.prototype.scrollBottom = function (isInitial) {
+    DropDownList.prototype.scrollBottom = function (isInitial, isInitialSelection, keyAction) {
+        if (isInitialSelection === void 0) { isInitialSelection = false; }
+        if (keyAction === void 0) { keyAction = null; }
+        if (isNullOrUndefined(this.selectedLI) && this.enableVirtualization) {
+            this.selectedLI = this.list.querySelector('.' + dropDownBaseClasses.li);
+            if (!isNullOrUndefined(this.selectedLI) && this.selectedLI.classList.contains('e-virtual-list')) {
+                this.selectedLI = this.liCollections[this.skeletonCount];
+            }
+        }
         if (!isNullOrUndefined(this.selectedLI)) {
+            this.isUpwardScrolling = false;
+            var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+            var lastElementValue = this.list.querySelector('li:last-of-type') ? this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;
+            var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
             var currentOffset = this.list.offsetHeight;
-            var nextBottom = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
+            var nextBottom = selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) + this.selectedLI.offsetHeight - this.list.scrollTop;
             var nextOffset = this.list.scrollTop + nextBottom - currentOffset;
-            nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset;
-            var boxRange = this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop;
+            var isScrollerCHanged = false;
+            var isScrollTopChanged = false;
+            nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10);
+            var boxRange = selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) + this.selectedLI.offsetHeight - this.list.scrollTop;
             boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
                 boxRange - this.fixedHeaderElement.offsetHeight : boxRange;
-            if (this.activeIndex === 0) {
+            if (this.activeIndex === 0 && !this.enableVirtualization) {
                 this.list.scrollTop = 0;
+                isScrollerCHanged = this.isKeyBoardAction;
             }
             else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {
-                this.list.scrollTop = nextOffset;
+                var currentElementValue = this.selectedLI ? this.selectedLI.getAttribute('data-value') : null;
+                var liCount = keyAction == "pageDown" ? this.getPageCount() - 2 : 1;
+                if (!this.enableVirtualization || this.isKeyBoardAction || isInitialSelection) {
+                    if (this.isKeyBoardAction && this.enableVirtualization && lastElementValue && currentElementValue === lastElementValue && keyAction != "end" && !this.isVirtualScrolling) {
+                        this.isPreventKeyAction = true;
+                        if (this.enableVirtualization && this.itemTemplate) {
+                            this.list.scrollTop += nextOffset;
+                        }
+                        else {
+                            this.list.scrollTop += this.selectedLI.offsetHeight * liCount;
+                        }
+                        this.isPreventKeyAction = this.IsScrollerAtEnd() ? false : this.isPreventKeyAction;
+                        this.isKeyBoardAction = false;
+                        this.isPreventScrollAction = false;
+                    }
+                    else if (this.enableVirtualization && keyAction == "end") {
+                        this.isPreventKeyAction = false;
+                        this.isKeyBoardAction = false;
+                        this.isPreventScrollAction = false;
+                        this.list.scrollTop = this.list.scrollHeight;
+                    }
+                    else {
+                        if (keyAction == "pageDown" && this.enableVirtualization && !this.isVirtualScrolling) {
+                            this.isPreventKeyAction = false;
+                            this.isKeyBoardAction = false;
+                            this.isPreventScrollAction = false;
+                            nextOffset = nextOffset + (this.selectedLI.offsetHeight * liCount);
+                        }
+                        this.list.scrollTop = nextOffset;
+                    }
+                }
+                else {
+                    this.list.scrollTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight : 0;
+                }
+                isScrollerCHanged = this.isKeyBoardAction;
+                isScrollTopChanged = true;
             }
+            this.isKeyBoardAction = isScrollerCHanged;
         }
     };
-    DropDownList.prototype.scrollTop = function () {
+    DropDownList.prototype.scrollTop = function (keyAction) {
+        if (keyAction === void 0) { keyAction = null; }
         if (!isNullOrUndefined(this.selectedLI)) {
-            var nextOffset = this.selectedLI.offsetTop - this.list.scrollTop;
+            var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+            var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+            var nextOffset = selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) - this.list.scrollTop;
+            var firstElementValue = this.list.querySelector('li.e-list-item:not(.e-virtual-list)') ? this.list.querySelector('li.e-list-item:not(.e-virtual-list)').getAttribute('data-value') : null;
             nextOffset = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
                 nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;
-            var boxRange = (this.selectedLI.offsetTop + this.selectedLI.offsetHeight - this.list.scrollTop);
-            if (this.activeIndex === 0) {
+            var boxRange = (selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) + this.selectedLI.offsetHeight - this.list.scrollTop);
+            var isPageUpKeyAction = this.enableVirtualization && this.getModuleName() === 'autocomplete' && nextOffset <= 0;
+            if (this.activeIndex === 0 && !this.enableVirtualization) {
                 this.list.scrollTop = 0;
             }
-            else if (nextOffset < 0) {
-                this.list.scrollTop = this.list.scrollTop + nextOffset;
+            else if (nextOffset < 0 || isPageUpKeyAction) {
+                var currentElementValue = this.selectedLI ? this.selectedLI.getAttribute('data-value') : null;
+                var liCount = keyAction == "pageUp" ? this.getPageCount() - 2 : 1;
+                if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue && currentElementValue === firstElementValue && keyAction != "home" && !this.isVirtualScrolling) {
+                    this.isUpwardScrolling = true;
+                    this.isPreventKeyAction = true;
+                    this.list.scrollTop -= this.selectedLI.offsetHeight * liCount;
+                    this.isPreventKeyAction = this.list.scrollTop != 0 ? this.isPreventKeyAction : false;
+                    this.isKeyBoardAction = false;
+                    this.isPreventScrollAction = false;
+                }
+                else if (this.enableVirtualization && keyAction == "home") {
+                    this.isPreventScrollAction = false;
+                    this.isPreventKeyAction = true;
+                    this.isKeyBoardAction = false;
+                    this.list.scrollTo(0, 0);
+                }
+                else {
+                    if (keyAction == "pageUp" && this.enableVirtualization && !this.isVirtualScrolling) {
+                        this.isPreventKeyAction = false;
+                        this.isKeyBoardAction = false;
+                        this.isPreventScrollAction = false;
+                        nextOffset = nextOffset - (this.selectedLI.offsetHeight * liCount);
+                    }
+                    this.list.scrollTop = this.list.scrollTop + nextOffset;
+                }
             }
             else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {
                 this.list.scrollTop = this.selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
@@ -1980,25 +2465,47 @@ var DropDownList = /** @class */ (function (_super) {
         return true;
     };
     DropDownList.prototype.setScrollPosition = function (e) {
+        this.isPreventScrollAction = true;
         if (!isNullOrUndefined(e)) {
             switch (e.action) {
                 case 'pageDown':
                 case 'down':
                 case 'end':
-                    this.scrollBottom();
+                    this.isKeyBoardAction = true;
+                    this.scrollBottom(false, false, e.action);
                     break;
                 default:
-                    this.scrollTop();
+                    this.isKeyBoardAction = e.action == 'up' || e.action == 'pageUp' || e.action == 'open';
+                    this.scrollTop(e.action);
                     break;
             }
         }
         else {
             this.scrollBottom(true);
         }
+        this.isKeyBoardAction = false;
     };
     DropDownList.prototype.clearText = function () {
         this.filterInput.value = this.typedString = '';
         this.searchLists(null);
+        if (this.enableVirtualization) {
+            this.list.scrollTop = 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (this.list.getElementsByClassName('e-virtual-ddl')[0]) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+            }
+            this.getSkeletonCount();
+            this.UpdateSkeleton();
+            this.liCollections = this.list.querySelectorAll('.e-list-item');
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (this.list.getElementsByClassName('e-virtual-ddl-content')[0]) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+            }
+        }
     };
     DropDownList.prototype.setEleWidth = function (width) {
         if (!isNullOrUndefined(width)) {
@@ -2012,10 +2519,13 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.closePopup = function (delay, e) {
         var _this = this;
+        var isFilterValue = !isNullOrUndefined(this.filterInput) && !isNullOrUndefined(this.filterInput.value) && this.filterInput.value !== '';
+        var typedString = this.getModuleName() === 'combobox' ? this.typedString : null;
         this.isTyped = false;
         if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {
             return;
         }
+        this.keyboardEvent = null;
         EventHandler.remove(document, 'mousedown', this.onDocumentClick);
         this.isActive = false;
         this.filterInputObj = null;
@@ -2057,6 +2567,20 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.isFiltering()) {
             this.actionCompleteData.isUpdated = false;
         }
+        if (this.enableVirtualization) {
+            if ((this.value == null || this.isTyped)) {
+                this.viewPortInfo.endIndex = this.viewPortInfo && this.viewPortInfo.endIndex > 0 ? this.viewPortInfo.endIndex : this.itemCount;
+                if (this.getModuleName() === 'autocomplete' || (this.getModuleName() === 'dropdownlist' && !isNullOrUndefined(this.typedString) && this.typedString != "") || (this.getModuleName() === 'combobox' && this.allowFiltering && !isNullOrUndefined(this.typedString) && this.typedString != "")) {
+                    this.checkAndResetCache();
+                }
+            }
+            else if (this.getModuleName() === 'autocomplete') {
+                this.checkAndResetCache();
+            }
+            if ((this.getModuleName() === 'dropdownlist' || this.getModuleName() === 'combobox') && !(this.skeletonCount == 0)) {
+                this.getSkeletonCount(true);
+            }
+        }
         this.beforePopupOpen = false;
         var animModel = {
             name: 'FadeOut',
@@ -2087,6 +2611,46 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
             this.actionCompleteData.ulElement = this.ulElement.cloneNode(true);
         }
+        var dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        if (this.enableVirtualization && this.isFiltering() && this.value != null && isFilterValue && this.totalItemCount !== dataSourceCount) {
+            this.updateInitialData();
+            this.checkAndResetCache();
+        }
+    };
+    DropDownList.prototype.updateInitialData = function () {
+        var currentData = this.selectData;
+        var ulElement = this.renderItems(currentData, this.fields);
+        this.list.scrollTop = 0;
+        this.virtualListInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: 0,
+        };
+        if (this.getModuleName() === 'combobox') {
+            this.typedString = "";
+        }
+        this.previousStartIndex = 0;
+        this.previousEndIndex = 0;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.list.getElementsByClassName('e-virtual-ddl')[0]) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+        }
+        this.getSkeletonCount();
+        this.UpdateSkeleton();
+        this.listData = currentData;
+        this.updateActionCompleteDataValues(ulElement, currentData);
+        this.liCollections = this.list.querySelectorAll('.e-list-item');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (this.list.getElementsByClassName('e-virtual-ddl-content')[0]) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+        }
     };
     DropDownList.prototype.destroyPopup = function () {
         this.isPopupOpen = false;
@@ -2173,10 +2737,10 @@ var DropDownList = /** @class */ (function (_super) {
         this.element.id = id;
         this.hiddenElement.id = id + '_hidden';
         this.targetElement().setAttribute('tabindex', this.tabIndex);
-        if (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') {
+        if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') && !this.readonly) {
             this.inputElement.setAttribute('aria-label', this.getModuleName());
         }
-        else {
+        else if (this.getModuleName() === 'dropdownlist') {
             attributes(this.targetElement(), { 'aria-label': this.getModuleName() });
         }
         attributes(this.targetElement(), this.getAriaAttributes());
@@ -2186,7 +2750,16 @@ var DropDownList = /** @class */ (function (_super) {
             this.inputElement.removeAttribute('aria-labelledby');
         }
         if (this.value !== null || this.activeIndex !== null || this.text !== null) {
+            if (this.enableVirtualization) {
+                this.listItemHeight = this.getListHeight();
+                this.getSkeletonCount();
+                this.updateVirtualizationProperties(this.itemCount, this.allowFiltering);
+            }
             this.initValue();
+            this.selectedValueInfo = this.viewPortInfo;
+            if (this.enableVirtualization) {
+                this.activeIndex = this.activeIndex + this.skeletonCount;
+            }
         }
         else if (this.element.tagName === 'SELECT' && this.element.options[0]) {
             var selectElement = this.element;
@@ -2222,6 +2795,29 @@ var DropDownList = /** @class */ (function (_super) {
             attributes(this.inputElement, { 'aria-labelledby': floatLabelElement.id });
         }
         this.renderComplete();
+        this.listItemHeight = this.getListHeight();
+        this.getSkeletonCount();
+        if (this.enableVirtualization) {
+            this.updateVirtualizationProperties(this.itemCount, this.allowFiltering);
+        }
+        this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.viewPortInfo.startIndex > 0 ? this.viewPortInfo.endIndex : this.itemCount;
+    };
+    DropDownList.prototype.getListHeight = function () {
+        var listParent = this.createElement('div', {
+            className: 'e-dropdownbase'
+        });
+        var item = this.createElement('li', {
+            className: 'e-list-item'
+        });
+        var listParentHeight = formatUnit(this.popupHeight);
+        listParent.style.height = (parseInt(listParentHeight, 10)).toString() + 'px';
+        listParent.appendChild(item);
+        document.body.appendChild(listParent);
+        this.virtualListHeight = listParent.getBoundingClientRect().height;
+        var listItemHeight = Math.ceil(item.getBoundingClientRect().height);
+        listParent.remove();
+        return listItemHeight;
     };
     DropDownList.prototype.setFooterTemplate = function (popupEle) {
         var compiledString;
@@ -2365,7 +2961,10 @@ var DropDownList = /** @class */ (function (_super) {
         var _loop_1 = function (prop) {
             switch (prop) {
                 case 'query':
-                case 'dataSource': break;
+                case 'dataSource':
+                    this_1.getSkeletonCount();
+                    this_1.checkAndResetCache();
+                    break;
                 case 'htmlAttributes':
                     this_1.setHTMLAttributes();
                     break;
@@ -2659,7 +3258,23 @@ var DropDownList = /** @class */ (function (_super) {
             this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {
             this.renderList(e);
         }
+        if (this.enableVirtualization && this.listData && this.listData.length) {
+            if (!isNullOrUndefined(this.value) && (this.getModuleName() === 'dropdownlist' || this.getModuleName() === 'combobox')) {
+                this.removeHover();
+            }
+            if (!this.beforePopupOpen) {
+                this.notify("setCurrentViewDataAsync", {
+                    module: "VirtualScroll",
+                });
+            }
+        }
         this.invokeRenderPopup(e);
+        if (this.enableVirtualization && !this.allowFiltering && this.selectedValueInfo != null && this.selectedValueInfo.startIndex > 0 && this.value != null) {
+            this.notify("dataProcessAsync", {
+                module: "VirtualScroll",
+                isOpen: true,
+            });
+        }
     };
     DropDownList.prototype.invokeRenderPopup = function (e) {
         if (Browser.isDevice && this.isFilterLayout()) {
@@ -2753,7 +3368,9 @@ var DropDownList = /** @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
-        this.isTyped = true;
+        if (!this.enableVirtualization && this.getModuleName() === 'combobox') {
+            this.isTyped = true;
+        }
         this.hidePopup(e);
         if (this.targetElement()) {
             this.targetElement().blur();
@@ -2809,6 +3426,7 @@ var DropDownList = /** @class */ (function (_super) {
         this.ulElement = null;
         this.list = null;
         this.popupObj = null;
+        this.popupContentElement = null;
         this.rippleFun = null;
         this.selectedLI = null;
         this.liCollections = null;
@@ -2905,6 +3523,9 @@ var DropDownList = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], DropDownList.prototype, "readonly", void 0);
+    __decorate([
+        Property(false)
+    ], DropDownList.prototype, "enableVirtualization", void 0);
     __decorate([
         Property(null)
     ], DropDownList.prototype, "text", void 0);