@syncfusion/ej2-dropdowns 24.2.8 → 25.1.35

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

@@ -1,9 +1,9 @@
 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 { Skeleton } from '@syncfusion/ej2-notifications';
 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';
 
@@ -379,7 +379,9 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         if (isQueryGenerated === void 0) { isQueryGenerated = false; }
         var dataSource = this.parent.dataSource;
         if (!isQueryGenerated) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (!isNullOrUndefined(this.parent.query)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var newQuery = this.removeSkipAndTakeEvents(this.parent.query.clone());
                 query = this.getPageQuery(newQuery, virtualItemStartIndex, virtualItemEndIndex);
             }
@@ -394,6 +396,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 totalData = this.parent.dataSource.dataSource.json.length;
             }
             else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 totalData = this.parent.dataSource.length;
             }
             if (totalData > 0) {
@@ -410,22 +413,151 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         });
         return query;
     };
-    VirtualScroll.prototype.setCurrentViewDataAsync = function () {
+    VirtualScroll.prototype.setCurrentViewDataAsync = function (component) {
         // eslint-disable-next-line
         var currentData = [];
-        for (var i = this.parent.viewPortInfo.startIndex; i < this.parent.viewPortInfo.endIndex; i++) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var alreadyAddedData = this.parent.generatedDataObject[i];
-            if (alreadyAddedData) {
-                currentData.push(alreadyAddedData[0]);
+        var isResetListCalled = false;
+        var isListUpdated = true;
+        if (isNullOrUndefined(this.component)) {
+            this.component = component.component;
+        }
+        var endIndex = this.parent.viewPortInfo.endIndex;
+        if (this.component === 'multiselect' && this.parent.mode === 'CheckBox' && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0 && this.parent.enableSelectionOrder) {
+            if (this.parent.viewPortInfo.startIndex < this.parent.value.length) {
+                endIndex = this.parent.viewPortInfo.endIndex - this.parent.value.length;
+                if (this.parent.viewPortInfo.startIndex === 0) {
+                    this.parent.updateVirtualReOrderList(true);
+                    if (this.parent.value.length < this.parent.itemCount) {
+                        var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
+                        if (oldUlElement) {
+                            this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
+                        }
+                        var query = this.parent.getForQuery(this.parent.value).clone();
+                        query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
+                        this.parent.appendUncheckList = true;
+                        this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                        isListUpdated = false;
+                        this.parent.appendUncheckList = false;
+                        isListUpdated = false;
+                    }
+                    else {
+                        var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
+                        if (oldUlElement) {
+                            this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
+                        }
+                    }
+                    isListUpdated = false;
+                }
+                else if (this.parent.viewPortInfo.startIndex != 0) {
+                    this.parent.updateVirtualReOrderList(true);
+                    var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
+                    if (oldUlElement) {
+                        this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
+                    }
+                    isListUpdated = false;
+                }
+                if (this.parent.viewPortInfo.startIndex != 0 && this.parent.viewPortInfo.startIndex - this.parent.value.length != this.parent.itemCount && (this.parent.viewPortInfo.startIndex + this.parent.itemCount > this.parent.value.length)) {
+                    var query = this.parent.getForQuery(this.parent.value).clone();
+                    query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
+                    this.parent.appendUncheckList = true;
+                    this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                    isListUpdated = false;
+                    this.parent.appendUncheckList = false;
+                }
+            }
+            else {
+                var reOrderList = this.parent.list.querySelectorAll('.e-reorder')[0];
+                if (this.parent.list.querySelector('.e-virtual-ddl-content') && reOrderList) {
+                    this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);
+                }
+                var query = this.parent.getForQuery(this.parent.value).clone();
+                if (!this.parent.allowFiltering) { //need to check with allowFiltering false
+                    var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0 ? this.parent.viewPortInfo.startIndex - this.parent.value.length : 0;
+                    query = query.skip(skipvalue);
+                }
+                this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                isListUpdated = false;
+            }
+            this.parent.totalItemsCount();
+        }
+        if (isListUpdated) {
+            for (var i = this.parent.viewPortInfo.startIndex; i < endIndex; i++) {
+                var index = i;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var alreadyAddedData = this.parent.generatedDataObject[index];
+                if (this.component === 'multiselect' && this.parent.hideSelectedItem) {
+                    if (alreadyAddedData) {
+                        var value = getValue(this.parent.fields.value, alreadyAddedData[0]);
+                        if (this.parent.value && value != null && Array.isArray(this.parent.value) && this.parent.value.length > 0 && this.parent.value.indexOf(value) < 0) {
+                            var query = this.parent.getForQuery(this.parent.value).clone();
+                            if (this.parent.viewPortInfo.endIndex == this.parent.totalItemCount + this.parent.value.length && this.parent.hideSelectedItem) {
+                                query = query.skip(this.parent.totalItemCount - this.parent.itemCount);
+                            }
+                            else {
+                                query = query.skip(this.parent.viewPortInfo.startIndex);
+                            }
+                            this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                            isResetListCalled = true;
+                            break;
+                        }
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        else if ((this.parent.value === null || (this.parent.value && this.parent.value.length === 0))) {
+                            currentData.push(alreadyAddedData[0]);
+                        }
+                    }
+                    if (index === endIndex - 1) {
+                        if (currentData.length != this.parent.itemCount) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            if (this.parent.hideSelectedItem) {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                var query = this.parent.getForQuery(this.parent.value).clone();
+                                if (this.parent.viewPortInfo.endIndex == this.parent.totalItemCount + this.parent.value.length && this.parent.hideSelectedItem) {
+                                    query = query.skip(this.parent.totalItemCount - this.parent.itemCount);
+                                }
+                                else {
+                                    query = query.skip(this.parent.viewPortInfo.startIndex);
+                                }
+                                this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                                isResetListCalled = true;
+                            }
+                        }
+                    }
+                }
+                else {
+                    if (alreadyAddedData) {
+                        currentData.push(alreadyAddedData[0]);
+                    }
+                }
             }
         }
-        this.parent.renderItems(currentData, this.parent.fields);
+        if (!isResetListCalled && isListUpdated) {
+            if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.startIndex == 0 && this.parent.virtualCustomData) {
+                currentData.splice(0, 0, this.parent.virtualCustomData);
+            }
+            var totalData = [];
+            if (this.component === 'multiselect' && this.parent.allowCustomValue && this.parent.viewPortInfo.endIndex == this.parent.totalItemCount) {
+                if (this.parent.virtualCustomSelectData && this.parent.virtualCustomSelectData.length > 0) {
+                    totalData = currentData.concat(this.parent.virtualCustomSelectData);
+                    currentData = totalData;
+                }
+            }
+            var ulElement = this.parent.renderItems(currentData, this.parent.fields, this.component === 'multiselect' && this.parent.mode === 'CheckBox');
+        }
+        if (this.component === 'multiselect') {
+            this.parent.updatevirtualizationList();
+        }
+        this.parent.getSkeletonCount();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0];
         if (virtualTrackElement) {
             (virtualTrackElement).style = this.parent.GetVirtualTrackHeight();
         }
+        else if (!virtualTrackElement && this.parent.skeletonCount > 0 && this.parent.popupWrapper) {
+            var virualElement = this.parent.createElement('div', {
+                id: this.parent.element.id + '_popup', className: 'e-virtual-ddl', styles: this.parent.GetVirtualTrackHeight()
+            });
+            this.parent.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
+        }
         this.parent.UpdateSkeleton();
         this.parent.liCollections = this.parent.list.querySelectorAll('.e-list-item');
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -436,13 +568,17 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         if (this.parent.fields.groupBy) {
             this.parent.scrollStop();
         }
+        if (this.parent.keyCode == 40 && this.parent.isScrollChanged && this.parent.hideSelectedItem && !isNullOrUndefined(this.parent.currentFocuedListElement)) {
+            var currentSelectElem = this.parent.getElementByValue(this.parent.currentFocuedListElement.getAttribute('data-value'));
+            this.parent.addListFocus(currentSelectElem);
+            this.parent.isScrollChanged = false;
+        }
     };
     VirtualScroll.prototype.generateQueryAndSetQueryIndexAsync = function (query, isPopupOpen) {
         var isStartIndexInitialised = false;
         var queryStartIndex = 0;
         var queryEndIndex = 0;
-        var sortedDataStartIndex = 0;
-        var vEndIndex = this.parent && this.parent.viewPortInfo.endIndex !== 0 ? this.parent.viewPortInfo.endIndex : sortedDataStartIndex + this.parent.getItems().length;
+        var vEndIndex = this.parent.viewPortInfo.endIndex;
         if (!isPopupOpen && vEndIndex !== 0) {
             for (var i = this.parent.viewPortInfo.startIndex; i <= vEndIndex; i++) {
                 if (!(i in this.parent.generatedDataObject)) {
@@ -460,6 +596,13 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
             this.parent.virtualItemStartIndex = queryStartIndex;
             this.parent.virtualItemEndIndex = queryEndIndex;
             this.generateAndExecuteQueryAsync(query, queryStartIndex, queryEndIndex);
+            if (this.component === 'multiselect' && this.parent.hideSelectedItem && this.parent.value && Array.isArray(this.parent.value) && this.parent.value.length > 0) {
+                this.parent.totalItemsCount();
+            }
+            if (this.component === 'multiselect' && this.parent.virtualItemStartIndex === this.parent.virtualItemEndIndex) {
+                this.parent.virtualItemStartIndex = this.parent.viewPortInfo.startIndex;
+                this.parent.virtualItemEndIndex = this.parent.viewPortInfo.endIndex;
+            }
         }
         this.setCurrentViewDataAsync();
     };
@@ -505,7 +648,8 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
     };
     VirtualScroll.prototype.scrollListener = function (scrollArgs) {
         var _this = this;
-        if (!this.parent.isPreventScrollAction) {
+        if (!this.parent.isPreventScrollAction && !this.parent.isVirtualTrackHeight) {
+            this.parent.preventSetCurrentData = false;
             var info = scrollArgs.sentinel;
             var pStartIndex = this.parent.previousStartIndex;
             this.parent.viewPortInfo = this.getInfoFromView(scrollArgs.direction, info, scrollArgs.offset, false);
@@ -541,20 +685,6 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
             this.parent.previousInfo = this.parent.viewPortInfo;
         }
     };
-    VirtualScroll.prototype.getPageCount = function (popupElement, returnExactCount) {
-        if (returnExactCount === void 0) { returnExactCount = false; }
-        var list = popupElement && popupElement.querySelector('.e-content');
-        if (list) {
-            var liHeight = list.classList.contains('e-nodata') ? null : getComputedStyle(list.querySelectorAll('.e-list-item')[0], null).getPropertyValue('height');
-            var pageCount = list.getBoundingClientRect().height / parseInt(liHeight, 10);
-            return returnExactCount ? pageCount : Math.round(pageCount);
-        }
-        return 0;
-    };
-    
-    VirtualScroll.prototype.getRowHeight = function () {
-        return (isNullOrUndefined(this.parent.liCollections) || this.parent.liCollections.length == 0) ? 0 : Math.ceil(this.parent.liCollections[0].getBoundingClientRect().height);
-    };
     VirtualScroll.prototype.getInfoFromView = function (direction, info, e, isscrollAction) {
         var infoType = {
             direction: direction, sentinelInfo: info, offsets: e,
@@ -590,7 +720,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                     var idxAddedToExactTop = (pageSizeBy4) > infoViewIndices ? pageSizeBy4 :
                         (infoViewIndices + infoViewIndices / 4);
                     var eIndex = Math.round(exactTopIndex + idxAddedToExactTop);
-                    infoType.endIndex = eIndex < totalItemCount ? eIndex : totalItemCount;
+                    infoType.endIndex = (eIndex < totalItemCount || this.component == "multiselect") ? eIndex : totalItemCount;
                     var sIndex = infoType.endIndex - this.parent.virtualItemCount;
                     infoType.startIndex = sIndex > 0 ? sIndex : 0;
                     infoType.endIndex = sIndex < 0 ? this.parent.virtualItemCount : infoType.endIndex;
@@ -625,7 +755,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 top: top,
                 left: left
             };
-            if (_this.parent.list.querySelectorAll('.e-virtual-list').length > 0) {
+            if (_this.parent.list && _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;
@@ -704,7 +834,8 @@ var dropDownBaseClasses = {
     li: 'e-list-item',
     group: 'e-list-group-item',
     disabled: 'e-disabled',
-    grouping: 'e-dd-group'
+    grouping: 'e-dd-group',
+    virtualList: 'e-list-item e-virtual-list',
 };
 var ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
 var DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';
@@ -738,13 +869,63 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         _this.isAddNewItemTemplate = false;
         _this.isRequesting = false;
         _this.isVirtualizationEnabled = false;
+        _this.isCustomDataUpdated = false;
         _this.isAllowFiltering = false;
         _this.virtualizedItemsCount = 0;
+        _this.isCheckBoxSelection = false;
         _this.totalItemCount = 0;
         _this.dataCount = 0;
         _this.isRemoteDataUpdated = false;
         _this.isIncrementalRequest = 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.isScrollChanged = false;
+        _this.isUpwardScrolling = false;
+        _this.startIndex = 0;
+        _this.currentPageNumber = 0;
+        _this.pageCount = 0;
+        _this.isPreventKeyAction = false;
+        _this.generatedDataObject = {};
+        _this.skeletonCount = 32;
+        _this.isVirtualTrackHeight = false;
+        _this.virtualSelectAll = false;
+        _this.incrementalQueryString = '';
+        _this.incrementalEndIndex = 0;
+        _this.incrementalStartIndex = 0;
+        _this.incrementalPreQueryString = '';
+        _this.isObjectCustomValue = false;
+        _this.appendUncheckList = false;
+        _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,
+        };
         return _this;
     }
     DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {
@@ -958,6 +1139,124 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    DropDownBase.prototype.checkAndResetCache = function () {
+        if (this.isVirtualizationEnabled) {
+            this.generatedDataObject = {};
+            this.virtualItemStartIndex = this.virtualItemEndIndex = 0;
+            this.viewPortInfo = {
+                currentPageNumber: null,
+                direction: null,
+                sentinelInfo: {},
+                offsets: {},
+                startIndex: 0,
+                endIndex: this.itemCount,
+            };
+            this.selectedValueInfo = null;
+        }
+    };
+    DropDownBase.prototype.updateIncrementalInfo = function (startIndex, endIndex) {
+        this.viewPortInfo.startIndex = startIndex;
+        this.viewPortInfo.endIndex = endIndex;
+        this.updateVirtualItemIndex();
+        this.isIncrementalRequest = true;
+        this.resetList(this.dataSource, this.fields, this.query);
+        this.isIncrementalRequest = false;
+    };
+    DropDownBase.prototype.updateIncrementalView = function (startIndex, endIndex) {
+        this.viewPortInfo.startIndex = startIndex;
+        this.viewPortInfo.endIndex = endIndex;
+        this.updateVirtualItemIndex();
+        this.resetList(this.dataSource, this.fields, this.query);
+        this.UpdateSkeleton();
+        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+        this.ulElement = this.list.querySelector('ul');
+    };
+    DropDownBase.prototype.updateVirtualItemIndex = function () {
+        this.virtualItemStartIndex = this.viewPortInfo.startIndex;
+        this.virtualItemEndIndex = this.viewPortInfo.endIndex;
+        this.virtualListInfo = this.viewPortInfo;
+    };
+    DropDownBase.prototype.getFilteringSkeletonCount = function () {
+        var difference = this.dataCount - this.viewPortInfo.endIndex;
+        var currentSkeletonCount = this.skeletonCount;
+        this.getSkeletonCount(true);
+        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
+        var skeletonUpdated = true;
+        if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && (this.totalItemCount < (this.itemCount * 2))) {
+            this.skeletonCount = 0;
+            skeletonUpdated = false;
+        }
+        if (!this.list.classList.contains(dropDownBaseClasses.noData)) {
+            var isSkeletonCountChange = currentSkeletonCount !== this.skeletonCount;
+            if (currentSkeletonCount !== this.skeletonCount && skeletonUpdated) {
+                this.UpdateSkeleton(true, Math.abs(currentSkeletonCount - this.skeletonCount));
+            }
+            else {
+                this.UpdateSkeleton();
+            }
+            this.liCollections = this.list.querySelectorAll('.e-list-item');
+            if ((this.list.getElementsByClassName('e-virtual-ddl').length > 0)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+            }
+            else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0 && this.list.querySelector('.e-dropdownbase')) {
+                var virualElement = this.createElement('div', {
+                    id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                });
+                this.list.querySelector('.e-dropdownbase').appendChild(virualElement);
+            }
+            if (this.list.getElementsByClassName('e-virtual-ddl-content').length > 0) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+            }
+        }
+    };
+    DropDownBase.prototype.getSkeletonCount = function (retainSkeleton) {
+        this.virtualListHeight = this.listContainerHeight != null ? parseInt(this.listContainerHeight, 10) : this.virtualListHeight;
+        var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
+        this.skeletonCount = actualCount * 2 < this.itemCount ? this.itemCount : actualCount * 2;
+        this.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;
+        this.skeletonCount = Math.floor(this.skeletonCount / 2) + 2;
+    };
+    DropDownBase.prototype.GetVirtualTrackHeight = function () {
+        var height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
+        height = this.isVirtualTrackHeight ? 0 : height;
+        var heightDimension = "height: " + (height - this.itemCount * this.listItemHeight) + "px;";
+        if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && this.skeletonCount === 0) {
+            return "height: 0px;";
+        }
+        return heightDimension;
+    };
+    DropDownBase.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;
+    };
+    DropDownBase.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.isVirtualizationEnabled) {
+            var totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
+            for (var i = 0; i < totalSkeletonCount; i++) {
+                var liElement = this.createElement('li', { className: dropDownBaseClasses.virtualList, styles: 'overflow: inherit' });
+                if (this.isVirtualizationEnabled && 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 && isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
+            }
+        }
+    };
     DropDownBase.prototype.getLocaleName = function () {
         return 'drop-down-base';
     };
@@ -1152,7 +1451,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                             _this.trigger('actionComplete', e, function (e) {
                                 if (!_this.virtualGroupDataSource && _this.isVirtualizationEnabled) {
                                     _this.isRemoteDataUpdated = true;
-                                    if ((_this.getModuleName() === 'combobox' && _this.isAllowFiltering && _this.isVirtualizationEnabled && e.result)) {
+                                    if ((_this.getModuleName() === 'combobox' && !_this.initialRemoteRender && _this.isAllowFiltering && _this.isVirtualizationEnabled && e.result)) {
                                         e.result = e.result.result;
                                     }
                                     if (e.result.length > 0) {
@@ -1206,31 +1505,52 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                     }
                     else {
                         _this.isRequesting = false;
+                        var isReOrder = true;
                         var listItems = void 0;
                         if (_this.isVirtualizationEnabled && !_this.virtualGroupDataSource && _this.fields.groupBy) {
                             var data = new DataManager(_this.dataSource).executeLocal(new Query().group(_this.fields.groupBy));
                             _this.virtualGroupDataSource = data.records;
                         }
-                        var dataManager = _this.isVirtualizationEnabled && _this.virtualGroupDataSource ? new DataManager(_this.virtualGroupDataSource) : new DataManager(eventArgs.data);
+                        var dataManager = _this.isVirtualizationEnabled && _this.virtualGroupDataSource && !_this.isCustomDataUpdated ? new DataManager(_this.virtualGroupDataSource) : new DataManager(eventArgs.data);
                         listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
-                        if (_this.isVirtualizationEnabled && _this.getModuleName() === 'autocomplete' && (listItems.count != 0 && listItems.count < (_this.itemCount * 2))) {
+                        if (!_this.virtualSelectAll) {
                             var newQuery = _this.getQuery(eventArgs.query);
-                            if (newQuery) {
-                                for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
-                                    if (newQuery.queries[queryElements].fn === 'onTake') {
-                                        newQuery.queries[queryElements].e.nos = listItems.count;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            if (_this.isVirtualizationEnabled && (listItems.count != 0 && listItems.count < (_this.itemCount * 2))) {
+                                if (newQuery) {
+                                    for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                        if (newQuery.queries[queryElements].fn === 'onTake') {
+                                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                            newQuery.queries[queryElements].e.nos = listItems.count;
+                                            listItems = (newQuery).executeLocal(dataManager);
+                                        }
+                                        if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition == 'or' || newQuery.queries[queryElements].e.operator == 'equal')) {
+                                            isReOrder = false;
+                                        }
+                                    }
+                                    if (isReOrder) {
                                         listItems = (newQuery).executeLocal(dataManager);
-                                        break;
+                                        _this.isVirtualTrackHeight = true;
+                                    }
+                                }
+                            }
+                            else {
+                                _this.isVirtualTrackHeight = false;
+                                if (newQuery) {
+                                    for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                        if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition == 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator == 'equal'))) {
+                                            isReOrder = false;
+                                        }
                                     }
                                 }
                             }
                         }
-                        // 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;
+                        if (isReOrder) {
+                            // eslint-disable @typescript-eslint/no-explicit-any
+                            _this.dataCount = _this.totalItemCount = _this.virtualSelectAll ? listItems.length : listItems.count;
+                        }
+                        listItems = _this.isVirtualizationEnabled && !_this.virtualSelectAll ? listItems.result : listItems;
+                        // eslint-enable @typescript-eslint/no-explicit-any
                         var localDataArgs = { cancel: false, result: listItems };
                         _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                         _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {
@@ -1278,6 +1598,13 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             this.raiseDataBound(listItems, e);
         }
     };
+    DropDownBase.prototype.isObjectInArray = function (objectToFind, array) {
+        return array.some(function (item) {
+            return Object.keys(objectToFind).every(function (key) {
+                return item.hasOwnProperty(key) && item[key] === objectToFind[key];
+            });
+        });
+    };
     DropDownBase.prototype.updateListValues = function () {
         // Used this method in component side.
     };
@@ -1318,6 +1645,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         var listItems = [];
         this.onActionComplete(this.renderItems(listItems, fields), listItems);
         this.isRequested = false;
+        this.isRequesting = false;
         this.hideSpinner();
     };
     DropDownBase.prototype.showSpinner = function () {
@@ -1338,7 +1666,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
     DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         this.listData = list;
-        if (this.isVirtualizationEnabled) {
+        if (this.isVirtualizationEnabled && !this.isCustomDataUpdated) {
             this.notify("setGeneratedData", {
                 module: "VirtualScroll",
             });
@@ -1397,10 +1725,11 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
     DropDownBase.prototype.getQuery = function (query) {
         return query ? query : this.query ? this.query : new Query();
     };
-    DropDownBase.prototype.updateVirtualizationProperties = function (itemCount, filtering) {
+    DropDownBase.prototype.updateVirtualizationProperties = function (itemCount, filtering, isCheckbox) {
         this.isVirtualizationEnabled = true;
         this.virtualizedItemsCount = itemCount;
         this.isAllowFiltering = filtering;
+        this.isCheckBoxSelection = isCheckbox;
     };
     /**
      * To render the template content for group header element.
@@ -1512,7 +1841,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 if (isCount) {
                     count++;
                 }
-                if (this.updateGroupHeader(index, liCollections, target)) {
+                if (this.fixedHeaderElement && this.updateGroupHeader(index, liCollections, target)) {
                     loadedGroupList++;
                     if (count >= this.getPageCount()) {
                         break;
@@ -1568,7 +1897,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @returns {HTMLElement} Return the list items.
      */
-    DropDownBase.prototype.renderItems = function (listData, fields) {
+    DropDownBase.prototype.renderItems = function (listData, fields, isCheckBoxUpdate) {
         var ulElement;
         if (this.itemTemplate && listData) {
             var dataSource = listData;
@@ -1591,6 +1920,10 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 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);
+                    var reOrderList = this.list.querySelectorAll('.e-reorder');
+                    if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList && reOrderList.length > 0 && !isCheckBoxUpdate) {
+                        this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList[0]);
+                    }
                     this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
@@ -1602,6 +1935,10 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else {
+            if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {
+                this.virtualSelectAllData = listData;
+                listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);
+            }
             ulElement = this.createListItems(listData, fields);
             if (this.isIncrementalRequest) {
                 this.incrementalLiCollections = ulElement.querySelectorAll('.' + dropDownBaseClasses.li);
@@ -1610,10 +1947,19 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 return ulElement;
             }
             if (this.isVirtualizationEnabled) {
-                var oldUlElement = this.list.querySelector('.e-list-parent');
+                var oldUlElement = this.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
                 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);
+                var isRemovedUlelement = false;
+                if (!oldUlElement && this.list.querySelector('.e-list-parent' + '.e-reorder')) {
+                    oldUlElement = this.list.querySelector('.e-list-parent' + '.e-reorder');
+                }
+                if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect')) || isRemovedUlelement) {
+                    if (!this.appendUncheckList) {
+                        virtualUlElement.replaceChild(ulElement, oldUlElement);
+                    }
+                    else {
+                        virtualUlElement.appendChild(ulElement);
+                    }
                     this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
@@ -1806,11 +2152,11 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         this.render();
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    DropDownBase.prototype.updateDataSource = function (props) {
+    DropDownBase.prototype.updateDataSource = function (props, oldProps) {
         this.resetList(this.dataSource);
         this.totalItemCount = this.dataSource instanceof DataManager ? this.dataSource.dataSource.json.length : 0;
     };
-    DropDownBase.prototype.setUpdateInitial = function (props, newProp) {
+    DropDownBase.prototype.setUpdateInitial = function (props, newProp, oldProp) {
         this.isDataFetched = false;
         var updateData = {};
         for (var j = 0; props.length > j; j++) {
@@ -1826,7 +2172,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             if (Object.keys(updateData).indexOf('dataSource') === -1) {
                 updateData.dataSource = this.dataSource;
             }
-            this.updateDataSource(updateData);
+            this.updateDataSource(updateData, oldProp);
         }
     };
     /**
@@ -2294,55 +2640,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
      */
     function DropDownList(options, element) {
         var _this = _super.call(this, options, element) || this;
-        _this.skeletonCount = 32;
         _this.isListSearched = false;
         _this.preventChange = false;
         _this.isAngular = false;
-        _this.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.incrementalQueryString = '';
-        _this.incrementalEndIndex = 0;
-        _this.incrementalStartIndex = 0;
-        _this.incrementalPreQueryString = '';
         _this.isTouched = false;
-        _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;
+        _this.IsScrollerAtEnd = function () {
+            return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
         };
         return _this;
     }
@@ -2367,7 +2670,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.isFilterFocus = false;
         this.beforePopupOpen = false;
         this.initial = true;
-        this.initRemoteRender = false;
+        this.initialRemoteRender = false;
         this.isNotSearchList = false;
         this.isTyped = false;
         this.isSelected = false;
@@ -2429,6 +2732,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
         }
+        if (this.enableVirtualization && this.isFiltering() && this.getModuleName() === 'combobox') {
+            this.UpdateSkeleton();
+            this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+            this.ulElement = this.list.querySelector('ul');
+        }
         this.unWireListEvents();
         this.wireListEvents();
     };
@@ -2477,7 +2785,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.resetSelection(properties);
         }
         var dataItem = this.getItemData();
-        if (this.previousValue === dataItem.value) {
+        if ((!this.allowObjectBinding && (this.previousValue === dataItem.value)) || (this.allowObjectBinding && this.previousValue && this.isObjectInArray(this.previousValue, [this.allowCustom ? this.value ? this.value : dataItem : dataItem.value ? this.getDataByValue(dataItem.value) : dataItem]))) {
             return;
         }
         this.onChangeEvent(e);
@@ -2658,7 +2966,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
-            this.initRemoteRender = true;
+            this.initialRemoteRender = true;
         }
         else {
             this.updateValues();
@@ -2667,7 +2975,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.updateValues = function () {
         this.selectedValueInfo = this.viewPortInfo;
         if (!isNullOrUndefined(this.value)) {
-            this.setSelection(this.getElementByValue(this.value), null);
+            var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue(((this.fields.value) ? this.fields.value : ''), this.value) : this.value;
+            this.setSelection(this.getElementByValue(value), null);
         }
         else if (this.text && isNullOrUndefined(this.value)) {
             var element = this.getElementByText(this.text);
@@ -2892,23 +3201,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.isValidLI = function (li) {
         return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');
     };
-    DropDownList.prototype.updateIncrementalInfo = function (startIndex, endIndex) {
-        this.viewPortInfo.startIndex = startIndex;
-        this.viewPortInfo.endIndex = endIndex;
-        this.updateVirtualItemIndex();
-        this.isIncrementalRequest = true;
-        this.resetList(this.dataSource, this.fields, this.query);
-        this.isIncrementalRequest = false;
-    };
-    DropDownList.prototype.updateIncrementalView = function (startIndex, endIndex) {
-        this.viewPortInfo.startIndex = startIndex;
-        this.viewPortInfo.endIndex = endIndex;
-        this.updateVirtualItemIndex();
-        this.resetList(this.dataSource, this.fields, this.query);
-        this.UpdateSkeleton();
-        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-        this.ulElement = this.list.querySelector('ul');
-    };
     DropDownList.prototype.updateIncrementalItemIndex = function (startIndex, endIndex) {
         this.incrementalStartIndex = startIndex;
         this.incrementalEndIndex = endIndex;
@@ -3076,10 +3368,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             var isTabAction = e.action === 'tab' || e.action === 'close';
             if (isNullOrUndefined(this.list) && !this.isRequested && !isTabAction && e.action !== 'escape') {
                 this.searchKeyEvent = e;
-                this.renderList(e);
-                this.UpdateSkeleton();
-                this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                this.ulElement = this.list.querySelector('ul');
+                if (!this.enableVirtualization || (this.enableVirtualization && this.getModuleName() !== 'autocomplete' && e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38))) {
+                    this.renderList(e);
+                    this.UpdateSkeleton();
+                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                    this.ulElement = this.list.querySelector('ul');
+                }
             }
             if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
                 isNavigation && this.liCollections.length === 0) || this.isRequested) {
@@ -3238,7 +3532,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.activeIndex = filterIndex;
             }
         }
-        if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {
+        if (this.allowFiltering && this.getModuleName() === 'dropdownlist' && this.filterInput) {
             if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
                 attributes(this.filterInput, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
             }
@@ -3248,11 +3542,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         e.preventDefault();
     };
-    DropDownList.prototype.updateVirtualItemIndex = function () {
-        this.virtualItemStartIndex = this.viewPortInfo.startIndex;
-        this.virtualItemEndIndex = this.viewPortInfo.endIndex;
-        this.virtualListInfo = this.viewPortInfo;
-    };
     DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
             var findLi = 0;
@@ -3401,6 +3690,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     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];
+        if (this.enableVirtualization && this.skeletonCount > 0) {
+            steps = this.getModuleName() === 'dropdownlist' && this.allowFiltering ? steps + 1 : steps;
+            previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
+        }
         if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
             previousItem = steps <= list.length ? this.liCollections[steps + this.skeletonCount - 1] : this.liCollections[list.length - 1];
         }
@@ -3565,7 +3858,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.selectEventCallback = function (li, e, preventSelect, selectedData, value) {
         this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
         if (this.itemData != selectedData) {
-            this.previousValue = (!isNullOrUndefined(this.itemData)) ? typeof this.itemData == "object" ? this.checkFieldValue(this.itemData, this.fields.value.split('.')) : this.itemData : null;
+            this.previousValue = (!isNullOrUndefined(this.itemData)) ? typeof this.itemData == "object" && !this.allowObjectBinding ? this.checkFieldValue(this.itemData, this.fields.value.split('.')) : this.itemData : null;
         }
         this.item = li;
         this.itemData = selectedData;
@@ -3623,7 +3916,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (this.isFiltering() && clearElement) {
             clearElement.style.removeProperty('visibility');
         }
-        if (this.previousValue === dataItem.value) {
+        if ((!this.allowObjectBinding && (this.previousValue === dataItem.value)) || (this.allowObjectBinding && (this.previousValue != null && this.isObjectInArray(this.previousValue, [this.allowCustom && this.isObjectCustomValue ? this.value ? this.value : dataItem : dataItem.value ? this.getDataByValue(dataItem.value) : dataItem])))) {
             this.isSelected = false;
             return true;
         }
@@ -3637,34 +3930,34 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownList.prototype.setSelection = function (li, e) {
-        var _this = this;
         if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected
             && li.classList.contains(dropDownBaseClasses.selected)))) {
             this.updateSelectedItem(li, e, false, true);
         }
         else {
             this.setSelectOptions(li, e);
-            if (this.enableVirtualization) {
+            if (this.enableVirtualization && this.value) {
                 var fields = (this.fields.value) ? this.fields.value : '';
-                if (this.dataSource instanceof DataManager) {
-                    this.dataSource.executeQuery(new Query().where(new Predicate(fields, 'equal', this.value)))
-                        .then(function (e) {
-                        if (e.result.length > 0) {
-                            _this.itemData = e.result[0];
-                            var dataItem = _this.getItemData();
-                            if ((_this.value === dataItem.value && _this.text !== dataItem.text) || (_this.value !== dataItem.value && _this.text === dataItem.text)) {
-                                _this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
-                            }
+                var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                    var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        var dataItem = this.getItemData();
+                        var value = this.allowObjectBinding ? this.getDataByValue(dataItem.value) : dataItem.value;
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': value });
                         }
-                    });
+                    }
                 }
                 else {
-                    var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
+                    var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
                         var dataItem = this.getItemData();
+                        var value = this.allowObjectBinding ? this.getDataByValue(dataItem.value) : dataItem.value;
                         if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
-                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                            this.setProperties({ 'text': dataItem.text, 'value': value });
                         }
                     }
                 }
@@ -3778,10 +4071,23 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
      * @param {MouseEvent | KeyboardEvent | TouchEvent} eve - Specifies the event arguments.
      * @returns {void}
      */
-    DropDownList.prototype.onChangeEvent = function (eve) {
+    DropDownList.prototype.onChangeEvent = function (eve, isCustomValue) {
+        var _this = this;
         var dataItem = this.getItemData();
         var index = this.isSelectCustom ? null : this.activeIndex;
-        this.setProperties({ 'index': index, 'text': dataItem.text, 'value': dataItem.value }, true);
+        if (this.enableVirtualization) {
+            var datas = this.dataSource instanceof DataManager ? this.virtualGroupDataSource : this.dataSource;
+            if (dataItem.value && datas && datas.length > 0) {
+                var foundIndex = datas.findIndex(function (data) {
+                    return !isNullOrUndefined(dataItem.value) && getValue(_this.fields.value, data) === dataItem.value;
+                });
+                if (foundIndex !== -1) {
+                    index = foundIndex;
+                }
+            }
+        }
+        var value = this.allowObjectBinding ? isCustomValue ? this.value : this.getDataByValue(dataItem.value) : dataItem.value;
+        this.setProperties({ 'index': index, 'text': dataItem.text, 'value': value }, true);
         this.detachChangeEvent(eve);
     };
     DropDownList.prototype.detachChanges = function (value) {
@@ -3808,7 +4114,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.detachChangeEvent = function (eve) {
         this.isSelected = false;
         this.previousValue = this.value;
-        this.activeIndex = this.index;
+        this.activeIndex = this.enableVirtualization ? this.getIndexByValue(this.value) : this.index;
         this.typedString = !isNullOrUndefined(this.text) ? this.text : '';
         if (!this.initial) {
             var items = this.detachChanges(this.itemData);
@@ -3855,16 +4161,17 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     };
     DropDownList.prototype.setHiddenValue = function () {
         if (!isNullOrUndefined(this.value)) {
+            var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
             if (this.hiddenElement.querySelector('option')) {
                 var selectedElement = this.hiddenElement.querySelector('option');
                 selectedElement.textContent = this.text;
-                selectedElement.setAttribute('value', this.value.toString());
+                selectedElement.setAttribute('value', value.toString());
             }
             else {
                 if (!isNullOrUndefined(this.hiddenElement)) {
                     this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
                     var selectedElement = this.hiddenElement.querySelector('option');
-                    selectedElement.setAttribute('value', this.value.toString());
+                    selectedElement.setAttribute('value', value.toString());
                 }
             }
         }
@@ -3881,6 +4188,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.onFilterUp = function (e) {
         if (!(e.ctrlKey && e.keyCode === 86) && (this.isValidKey || e.keyCode === 40 || e.keyCode === 38)) {
             this.isValidKey = false;
+            this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
             switch (e.keyCode) {
                 case 38: //up arrow
                 case 40: //down arrow
@@ -3937,42 +4245,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.isValidKey = false;
         }
     };
-    DropDownList.prototype.getFilteringSkeletonCount = function () {
-        var difference = this.dataCount - this.viewPortInfo.endIndex;
-        var currentSkeletonCount = this.skeletonCount;
-        this.getSkeletonCount(true);
-        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
-        var skeletonUpdated = true;
-        if (this.getModuleName() === 'autocomplete' && (this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2))) {
-            this.skeletonCount = 0;
-            skeletonUpdated = false;
-        }
-        if (!this.list.classList.contains(dropDownBaseClasses.noData)) {
-            var isSkeletonCountChange = currentSkeletonCount !== this.skeletonCount;
-            if (currentSkeletonCount !== this.skeletonCount && skeletonUpdated) {
-                this.UpdateSkeleton(true, Math.abs(currentSkeletonCount - this.skeletonCount));
-            }
-            else {
-                this.UpdateSkeleton();
-            }
-            this.liCollections = this.list.querySelectorAll('.e-list-item');
-            if ((this.list.getElementsByClassName('e-virtual-ddl').length > 0)) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
-            }
-            if (this.list.getElementsByClassName('e-virtual-ddl-content').length > 0) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
-            }
-        }
-    };
-    DropDownList.prototype.getSkeletonCount = function (retainSkeleton) {
-        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
@@ -4027,14 +4299,51 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
             }
-            if (this.allowFiltering || !this.isPopupOpen || !alreadySkipAdded) {
-                filterQuery.skip(this.virtualItemStartIndex);
+            var queryTakeValue = 0;
+            var querySkipValue = 0;
+            if (this.query && this.query.queries.length > 0) {
+                for (var queryElements_1 = 0; queryElements_1 < this.query.queries.length; queryElements_1++) {
+                    if (this.query.queries[queryElements_1].fn === 'onSkip') {
+                        querySkipValue = this.query.queries[queryElements_1].e.nos;
+                    }
+                    if (this.query.queries[queryElements_1].fn === 'onTake') {
+                        queryTakeValue = takeValue <= this.query.queries[queryElements_1].e.nos ? this.query.queries[queryElements_1].e.nos : takeValue;
+                    }
+                }
+            }
+            var skipExists = false;
+            var takeExists = false;
+            if (filterQuery && filterQuery.queries.length > 0) {
+                for (var queryElements_2 = 0; queryElements_2 < filterQuery.queries.length; queryElements_2++) {
+                    if (filterQuery.queries[queryElements_2].fn === 'onSkip') {
+                        skipExists = true;
+                    }
+                    if (filterQuery.queries[queryElements_2].fn === 'onTake') {
+                        takeExists = true;
+                        filterQuery.queries[queryElements_2].e.nos = filterQuery.queries[queryElements_2].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements_2].e.nos;
+                    }
+                }
+            }
+            if (!skipExists && (this.allowFiltering || !this.isPopupOpen || !alreadySkipAdded)) {
+                if (querySkipValue > 0) {
+                    filterQuery.skip(querySkipValue);
+                }
+                else {
+                    filterQuery.skip(this.virtualItemStartIndex);
+                }
             }
             if (this.isIncrementalRequest) {
                 filterQuery.take(this.incrementalEndIndex);
             }
             else {
-                filterQuery.take(takeValue);
+                if (!takeExists) {
+                    if (queryTakeValue > 0) {
+                        filterQuery.take(queryTakeValue);
+                    }
+                    else {
+                        filterQuery.take(takeValue);
+                    }
+                }
             }
             filterQuery.requiresCount();
         }
@@ -4255,29 +4564,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.renderPopup();
         }
     };
-    DropDownList.prototype.UpdateSkeleton = function (isSkeletonCountChange, skeletonCount) {
-        var isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
-        var isContainVirtualList = this.list.querySelector('.e-virtual-list');
-        if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.enableVirtualization) {
-            var totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
-            for (var i = 0; i < totalSkeletonCount; i++) {
-                var liElement = this.createElement('li', { className: dropDownListClasses.virtualList, styles: 'overflow: inherit' });
-                if (this.enableVirtualization && this.itemTemplate) {
-                    liElement.style.height = this.listItemHeight + 'px';
-                }
-                var skeleton = new Skeleton({
-                    shape: "Text",
-                    height: "10px",
-                    width: "95%",
-                    cssClass: "e-skeleton-text",
-                });
-                skeleton.appendTo(this.createElement('div'));
-                liElement.appendChild(skeleton.element);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
-            }
-        }
-    };
     DropDownList.prototype.getTakeValue = function () {
         return this.allowFiltering && this.getModuleName() === 'dropdownlist' && Browser.isDevice ? Math.round(window.outerHeight / this.listItemHeight) : this.itemCount;
     };
@@ -4313,19 +4599,26 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             if (!isNullOrUndefined(ulElement)) {
                 attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'listbox' });
             }
-            if (this.initRemoteRender) {
+            if (this.initialRemoteRender) {
                 this.initial = true;
                 this.activeIndex = this.index;
-                this.initRemoteRender = false;
+                this.initialRemoteRender = false;
                 if (this.value && this.dataSource instanceof DataManager) {
                     var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
+                    var value_5 = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue(checkField_1, this.value) : this.value;
                     var fieldValue_1 = this.fields.value.split('.');
                     var checkVal = list.some(function (x) {
                         return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ?
-                            _this.checkFieldValue(x, fieldValue_1) === _this.value : x[checkField_1] === _this.value;
+                            _this.checkFieldValue(x, fieldValue_1) === value_5 : x[checkField_1] === value_5;
                     });
+                    if (this.enableVirtualization && this.virtualGroupDataSource) {
+                        checkVal = this.virtualGroupDataSource.some(function (x) {
+                            return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ?
+                                _this.checkFieldValue(x, fieldValue_1) === value_5 : x[checkField_1] === value_5;
+                        });
+                    }
                     if (!checkVal) {
-                        this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', this.value)))
+                        this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', value_5)))
                             .then(function (e) {
                             if (e.result.length > 0) {
                                 _this.addItem(e.result, list.length);
@@ -4437,10 +4730,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.addNewItem = function (listData, newElement) {
         var _this = this;
         if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {
-            var value_5 = this.getItemData().value;
+            var value_6 = this.getItemData().value;
             var isExist = listData.some(function (data) {
-                return (((typeof data === 'string' || typeof data === 'number') && data === value_5) ||
-                    (getValue(_this.fields.value, data) === value_5));
+                return (((typeof data === 'string' || typeof data === 'number') && data === value_6) ||
+                    (getValue(_this.fields.value, data) === value_6));
             });
             if (!isExist) {
                 this.addItem(this.itemData);
@@ -4496,46 +4789,19 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     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);
+            var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+            var findEle = this.findListElement(this.list, 'li', 'data-value', 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;";
-        if (this.getModuleName() === 'autocomplete' && this.skeletonCount === 0) {
-            return "height: 0px;";
-        }
-        return heightDimension;
-    };
     DropDownList.prototype.renderPopup = function (e) {
         var _this = this;
         if (this.popupObj && document.body.contains(this.popupObj.element)) {
@@ -4551,7 +4817,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 popupEle.setAttribute('aria-label', _this.element.id);
                 popupEle.setAttribute('role', 'dialog');
                 var searchBox = _this.setSearchBox(popupEle);
-                _this.listHeight = formatUnit(_this.popupHeight);
+                _this.listContainerHeight = formatUnit(_this.popupHeight);
                 if (_this.headerTemplate) {
                     _this.setHeaderTemplate(popupEle);
                 }
@@ -4595,19 +4861,19 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     _this.searchBoxHeight = 0;
                     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';
+                        _this.listContainerHeight = (parseInt(_this.listContainerHeight, 10) - (_this.searchBoxHeight)).toString() + 'px';
                     }
                     if (_this.headerTemplate) {
                         _this.header = _this.header ? _this.header : popupEle.querySelector('.e-ddl-header');
                         var height = Math.round(_this.header.getBoundingClientRect().height);
-                        _this.listHeight = (parseInt(_this.listHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';
+                        _this.listContainerHeight = (parseInt(_this.listContainerHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';
                     }
                     if (_this.footerTemplate) {
                         _this.footer = _this.footer ? _this.footer : popupEle.querySelector('.e-ddl-footer');
                         var height = Math.round(_this.footer.getBoundingClientRect().height);
-                        _this.listHeight = (parseInt(_this.listHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';
+                        _this.listContainerHeight = (parseInt(_this.listContainerHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';
                     }
-                    _this.list.style.maxHeight = (parseInt(_this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
+                    _this.list.style.maxHeight = (parseInt(_this.listContainerHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
                     popupEle.style.maxHeight = formatUnit(_this.popupHeight);
                 }
                 else {
@@ -4640,6 +4906,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 _this.getFocusElement();
                 _this.checkCollision(popupEle);
                 if (Browser.isDevice) {
+                    if ((parseInt(_this.popupWidth.toString(), 10) > window.outerWidth) && !(_this.getModuleName() === 'dropdownlist' && _this.allowFiltering)) {
+                        _this.popupObj.element.classList.add('e-wide-popup');
+                    }
                     _this.popupObj.element.classList.add(dropDownListClasses.device);
                     if (_this.getModuleName() === 'dropdownlist' || (_this.getModuleName() === 'combobox'
                         && !_this.allowFiltering && _this.isDropDownClick)) {
@@ -4915,6 +5184,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                             this.list.scrollTop += nextOffset;
                         }
                         else {
+                            if (this.enableVirtualization) {
+                                liCount = keyAction == "pageDown" ? this.getPageCount() : liCount;
+                            }
                             this.list.scrollTop += this.selectedLI.offsetHeight * liCount;
                         }
                         this.isPreventKeyAction = this.IsScrollerAtEnd() ? false : this.isPreventKeyAction;
@@ -4968,6 +5240,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             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) {
+                    liCount = keyAction == "pageUp" ? this.getPageCount() : liCount;
+                }
                 if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue && currentElementValue === firstElementValue && keyAction != "home" && !this.isVirtualScrolling) {
                     this.isUpwardScrolling = true;
                     this.isPreventKeyAction = true;
@@ -5065,6 +5340,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var isFilterValue = !isNullOrUndefined(this.filterInput) && !isNullOrUndefined(this.filterInput.value) && this.filterInput.value !== '';
         var typedString = this.getModuleName() === 'combobox' ? this.typedString : null;
         this.isTyped = false;
+        this.isVirtualTrackHeight = false;
         if (!(this.popupObj && document.body.contains(this.popupObj.element) && this.beforePopupOpen)) {
             return;
         }
@@ -5154,8 +5430,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         });
-        if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
-            this.actionCompleteData.ulElement = this.ulElement.cloneNode(true);
+        if (Browser.isDevice && !eventArgs.cancel && this.popupObj.element.classList.contains('e-wide-popup')) {
+            this.popupObj.element.classList.remove('e-wide-popup');
         }
         var dataSourceCount;
         if (this.dataSource instanceof DataManager) {
@@ -5320,6 +5596,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.listItemHeight = this.getListHeight();
                 this.getSkeletonCount();
                 this.updateVirtualizationProperties(this.itemCount, this.allowFiltering);
+                if (this.index !== null) {
+                    this.activeIndex = this.index + this.skeletonCount;
+                }
             }
             this.initValue();
             this.selectedValueInfo = this.viewPortInfo;
@@ -5329,7 +5608,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         else if (this.element.tagName === 'SELECT' && this.element.options[0]) {
             var selectElement = this.element;
-            this.value = selectElement.options[selectElement.selectedIndex].value;
+            this.value = this.allowObjectBinding ? this.getDataByValue(selectElement.options[selectElement.selectedIndex].value) : selectElement.options[selectElement.selectedIndex].value;
             this.text = isNullOrUndefined(this.value) ? null : selectElement.options[selectElement.selectedIndex].textContent;
             this.initValue();
         }
@@ -5481,7 +5760,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.actionData = this.actionCompleteData;
         }
     };
-    DropDownList.prototype.updateDataSource = function (props) {
+    DropDownList.prototype.updateDataSource = function (props, oldProps) {
         if (this.inputElement.value !== '' || (!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)
             || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0)))) {
             this.clearAll(null, props);
@@ -5491,7 +5770,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             EventHandler.add(this.list, 'scroll', this.setFloatingHeader, this);
         }
         if (!(!isNullOrUndefined(props) && (isNullOrUndefined(props.dataSource)
-            || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0))) || !(Array.isArray(props.dataSource) && props.dataSource.length === 0)) {
+            || (!(props.dataSource instanceof DataManager) && props.dataSource.length === 0))) || ((props.dataSource instanceof DataManager) || (!isNullOrUndefined(props) && Array.isArray(props.dataSource) && !isNullOrUndefined(oldProps) && Array.isArray(oldProps.dataSource) && props.dataSource.length !== oldProps.dataSource.length))) {
             this.typedString = '';
             this.resetList(this.dataSource);
         }
@@ -5500,9 +5779,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownList.prototype.checkCustomValue = function () {
-        this.itemData = this.getDataByValue(this.value);
+        var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+        this.itemData = this.getDataByValue(currentValue);
         var dataItem = this.getItemData();
-        this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+        var value = this.allowObjectBinding ? this.itemData : dataItem.value;
+        this.setProperties({ 'text': dataItem.text, 'value': value });
     };
     DropDownList.prototype.updateInputFields = function () {
         if (this.getModuleName() === 'dropdownlist') {
@@ -5583,11 +5864,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     }
                     if (!this_1.list) {
                         if (this_1.dataSource instanceof DataManager) {
-                            this_1.initRemoteRender = true;
+                            this_1.initialRemoteRender = true;
                         }
                         this_1.renderList();
                     }
-                    if (!this_1.initRemoteRender) {
+                    if (!this_1.initialRemoteRender) {
                         var li = this_1.getElementByText(newProp.text);
                         if (!this_1.checkValidLi(li)) {
                             if (this_1.liCollections && this_1.liCollections.length === 100 &&
@@ -5624,6 +5905,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         this_1.clearAll();
                         break;
                     }
+                    if (this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) && !isNullOrUndefined(oldProp.value) && this_1.isObjectInArray(newProp.value, [oldProp.value])) {
+                        return { value: void 0 };
+                    }
                     if (this_1.enableVirtualization) {
                         this_1.updateValues();
                         this_1.updateInputFields();
@@ -5636,12 +5920,13 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     this_1.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
                     if (!this_1.list) {
                         if (this_1.dataSource instanceof DataManager) {
-                            this_1.initRemoteRender = true;
+                            this_1.initialRemoteRender = true;
                         }
                         this_1.renderList();
                     }
-                    if (!this_1.initRemoteRender) {
-                        var item = this_1.getElementByValue(newProp.value);
+                    if (!this_1.initialRemoteRender) {
+                        var value = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ? getValue((this_1.fields.value) ? this_1.fields.value : '', newProp.value) : newProp.value;
+                        var item = this_1.getElementByValue(value);
                         if (!this_1.checkValidLi(item)) {
                             if (this_1.liCollections && this_1.liCollections.length === 100 &&
                                 this_1.getModuleName() === 'autocomplete' && this_1.listData.length > 100) {
@@ -5651,7 +5936,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                                 var listLength_2 = this_1.getItems().length;
                                 var checkField = isNullOrUndefined(this_1.fields.value) ? this_1.fields.text : this_1.fields.value;
                                 this_1.typedString = '';
-                                this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', newProp.value)))
+                                var value_7 = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ? getValue(checkField, newProp.value) : newProp.value;
+                                this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', value_7)))
                                     .then(function (e) {
                                     if (e.result.length > 0) {
                                         _this.addItem(e.result, listLength_2);
@@ -5680,11 +5966,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     }
                     if (!this_1.list) {
                         if (this_1.dataSource instanceof DataManager) {
-                            this_1.initRemoteRender = true;
+                            this_1.initialRemoteRender = true;
                         }
                         this_1.renderList();
                     }
-                    if (!this_1.initRemoteRender && this_1.liCollections) {
+                    if (!this_1.initialRemoteRender && this_1.liCollections) {
                         var element = this_1.liCollections[newProp.index];
                         if (!this_1.checkValidLi(element)) {
                             if (this_1.liCollections && this_1.liCollections.length === 100 &&
@@ -5748,7 +6034,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var this_1 = this;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
-            _loop_1(prop);
+            var state_1 = _loop_1(prop);
+            if (typeof state_1 === "object")
+                return state_1.value;
         }
     };
     DropDownList.prototype.checkValidLi = function (element) {
@@ -5769,6 +6057,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             else if (prop === 'value') {
+                var fields = (_this.fields.value) ? _this.fields.value : '';
+                var value = _this.allowObjectBinding && !isNullOrUndefined(newProp) ? getValue(fields, newProp) : newProp;
                 li = _this.getElementByValue(newProp);
                 if (!_this.checkValidLi(li)) {
                     _this.setOldValue(oldProp);
@@ -5831,6 +6121,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
+        this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         if (this.isReact && this.getModuleName() === 'combobox' && this.itemTemplate && this.isCustomFilter && this.isAddNewItemTemplate) {
             this.renderList();
             this.isAddNewItemTemplate = false;
@@ -5851,6 +6142,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         else if (isNullOrUndefined(this.list) || !isUndefined(this.list) && (this.list.classList.contains(dropDownBaseClasses.noData) ||
             this.list.querySelectorAll('.' + dropDownBaseClasses.li).length <= 0)) {
+            if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
+                this.isSecondClick = false;
+            }
             this.renderList(e);
         }
         if (this.enableVirtualization && this.listData && this.listData.length) {
@@ -5904,7 +6198,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
             this.isEscapeKey = false;
             if (!isNullOrUndefined(this.index)) {
-                var element = this.findListElement(this.ulElement, 'li', 'data-value', this.value);
+                var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+                var element = this.findListElement(this.ulElement, 'li', 'data-value', value);
                 this.selectedLI = this.liCollections[this.index] || element;
                 if (this.selectedLI) {
                     this.updateSelectedItem(this.selectedLI, null, true);
@@ -5917,6 +6212,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.resetSelection();
             }
         }
+        this.isVirtualTrackHeight = false;
         this.closePopup(0, e);
         var dataItem = this.getItemData();
         var isSelectVal = !isNullOrUndefined(this.selectedLI);
@@ -5988,6 +6284,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
      */
     DropDownList.prototype.destroy = function () {
         this.isActive = false;
+        if (this.showClearButton) {
+            this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
+        }
         resetIncrementalSearchValues(this.element.id);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.isReact) {
@@ -6043,6 +6342,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (this.inputElement && !isNullOrUndefined(this.inputElement.onchange)) {
             this.inputElement.onchange = null;
         }
+        if (this.inputElement && !isNullOrUndefined(this.inputElement.onselect)) {
+            this.inputElement.onselect = null;
+        }
+        Input.destroy({
+            element: this.inputElement,
+            floatLabelType: this.floatLabelType,
+            properties: this.properties
+        }, this.clearButton);
         if (this.isAngular) {
             this.inputElement = null;
         }
@@ -6057,7 +6364,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.getItems = function () {
         if (!this.list) {
             if (this.dataSource instanceof DataManager) {
-                this.initRemoteRender = true;
+                this.initialRemoteRender = true;
             }
             this.renderList();
         }
@@ -6135,6 +6442,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     __decorate$1([
         Property(null)
     ], DropDownList.prototype, "value", void 0);
+    __decorate$1([
+        Property(false)
+    ], DropDownList.prototype, "allowObjectBinding", void 0);
     __decorate$1([
         Property(null)
     ], DropDownList.prototype, "index", void 0);
@@ -6330,7 +6640,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         _this.filterTimer = null;
         _this.isFilteredData = false;
         _this.isFilterRestore = false;
-        // eslint-disable-next-line
         _this.selectedData = [];
         _this.filterDelayTime = 300;
         _this.isClicked = false;
@@ -6428,7 +6737,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 this.inputEle.setAttribute('aria-expanded', 'false');
                 this.inputEle.setAttribute('role', 'combobox');
                 this.inputEle.setAttribute('aria-haspopup', 'tree');
-                this.inputEle.setAttribute('aria-controls', this.element.id + "_options");
+                this.inputEle.setAttribute('aria-controls', this.element.id + '_options');
             }
             if (isNullOrUndefined(this.inputEle.getAttribute('type'))) {
                 this.inputEle.setAttribute('type', 'text');
@@ -6471,7 +6780,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         this.popupDiv.classList.add(DROPDOWN);
         this.tree = this.createElement('div', { id: this.element.id + '_tree' });
         this.popupDiv.appendChild(this.tree);
-        document.body.appendChild(this.popupDiv);
+        if (!this.destroyPopupOnHide) {
+            document.body.appendChild(this.popupDiv);
+        }
         this.wireTreeEvents();
         addClass([this.popupDiv], DDTHIDEICON);
         this.renderTree();
@@ -6578,6 +6889,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 if (value === '') {
                     _this.isFilteredData = false;
                     _this.isFilterRestore = true;
+                    _this.isFromFilterChange = false;
                     fields = _this.cloneFields(_this.fields);
                 }
                 else if (args.preventDefaultAction) {
@@ -6616,7 +6928,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 _this.treeObj.dataBind();
                 if (_this.hasTemplate && _this.portals && _this.treeObj.portals) {
                     for (var i = 0; i < _this.treeObj.portals.length; i++) {
-                        if (_this.portals.indexOf(_this.treeObj.portals[i]) == -1) {
+                        if (_this.portals.indexOf(_this.treeObj.portals[i]) === -1) {
                             _this.portals.push(_this.treeObj.portals[i]);
                         }
                     }
@@ -6660,7 +6972,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         return filteredItems;
     };
     DropDownTree.prototype.nestedFilter = function (value, filteredFields) {
-        // eslint-disable-next-line
         var matchedDataSource = [];
         for (var i = 0; i < this.treeData.length; i++) {
             // eslint-disable-next-line
@@ -6672,15 +6983,12 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         filteredFields.dataSource = matchedDataSource;
         return filteredFields;
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.nestedChildFilter = function (value, node) {
-        // eslint-disable-next-line
         var children = node[this.fields.child];
         if (isNullOrUndefined(children)) {
             return (this.isMatchedNode(value, node)) ? node : null;
         }
         else {
-            // eslint-disable-next-line
             var matchedChildren = [];
             for (var i = 0; i < children.length; i++) {
                 // eslint-disable-next-line
@@ -6701,9 +7009,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.selfReferencefilter = function (value, filteredFields) {
-        // eslint-disable-next-line
         var matchedData = [];
-        // eslint-disable-next-line
         var matchedDataSource = [];
         for (var i = 0; i < this.treeData.length; i++) {
             if (this.isMatchedNode(value, this.treeData[i])) {
@@ -6716,7 +7022,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 // eslint-disable-next-line
                 var parentId = matchedData[i][this.fields.parentValue];
                 while (!isNullOrUndefined(parentId)) {
-                    // eslint-disable-next-line
                     var parent_1 = null;
                     for (var j = 0; j < this.treeData.length; j++) {
                         // eslint-disable-next-line
@@ -6739,7 +7044,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         filteredFields.dataSource = matchedDataSource;
         return filteredFields;
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.isMatchedNode = function (value, node, isChild, isChildFiltering) {
         var checkValue;
         var isObjectValue = isChild && isChildFiltering && this.isChildObject();
@@ -7135,7 +7439,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             var remaining = void 0;
             var downIconWidth = 0;
             this.overFlowWrapper.innerHTML = '';
-            // eslint-disable-next-line
             var l10nLocale = { overflowCountTemplate: '+${count} more..', totalCountTemplate: '${count} selected' };
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             var remainContent = this.l10n.getConstant('overflowCountTemplate');
@@ -7418,7 +7721,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         if (this.selectAllText !== 'Select All' || this.unSelectAllText !== 'Unselect All') {
             var template = unSelect ? this.unSelectAllText : this.selectAllText;
             this.selectAllSpan.textContent = '';
-            // eslint-disable-next-line
             var compiledString = compile(template);
             var templateName = unSelect ? 'unSelectAllText' : 'selectAllText';
             for (var _i = 0, _a = compiledString({}, this, templateName, null, !this.isStringTemplate); _i < _a.length; _i++) {
@@ -7444,11 +7746,11 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 if (htmlAttr === 'class') {
                     this.inputWrapper.classList.add(this.htmlAttributes["" + htmlAttr]);
                 }
-                else if (htmlAttr === 'disabled' && this.htmlAttributes["" + htmlAttr] === 'disabled') {
+                else if (htmlAttr === 'disabled') {
                     this.setProperties({ enabled: false }, true);
                     this.setEnable();
                 }
-                else if (htmlAttr === 'readonly' && !isNullOrUndefined(this.htmlAttributes["" + htmlAttr])) {
+                else if (htmlAttr === 'readonly') {
                     this.setProperties({ readonly: true }, true);
                     this.dataBind();
                 }
@@ -7508,7 +7810,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
     };
     DropDownTree.prototype.setTreeValue = function () {
         if (this.value !== null && this.value.length !== 0) {
-            // eslint-disable-next-line
             var data = void 0;
             if (this.showCheckBox || this.allowMultiSelection) {
                 for (var i = 0; i < this.value.length; i++) {
@@ -7538,7 +7839,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             return;
         }
         if (this.text !== null) {
-            // eslint-disable-next-line
             var data = void 0;
             var valArr = [];
             if (this.showCheckBox || this.allowMultiSelection) {
@@ -7629,9 +7929,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             this.triggerChangeEvent();
         }
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.getItems = function (givenText) {
-        // eslint-disable-next-line
         var data;
         if (this.treeDataType === 1) {
             for (var i = 0; i < this.treeItems.length; i++) {
@@ -7648,9 +7946,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
         return data;
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.getNestedItems = function (data, field, givenText) {
-        // eslint-disable-next-line
         var newData;
         for (var i = 0, objlen = data.length; i < objlen; i++) {
             // eslint-disable-next-line
@@ -7661,7 +7957,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             else if (typeof field.child === 'string' && !isNullOrUndefined(getValue(field.child, data[i]))) {
                 // eslint-disable-next-line
                 var childData = getValue(field.child, data[i]);
-                // eslint-disable-next-line
                 newData = this.getNestedItems(childData, this.getChildType(field), givenText);
                 if (newData !== undefined) {
                     break;
@@ -7704,7 +7999,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             nodeTemplate: this.itemTemplate
         });
         this.treeObj.root = this.root ? this.root : this;
-        this.treeObj.appendTo('#' + this.tree.id);
+        this.treeObj.appendTo(this.tree);
     };
     /* To render the popup element */
     DropDownTree.prototype.renderPopup = function () {
@@ -7762,9 +8057,13 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 _this.isFirstRender = false;
                 /* eslint-disable */
                 if (_this.hasTemplate && _this.portals) {
-                    _this.portals = _this.portals.concat(_this.treeObj.portals);
+                    if (_this.treeObj.portals) {
+                        _this.portals = _this.portals.concat(_this.treeObj.portals.filter(function (item) { return !_this.portals.includes(item); }));
+                    }
                     /* eslint-enable */
-                    _this.renderReactTemplates();
+                    if (_this.isReact) {
+                        _this.renderReactTemplates(_this.reactCallBack);
+                    }
                 }
             }
             if (!isCancelled) {
@@ -7775,7 +8074,15 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 _this.popupObj.refreshPosition();
                 if (!(_this.showCheckBox && _this.showSelectAll) && (!_this.popupDiv.classList.contains(NODATA)
                     && _this.treeItems.length > 0)) {
-                    var focusedElement = _this.treeObj.element.querySelector('li');
+                    var focusedElement = void 0;
+                    if (_this.value != null && _this.text != null) {
+                        _this.treeObj.element.querySelector('li').setAttribute('tabindex', '-1');
+                        focusedElement = _this.treeObj.element.querySelector('[data-uid="' + _this.value[0] + '"]');
+                        focusedElement.setAttribute('tabindex', '0');
+                    }
+                    else {
+                        focusedElement = _this.treeObj.element.querySelector('li');
+                    }
                     focusedElement.focus();
                     addClass([focusedElement], ['e-node-focus']);
                 }
@@ -7793,6 +8100,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             }
         });
     };
+    DropDownTree.prototype.reactCallBack = function () {
+        this.updatePopupHeight();
+        this.popupObj.refreshPosition();
+    };
     DropDownTree.prototype.updatePopupHeight = function () {
         if (this.isFirstRender) {
             return;
@@ -8051,7 +8362,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
         return null;
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.getTreeDataType = function (ds, field) {
         if (this.fields.dataSource instanceof DataManager) {
             for (var i = 0; i < ds.length; i++) {
@@ -8061,8 +8371,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             }
             return 2;
         }
-        if (isNullOrUndefined(this.fields.dataSource))
+        if (isNullOrUndefined(this.fields.dataSource)) {
             this.fields.dataSource = [];
+        }
         for (var i = 0, len = this.fields.dataSource.length; i < len; i++) {
             if ((typeof field.child === 'string') && !isNullOrUndefined(getValue(field.child, this.fields.dataSource[i]))) {
                 return 2;
@@ -8083,9 +8394,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         this.treeObj.dataBind();
     };
     DropDownTree.prototype.getEventArgs = function (args) {
-        // eslint-disable-next-line
         var checkData = args.data;
-        // eslint-disable-next-line
         var selectData = args.nodeData;
         var state;
         if (this.showCheckBox) {
@@ -8170,7 +8479,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         var target = args.event.target;
         if ((target.classList.contains('e-fullrow') || target.classList.contains('e-list-text')) && this.showCheckBox) {
             this.isClicked = true;
-            // eslint-disable-next-line
             var getNodeDetails = this.treeObj.getNode(args.node);
             if (getNodeDetails.isChecked === 'true') {
                 this.treeObj.uncheckAll([args.node]);
@@ -8222,7 +8530,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
     DropDownTree.prototype.onNodeExpanded = function (args) {
         if (this.hasTemplate && this.portals && this.treeObj.portals) {
             for (var i = 0; i < this.treeObj.portals.length; i++) {
-                if (this.portals.indexOf(this.treeObj.portals[i]) == -1) {
+                if (this.portals.indexOf(this.treeObj.portals[i]) === -1) {
                     this.portals.push(this.treeObj.portals[i]);
                 }
             }
@@ -8320,7 +8628,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
     };
     DropDownTree.prototype.setMultiSelectValue = function (newValues) {
         if (!this.isFilteredData) {
-            this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length == 0 ? this.value : newValues }, true);
+            this.setProperties({ value: this.isFromFilterChange && newValues && newValues.length === 0 ? this.value : newValues }, true);
             this.isFromFilterChange = false;
             if (newValues && newValues.length !== 0 && !this.showCheckBox) {
                 this.treeObj.selectedNodes = this.value.slice();
@@ -8370,9 +8678,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
         this.updateSelectedValues();
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.getSelectedData = function (value) {
-        // eslint-disable-next-line
         var data = null;
         if (this.isFilteredData) {
             for (var i = 0; i < this.selectedData.length; i++) {
@@ -8459,7 +8765,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         var temp;
         var text;
         var textValue = '';
-        // eslint-disable-next-line
         var selectedData;
         this.hiddenElement.innerHTML = '';
         var hiddenInputValue = '';
@@ -8555,7 +8860,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             addClass([this.inputWrapper], SHOW_CHIP);
         }
         var chip = this.createElement('span', {
-            className: CHIP,
+            className: CHIP
         });
         if (!this.inputEle.classList.contains(CHIP_INPUT)) {
             addClass([this.inputEle], CHIP_INPUT);
@@ -8597,7 +8902,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             this.header = this.createElement('div');
             addClass([this.header], HEADER);
         }
-        // eslint-disable-next-line
         var compiledString = this.templateComplier(this.headerTemplate);
         var tempArr = compiledString({}, this, 'headerTemplate', this.headerTemplateId, this.isStringTemplate, undefined, this.header);
         if (tempArr) {
@@ -8606,7 +8910,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
         this.popupEle.insertBefore(this.header, this.checkAllParent ? this.checkAllParent : this.popupDiv);
     };
-    // eslint-disable-next-line
     DropDownTree.prototype.templateComplier = function (template) {
         if (template) {
             // eslint-disable-next-line
@@ -8632,7 +8935,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             this.footer = this.createElement('div');
             addClass([this.footer], FOOTER);
         }
-        // eslint-disable-next-line
         var compiledString = this.templateComplier(this.footerTemplate);
         var tempArr = compiledString({}, this, 'footerTemplate', this.footerTemplateId, this.isStringTemplate, undefined, this.footer);
         if (tempArr) {
@@ -8691,7 +8993,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         this.ensurePlaceHolder();
     };
     DropDownTree.prototype.resetValue = function (isDynamicChange) {
-        if (this.value == [] && this.text == null) {
+        if (this.value === [] && this.text == null) {
             return;
         }
         Input.setValue(null, this.inputEle, this.floatLabelType);
@@ -8830,7 +9132,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             var template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
             var templateId = actionFailure ? this.actionFailureTemplateId : this.noRecordsTemplateId;
             var templatestring = actionFailure ? 'actionFailureTemplate' : 'noRecordsTemplate';
-            // eslint-disable-next-line
             var compiledString = this.templateComplier(template);
             var tempArr = compiledString({}, this, templatestring, templateId, this.isStringTemplate, undefined, this.noRecord);
             if (tempArr) {
@@ -8839,7 +9140,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else {
-            // eslint-disable-next-line
             var l10nLocale = { noRecordsTemplate: 'No Records Found', actionFailureTemplate: 'The Request Failed' };
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             this.noRecord.innerHTML = actionFailure ?
@@ -9071,10 +9371,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                     this.updateTreeSettings(newProp);
                     break;
                 case 'customTemplate':
-                    if (this.mode !== "Custom") {
+                    if (this.mode !== 'Custom') {
                         return;
                     }
-                    this.chipCollection.innerHTML = "";
+                    this.chipCollection.innerHTML = '';
                     this.setTagValues();
                     break;
                 case 'sortOrder':
@@ -9224,6 +9524,16 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
             this.filterObj = null;
         }
     };
+    DropDownTree.prototype.destroyPopup = function () {
+        this.isPopupOpen = false;
+        if (this.isReact) {
+            this.clearTemplate();
+        }
+        if (this.popupObj) {
+            this.popupObj.destroy();
+            detach(this.popupObj.element);
+        }
+    };
     /**
      * Ensures visibility of the Dropdown Tree item by using item value or item element.
      * If many Dropdown Tree items are present, and we are in need to find a particular item, then the `ensureVisible` property
@@ -9241,7 +9551,6 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
      * @param  {string | Element} item - Specifies the value of Dropdown Tree item/ Dropdown Tree item element
      * @returns {'{[key: string]: Object }[]'} - returns the updated data source of the Dropdown Tree.
      */
-    // eslint-disable-next-line
     DropDownTree.prototype.getData = function (item) {
         return this.treeObj.getTreeData(item);
     };
@@ -9266,6 +9575,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             this.trigger('close', eventArgs);
+            if (this.destroyPopupOnHide) {
+                this.isFirstRender = true;
+                this.destroyPopup();
+            }
         }
     };
     /**
@@ -9315,7 +9628,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         Property('')
     ], DropDownTree.prototype, "cssClass", void 0);
     __decorate$2([
-        Property("${value.length} item(s) selected")
+        Property('${value.length} item(s) selected')
     ], DropDownTree.prototype, "customTemplate", void 0);
     __decorate$2([
         Property(',')
@@ -9381,7 +9694,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         Property(false)
     ], DropDownTree.prototype, "showCheckBox", void 0);
     __decorate$2([
-        Property(false)
+        Property(true)
+    ], DropDownTree.prototype, "destroyPopupOnHide", void 0);
+    __decorate$2([
+        Property(true)
     ], DropDownTree.prototype, "enableHtmlSanitizer", void 0);
     __decorate$2([
         Property(true)
@@ -9582,8 +9898,12 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         this.setHiddenValue();
     };
     ComboBox.prototype.valueMuteChange = function (value) {
+        value = this.allowObjectBinding && !isNullOrUndefined(value) ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
         var inputValue = isNullOrUndefined(value) ? null : value.toString();
         Input.setValue(inputValue, this.inputElement, this.floatLabelType, this.showClearButton);
+        if (this.allowObjectBinding) {
+            value = this.getDataByValue(value);
+        }
         this.setProperties({ value: value, text: value, index: null }, true);
         this.activeIndex = this.index;
         var fields = this.fields;
@@ -9592,20 +9912,50 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         dataItem[fields.value] = isNullOrUndefined(value) ? null : value.toString();
         this.itemData = dataItem;
         this.item = null;
-        if (this.previousValue !== this.value) {
+        if ((!this.allowObjectBinding && (this.previousValue !== this.value)) || (this.allowObjectBinding && this.previousValue && this.value && !this.isObjectInArray(this.previousValue, [this.value]))) {
             this.detachChangeEvent(null);
         }
     };
     ComboBox.prototype.updateValues = function () {
         if (!isNullOrUndefined(this.value)) {
-            var li = this.getElementByValue(this.value);
+            var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+            var li = this.getElementByValue(currentValue);
+            var doesItemExist = !isNullOrUndefined(li) ? true : false;
+            if (this.enableVirtualization && this.value) {
+                var fields = (this.fields.value) ? this.fields.value : '';
+                var currentValue_1 = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                    var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue_1)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        doesItemExist = true;
+                        var dataItem = this.getItemData();
+                        var value = this.allowObjectBinding ? this.getDataByValue(dataItem.value) : dataItem.value;
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': value });
+                        }
+                    }
+                }
+                else {
+                    var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue_1)));
+                    if (getItem && getItem.length > 0) {
+                        this.itemData = getItem[0];
+                        doesItemExist = true;
+                        var dataItem = this.getItemData();
+                        var value = this.allowObjectBinding ? this.getDataByValue(dataItem.value) : dataItem.value;
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': value });
+                        }
+                    }
+                }
+            }
             if (li) {
                 this.setSelection(li, null);
             }
-            else if (this.allowCustom) {
+            else if ((!this.enableVirtualization && this.allowCustom) || (this.allowCustom && this.enableVirtualization && !doesItemExist)) {
                 this.valueMuteChange(this.value);
             }
-            else {
+            else if (!this.enableVirtualization || (this.enableVirtualization && !doesItemExist)) {
                 this.valueMuteChange(null);
             }
         }
@@ -9715,7 +10065,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
                     this.updateIncrementalView(0, this.itemCount);
                 }
                 activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
-                while (isNullOrUndefined(activeItem) && this.incrementalEndIndex < this.totalItemCount) {
+                while (isNullOrUndefined(activeItem.item) && this.incrementalEndIndex < this.totalItemCount) {
                     this.incrementalStartIndex = this.incrementalEndIndex;
                     this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
                     this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
@@ -9725,6 +10075,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
                     }
                     activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
                     if (!isNullOrUndefined(activeItem)) {
+                        activeItem.index = activeItem.index + this.incrementalStartIndex;
                         break;
                     }
                     if (isNullOrUndefined(activeItem) && this.incrementalEndIndex >= this.totalItemCount) {
@@ -9810,10 +10161,12 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         }
     };
     ComboBox.prototype.checkCustomValue = function () {
-        this.itemData = this.getDataByValue(this.value);
+        var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+        this.itemData = this.getDataByValue(value);
         var dataItem = this.getItemData();
+        var setValue$$1 = this.allowObjectBinding ? this.itemData : dataItem.value;
         if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {
-            this.setProperties({ 'value': dataItem.value }, !this.allowCustom);
+            this.setProperties({ 'value': setValue$$1 }, !this.allowCustom);
         }
     };
     /**
@@ -9863,10 +10216,10 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
             var currentValue = this.getTextByValue(activeElement.getAttribute('data-value')).toString();
             var currentFillValue = this.getFormattedValue(activeElement.getAttribute('data-value'));
             if (this.getModuleName() === 'combobox') {
-                if (!this.isSelected && this.previousValue !== currentFillValue) {
+                if (!this.isSelected && ((!this.allowObjectBinding && this.previousValue !== currentFillValue)) || (this.allowObjectBinding && this.previousValue && currentFillValue && !this.isObjectInArray(this.previousValue, [this.getDataByValue(currentFillValue)]))) {
                     this.updateSelectedItem(activeElement, null);
                     this.isSelected = true;
-                    this.previousValue = this.getFormattedValue(activeElement.getAttribute('data-value'));
+                    this.previousValue = this.allowObjectBinding ? this.getDataByValue(this.getFormattedValue(activeElement.getAttribute('data-value'))) : this.getFormattedValue(activeElement.getAttribute('data-value'));
                 }
                 else {
                     this.updateSelectedItem(activeElement, null, true);
@@ -10041,11 +10394,13 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         if (!this.allowCustom && this.inputElement.value !== '') {
             var previousValue = this.previousValue;
             var currentValue = this.value;
+            value = this.allowObjectBinding ? this.getDataByValue(value) : value;
             this.setProperties({ value: value });
             if (isNullOrUndefined(this.value)) {
                 Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);
             }
-            if (this.autofill && previousValue === this.value && currentValue !== this.value) {
+            var newValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+            if (this.autofill && ((!this.allowObjectBinding && previousValue === this.value) || (this.allowObjectBinding && previousValue && this.isObjectInArray(previousValue, [this.value]))) && ((!this.allowObjectBinding && currentValue !== this.value) || (this.allowObjectBinding && currentValue && !this.isObjectInArray(currentValue, [this.value])))) {
                 this.onChangeEvent(null);
             }
         }
@@ -10055,6 +10410,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
                 var value_1 = this.inputElement.value === '' ? null : this.inputElement.value;
                 // eslint-disable-next-line max-len
                 var eventArgs = { text: value_1, item: {} };
+                this.isObjectCustomValue = true;
                 if (!this.initial) {
                     this.trigger('customValueSpecifier', eventArgs, function (eventArgs) {
                         _this.updateCustomValueCallback(value_1, eventArgs, previousValue_1, e);
@@ -10066,8 +10422,9 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
             }
             else {
                 this.isSelectCustom = false;
+                value = this.allowObjectBinding ? this.getDataByValue(value) : value;
                 this.setProperties({ value: value });
-                if (previousValue_1 !== this.value) {
+                if ((!this.allowObjectBinding && previousValue_1 !== this.value) || (this.allowObjectBinding && previousValue_1 && this.value && !this.isObjectInArray(previousValue_1, [this.value]))) {
                     this.onChangeEvent(e);
                 }
             }
@@ -10077,6 +10434,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         }
     };
     ComboBox.prototype.updateCustomValueCallback = function (value, eventArgs, previousValue, e) {
+        var _this = this;
         var fields = this.fields;
         var item = eventArgs.item;
         var dataItem = {};
@@ -10088,16 +10446,28 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
             setValue(fields.value, value, dataItem);
         }
         this.itemData = dataItem;
+        var emptyObject = {};
+        if (this.allowObjectBinding) {
+            var keys = this.listData && this.listData.length > 0 ? Object.keys(this.listData[0]) : Object.keys(this.itemData);
+            if ((!(this.listData && this.listData.length > 0)) && (this.getModuleName() === 'autocomplete' || (this.getModuleName() === 'combobox' && this.allowFiltering))) {
+                keys = this.firstItem ? Object.keys(this.firstItem) : Object.keys(this.itemData);
+            }
+            // Create an empty object with predefined keys
+            keys.forEach(function (key) {
+                emptyObject[key] = ((key === fields.value) || (key === fields.text)) ? getValue(fields.value, _this.itemData) : null;
+            });
+        }
         var changeData = {
             text: getValue(fields.text, this.itemData),
-            value: getValue(fields.value, this.itemData),
+            value: this.allowObjectBinding ? emptyObject : getValue(fields.value, this.itemData),
             index: null
         };
         this.setProperties(changeData, true);
         this.setSelection(null, null);
         this.isSelectCustom = true;
-        if (previousValue !== this.value) {
-            this.onChangeEvent(e);
+        this.isObjectCustomValue = false;
+        if ((!this.allowObjectBinding && (previousValue !== this.value)) || (this.allowObjectBinding && ((previousValue == null && this.value !== null) || (previousValue && !this.isObjectInArray(previousValue, [this.value]))))) {
+            this.onChangeEvent(e, true);
         }
     };
     /**
@@ -10111,7 +10481,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
     ComboBox.prototype.onPropertyChanged = function (newProp, oldProp) {
         if (this.getModuleName() === 'combobox') {
             this.checkData(newProp);
-            this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);
+            this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp, oldProp);
         }
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
@@ -10260,7 +10630,8 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
                 this.customValue(e);
             }
         }
-        if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== this.value) {
+        var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+        if (isNullOrUndefined(this.listData) && this.allowCustom && !isNullOrUndefined(inputValue) && inputValue !== value) {
             this.customValue();
         }
         _super.prototype.hidePopup.call(this, e);
@@ -10392,6 +10763,9 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
     __decorate$3([
         Property(null)
     ], ComboBox.prototype, "value", void 0);
+    __decorate$3([
+        Property(false)
+    ], ComboBox.prototype, "allowObjectBinding", void 0);
     ComboBox = __decorate$3([
         NotifyPropertyChanges
     ], ComboBox);
@@ -10468,8 +10842,9 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
     };
     AutoComplete.prototype.getQuery = function (query) {
         var filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
-        var filterType = (this.queryString === '' && !isNullOrUndefined(this.value)) ? 'equal' : this.filterType;
-        var queryString = (this.queryString === '' && !isNullOrUndefined(this.value)) ? this.value : this.queryString;
+        var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+        var filterType = (this.queryString === '' && !isNullOrUndefined(value)) ? 'equal' : this.filterType;
+        var queryString = (this.queryString === '' && !isNullOrUndefined(value)) ? value : this.queryString;
         if (this.isFiltered) {
             return filterQuery;
         }
@@ -10495,17 +10870,57 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
             filterQuery.take(this.suggestionCount);
         }
         if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+            var queryTakeValue = 0;
+            var querySkipValue = 0;
+            if (this.query && this.query.queries.length > 0) {
+                for (var queryElements = 0; queryElements < this.query.queries.length; queryElements++) {
+                    if (this.query.queries[queryElements].fn === 'onSkip') {
+                        querySkipValue = this.query.queries[queryElements].e.nos;
+                    }
+                    if (this.query.queries[queryElements].fn === 'onTake') {
+                        queryTakeValue = takeValue <= this.query.queries[queryElements].e.nos ? this.query.queries[queryElements].e.nos : takeValue;
+                    }
+                }
+            }
+            var skipExists = false;
+            var takeExists = false;
+            if (filterQuery && filterQuery.queries.length > 0) {
+                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                        skipExists = true;
+                    }
+                    if (filterQuery.queries[queryElements].fn === 'onTake') {
+                        takeExists = true;
+                        filterQuery.queries[queryElements].e.nos = filterQuery.queries[queryElements].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements].e.nos;
+                    }
+                }
+            }
             var takeValue = this.getTakeValue();
-            filterQuery.skip(this.virtualItemStartIndex);
-            filterQuery.take(takeValue);
-            filterQuery.requiresCount();
-        }
-        return filterQuery;
-    };
-    AutoComplete.prototype.searchLists = function (e) {
+            if (!skipExists) {
+                if (querySkipValue > 0 && this.virtualItemStartIndex <= querySkipValue) {
+                    filterQuery.skip(querySkipValue);
+                }
+                else {
+                    filterQuery.skip(this.virtualItemStartIndex);
+                }
+            }
+            if (!takeExists) {
+                if (queryTakeValue > 0 && takeValue <= queryTakeValue) {
+                    filterQuery.take(queryTakeValue);
+                }
+                else {
+                    filterQuery.take(takeValue);
+                }
+            }
+            filterQuery.requiresCount();
+        }
+        return filterQuery;
+    };
+    AutoComplete.prototype.searchLists = function (e) {
         var _this_1 = this;
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
+        this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         this.checkAndResetCache();
         if (isNullOrUndefined(this.list)) {
             _super.prototype.renderList.call(this, e, true);
@@ -10699,6 +11114,10 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
     AutoComplete.prototype.setInputValue = function (newProp, oldProp) {
         var oldValue = oldProp && oldProp.text ? oldProp.text : oldProp ? oldProp.value : oldProp;
         var value = newProp && newProp.text ? newProp.text : newProp && newProp.value ? newProp.value : this.value;
+        if (this.allowObjectBinding) {
+            oldValue = !isNullOrUndefined(oldValue) ? getValue((this.fields.value) ? this.fields.value : '', oldValue) : oldValue;
+            value = !isNullOrUndefined(value) ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
+        }
         if (value && this.typedString === '' && !this.allowCustom && !(this.dataSource instanceof DataManager)) {
             var checkFields_1_1 = this.typeOfData(this.dataSource).typeof === 'string' ? '' : this.fields.value;
             var listLength_1 = this.getItems().length;
@@ -10707,7 +11126,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
             new DataManager(this.dataSource).executeQuery(query.where(new Predicate(checkFields_1_1, 'equal', value)))
                 .then(function (e) {
                 if (e.result.length > 0) {
-                    _this_2.value = checkFields_1_1 !== '' ? e.result[0][_this_2.fields.value].toString() : e.result[0].toString();
+                    _this_2.value = checkFields_1_1 !== '' ? _this_2.allowObjectBinding ? e.result[0] : e.result[0][_this_2.fields.value].toString() : e.result[0].toString();
                     _this_2.addItem(e.result, listLength_1);
                     _this_2.updateValues();
                 }
@@ -11131,8 +11550,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         _this.selectAllEventEle = [];
         _this.resetMainList = null;
         _this.resetFilteredData = false;
+        _this.preventSetCurrentData = false;
         _this.scrollFocusStatus = false;
         _this.keyDownStatus = false;
+        _this.IsScrollerAtEnd = function () {
+            return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
+        };
         return _this;
     }
     MultiSelect.prototype.enableRTL = function (state) {
@@ -11149,6 +11572,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.requiredModules = function () {
         var modules = [];
+        if (this.enableVirtualization) {
+            modules.push({ args: [this], member: 'VirtualScroll' });
+        }
         if (this.mode === 'CheckBox') {
             this.isGroupChecking = this.enableGroupCheckBox;
             if (this.enableGroupCheckBox) {
@@ -11289,6 +11715,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
                 _this.updateAriaActiveDescendant();
                 if (_this.isFirstClick) {
+                    if (_this.enableVirtualization && _this.mode === 'CheckBox' && _this.value) {
+                        _this.updateVirtualReOrderList();
+                    }
                     _this.loadTemplate();
                 }
                 if (_this.mode === 'CheckBox' && _this.showSelectAll) {
@@ -11297,6 +11726,33 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
         });
     };
+    MultiSelect.prototype.updateVirtualReOrderList = function (isCheckBoxUpdate) {
+        var query = this.getForQuery(this.value, true).clone();
+        this.resetList(this.dataSource, this.fields, query);
+        this.UpdateSkeleton();
+        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+        this.virtualItemCount = this.itemCount;
+        if (this.mode !== 'CheckBox') {
+            this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+        }
+        if (!this.list.querySelector('.e-virtual-ddl')) {
+            var virualElement = this.createElement('div', {
+                id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+            });
+            this.popupWrapper.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();
+        }
+        if (this.list.querySelector('.e-virtual-ddl-content')) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+        }
+        if (isCheckBoxUpdate) {
+            this.loadTemplate();
+        }
+    };
     MultiSelect.prototype.updateListItems = function (listItems, mainListItems) {
         for (var i = 0; i < listItems.length; i++) {
             this.findGroupStart(listItems[i]);
@@ -11306,19 +11762,33 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.loadTemplate = function () {
         this.refreshListItems(null);
+        if (this.enableVirtualization && this.list && this.mode === 'CheckBox') {
+            var reOrderList = this.list.querySelectorAll('.e-reorder')[0];
+            if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList) {
+                this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);
+            }
+        }
         if (this.mode === 'CheckBox') {
             this.removeFocus();
         }
         this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', e: this });
+        this.isPreventScrollAction = true;
     };
     MultiSelect.prototype.setScrollPosition = function () {
         if (((!this.hideSelectedItem && this.mode !== 'CheckBox') || (this.mode === 'CheckBox' && !this.enableSelectionOrder)) &&
             (!isNullOrUndefined(this.value) && (this.value.length > 0))) {
-            var valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', this.value[this.value.length - 1]);
+            var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+            var valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', value);
             if (!isNullOrUndefined(valueEle)) {
                 this.scrollBottom(valueEle);
             }
         }
+        if (this.enableVirtualization) {
+            var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+            if (focusedItem) {
+                this.scrollBottom(focusedItem);
+            }
+        }
     };
     MultiSelect.prototype.focusAtFirstListItem = function () {
         if (this.ulElement && this.ulElement.querySelector('li.'
@@ -11329,9 +11799,15 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 return;
             }
             else {
-                element = this.ulElement.querySelector('li.'
-                    + dropDownBaseClasses.li + ':not(.'
-                    + HIDE_LIST + ')');
+                if (this.enableVirtualization) {
+                    element = this.ulElement.querySelector('li.'
+                        + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                }
+                else {
+                    element = this.ulElement.querySelector('li.'
+                        + dropDownBaseClasses.li + ':not(.'
+                        + HIDE_LIST + ')');
+                }
             }
             if (element !== null) {
                 this.removeFocus();
@@ -11346,7 +11822,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             if (this.value && this.value.length) {
-                Search(this.value[this.value.length - 1], this.liCollections, 'StartsWith', this.ignoreCase);
+                var value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+                Search(value, this.liCollections, 'StartsWith', this.ignoreCase);
             }
             else {
                 activeElement = null;
@@ -11354,7 +11831,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         if (activeElement && activeElement.item !== null) {
             this.addListFocus(activeElement.item);
-            if (((this.allowCustomValue || this.allowFiltering) && this.isPopupOpen() && this.closePopupOnSelect) || this.closePopupOnSelect) {
+            if (((this.allowCustomValue || this.allowFiltering) && this.isPopupOpen() && this.closePopupOnSelect && !this.enableVirtualization) || this.closePopupOnSelect && !this.enableVirtualization) {
                 this.scrollBottom(activeElement.item, activeElement.index);
             }
         }
@@ -11396,9 +11873,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP$1);
         var value = elements[elements.length - 1].getAttribute('data-value');
         if (!isNullOrUndefined(this.value)) {
-            this.tempValues = this.value.slice();
+            this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
         }
-        var customValue = this.getFormattedValue(value);
+        var customValue = this.allowObjectBinding ? this.getDataByValue(value) : this.getFormattedValue(value);
         if (this.allowCustomValue && (value !== 'false' && customValue === false || (!isNullOrUndefined(customValue) &&
             customValue.toString() === 'NaN'))) {
             customValue = value;
@@ -11424,15 +11901,43 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         return this.targetInputElement.value;
     };
-    MultiSelect.prototype.getForQuery = function (valuecheck) {
+    MultiSelect.prototype.getForQuery = function (valuecheck, isCheckbox) {
         var predicate;
         var field = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
-        for (var i = 0; i < valuecheck.length; i++) {
-            if (i === 0) {
-                predicate = new Predicate(field, 'equal', valuecheck[i]);
+        if (this.enableVirtualization) {
+            if (isCheckbox) {
+                for (var i = 0; i < valuecheck.length; i++) {
+                    var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', valuecheck[i]) : valuecheck[i];
+                    if (i === 0) {
+                        predicate = new Predicate(field, 'equal', value);
+                    }
+                    else {
+                        predicate = predicate.or(field, 'equal', value);
+                    }
+                }
+                return new Query().where(predicate);
             }
             else {
-                predicate = predicate.or(field, 'equal', valuecheck[i]);
+                for (var i = 0; i < valuecheck.length; i++) {
+                    var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', valuecheck[i]) : valuecheck[i];
+                    if (i === 0) {
+                        predicate = new Predicate(field, 'notequal', value);
+                    }
+                    else {
+                        predicate = predicate.and(field, 'notequal', value);
+                    }
+                }
+                return new Query().where(predicate);
+            }
+        }
+        else {
+            for (var i = 0; i < valuecheck.length; i++) {
+                if (i === 0) {
+                    predicate = new Predicate(field, 'equal', valuecheck[i]);
+                }
+                else {
+                    predicate = predicate.or(field, 'equal', valuecheck[i]);
+                }
             }
         }
         if (this.dataSource instanceof DataManager && this.dataSource.adaptor instanceof JsonAdaptor) {
@@ -11444,14 +11949,20 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     /* eslint-disable @typescript-eslint/no-unused-vars */
     MultiSelect.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
+        if (this.dataSource instanceof DataManager && !isNullOrUndefined(e) && !this.virtualGroupDataSource) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = e.count;
+        }
         /* eslint-enable @typescript-eslint/no-unused-vars */
         _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);
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
-        if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
+        if (!isNullOrUndefined(this.value) && !this.allowCustomValue && !this.enableVirtualization) {
             for (var i = 0; i < this.value.length; i++) {
-                var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', proxy.value[i]);
+                var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', proxy.value[i]) : proxy.value[i];
+                var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', value);
                 if (!checkEle && !(this.dataSource instanceof DataManager)) {
                     this.value.splice(i, 1);
                     i -= 1;
@@ -11539,7 +12050,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             dropDownBaseClasses.selected;
         if (!isNullOrUndefined(this.value)) {
             for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
-                value = this.value[index];
+                value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[index]) : this.value[index];
                 element = this.findListElement(this.list, 'li', 'data-value', value);
                 if (element) {
                     addClass([element], className);
@@ -11638,13 +12149,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.checkSelectAll = function () {
         var groupItemLength = this.list.querySelectorAll('li.e-list-group-item.e-active').length;
         var listItem = this.list.querySelectorAll('li.e-list-item');
-        var searchCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;
+        var searchCount = this.enableVirtualization ? this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-virtual-list)').length : this.list.querySelectorAll('li.' + dropDownBaseClasses.li).length;
         var searchActiveCount = this.list.querySelectorAll('li.' + dropDownBaseClasses.selected).length;
         if (this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {
             searchActiveCount = searchActiveCount - groupItemLength;
         }
-        if ((searchCount === searchActiveCount || searchActiveCount === this.maximumSelectionLength)
-            && (this.mode === 'CheckBox' && this.showSelectAll)) {
+        if ((!this.enableVirtualization && ((searchCount === searchActiveCount || searchActiveCount === this.maximumSelectionLength)
+            && (this.mode === 'CheckBox' && this.showSelectAll))) || (this.enableVirtualization && this.mode === 'CheckBox' && this.showSelectAll && this.virtualSelectAll && this.value && this.value.length === this.totalItemCount)) {
             this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'check' });
         }
         else if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll)) {
@@ -11681,7 +12192,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         this.isValidKey = (this.isPopupOpen() && e.keyCode === 8) || this.isValidKey;
         this.isValidKey = e.ctrlKey && e.keyCode === 86 ? false : this.isValidKey;
-        if (this.isValidKey) {
+        if (this.isValidKey && this.inputElement) {
             this.isValidKey = false;
             this.expandTextbox();
             this.showOverAllClear();
@@ -11711,7 +12222,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             return filterQuery;
         }
         if (this.filterAction) {
-            if (this.targetElement() !== null) {
+            if ((this.targetElement() !== null && !this.enableVirtualization) || (this.enableVirtualization && this.targetElement() !== null && this.targetElement().trim() !== '')) {
                 var dataType = this.typeOfData(this.dataSource).typeof;
                 if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                     filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
@@ -11721,21 +12232,89 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
             }
+            if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && !this.virtualSelectAll) {
+                return this.virtualFilterQuery(filterQuery);
+            }
             return filterQuery;
         }
         else {
+            if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && !this.virtualSelectAll && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+                return this.virtualFilterQuery(filterQuery);
+            }
             return query ? query : this.query ? this.query : new Query();
         }
     };
+    MultiSelect.prototype.virtualFilterQuery = function (filterQuery) {
+        var takeValue = this.getTakeValue();
+        var isReOrder = true;
+        var isSkip = true;
+        var isTake = true;
+        for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+            if (this.getModuleName() === 'multiselect' && ((filterQuery.queries[queryElements].e && filterQuery.queries[queryElements].e.condition == 'or') || (filterQuery.queries[queryElements].e && filterQuery.queries[queryElements].e.operator == 'equal'))) {
+                isReOrder = false;
+            }
+            if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                isSkip = false;
+            }
+            if (filterQuery.queries[queryElements].fn === 'onTake') {
+                isTake = false;
+            }
+        }
+        if ((this.allowFiltering && isSkip) || !isReOrder || (!this.allowFiltering && isSkip)) {
+            if (!isReOrder) {
+                filterQuery.skip(this.viewPortInfo.startIndex);
+            }
+            else {
+                filterQuery.skip(this.virtualItemStartIndex);
+            }
+        }
+        if (isTake) {
+            if (this.isIncrementalRequest) {
+                filterQuery.take(this.incrementalEndIndex);
+            }
+            else {
+                filterQuery.take(takeValue);
+            }
+        }
+        filterQuery.requiresCount();
+        return filterQuery;
+    };
+    MultiSelect.prototype.getTakeValue = function () {
+        return this.allowFiltering && Browser.isDevice ? Math.round(window.outerHeight / this.listItemHeight) : this.itemCount;
+    };
     MultiSelect.prototype.dataUpdater = function (dataSource, query, fields) {
         this.isDataFetched = false;
+        var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
         if (this.targetElement().trim() === '') {
-            var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
+            var list = this.enableVirtualization ? this.list.cloneNode(true) : this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
             if (this.backCommand) {
                 this.remoteCustomValue = false;
                 if (this.allowCustomValue && list.querySelectorAll('li').length == 0 && this.mainData.length > 0) {
                     this.mainData = [];
                 }
+                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 (this.mode !== 'CheckBox') {
+                        this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+                    }
+                    this.UpdateSkeleton();
+                    if ((isNoData || this.allowCustomValue) && !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(list, this.mainData);
                 if (this.value && this.value.length) {
                     this.refreshSelection();
@@ -11747,7 +12326,30 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
         }
         else {
+            if (this.enableVirtualization && this.allowFiltering) {
+                this.isPreventScrollAction = true;
+                this.list.scrollTop = 0;
+                this.previousStartIndex = 0;
+                this.virtualListInfo = null;
+            }
             this.resetList(dataSource, fields, query);
+            if (this.enableVirtualization && (isNoData || this.allowCustomValue) && !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.mode !== 'CheckBox') {
+                    this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+                }
+                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.allowCustomValue) {
                 if (!(dataSource instanceof DataManager)) {
                     this.checkForCustomValue(query, fields);
@@ -11758,6 +12360,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        if (this.enableVirtualization && this.allowFiltering) {
+            this.getFilteringSkeletonCount();
+        }
         this.refreshPopup();
         if (this.mode === 'CheckBox') {
             this.removeFocus();
@@ -11771,18 +12376,43 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?
                 this.mainData[0] : this.mainData;
             if (customData && typeof (customData) !== 'string' && typeof (customData) !== 'number' && typeof (customData) !== 'boolean') {
-                var dataItem = {};
-                setValue(field.text, value, dataItem);
+                var dataItem_1 = {};
+                setValue(field.text, value, dataItem_1);
                 if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)
                     === 'number') {
-                    setValue(field.value, Math.random(), dataItem);
+                    setValue(field.value, Math.random(), dataItem_1);
                 }
                 else {
-                    setValue(field.value, value, dataItem);
+                    setValue(field.value, value, dataItem_1);
+                }
+                var emptyObject_1 = {};
+                if (this.allowObjectBinding) {
+                    var keys = this.listData && this.listData.length > 0 ? Object.keys(this.listData[0]) : this.firstItem ? Object.keys(this.firstItem) : Object.keys(dataItem_1);
+                    // Create an empty object with predefined keys
+                    keys.forEach(function (key) {
+                        emptyObject_1[key] = ((key === fields.value) || (key === fields.text)) ? getValue(fields.value, dataItem_1) : null;
+                    });
+                }
+                dataItem_1 = this.allowObjectBinding ? emptyObject_1 : dataItem_1;
+                if (this.enableVirtualization) {
+                    this.virtualCustomData = dataItem_1;
+                    var tempData = this.virtualGroupDataSource ? JSON.parse(JSON.stringify(this.virtualGroupDataSource)) : JSON.parse(JSON.stringify(this.dataSource));
+                    var totalData = [];
+                    if (this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {
+                        totalData = tempData.concat(this.virtualCustomSelectData);
+                    }
+                    tempData.splice(0, 0, dataItem_1);
+                    this.isCustomDataUpdated = true;
+                    this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+                    this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
+                    this.resetList(tempData, field, query);
+                    this.isCustomDataUpdated = false;
+                }
+                else {
+                    var tempData = JSON.parse(JSON.stringify(this.listData));
+                    tempData.splice(0, 0, dataItem_1);
+                    this.resetList(tempData, field, query);
                 }
-                var tempData = JSON.parse(JSON.stringify(this.listData));
-                tempData.splice(0, 0, dataItem);
-                this.resetList(tempData, field, query);
             }
             else if (this.listData) {
                 var tempData = JSON.parse(JSON.stringify(this.listData));
@@ -11816,6 +12446,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.wrapperClick = function (e) {
         this.setDynValue = false;
+        this.keyboardEvent = null;
+        this.isKeyBoardAction = false;
         if (!this.enabled) {
             return;
         }
@@ -12015,8 +12647,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (this.initStatus && this.validateValues(newValue, oldValue)) {
             var eventArgs = {
                 e: event,
-                oldValue: oldVal,
-                value: newVal,
+                oldValue: this.allowObjectBinding ? oldVal : oldVal,
+                value: this.allowObjectBinding ? newVal : newVal,
                 isInteracted: event ? true : false,
                 element: this.element,
                 event: event
@@ -12032,13 +12664,14 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 this.dispatchEvent(this.hiddenElement, 'change');
             }
         }
+        this.selectedValueInfo = this.viewPortInfo;
     };
     MultiSelect.prototype.updateTempValue = function () {
         if (!this.value) {
             this.tempValues = this.value;
         }
         else {
-            this.tempValues = this.value.slice();
+            this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
         }
     };
     MultiSelect.prototype.updateAriaActiveDescendant = function () {
@@ -12046,26 +12679,44 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             attributes(this.inputElement, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
         }
     };
-    MultiSelect.prototype.getPagingCount = function () {
-        var height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
-            getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
-        return Math.round(this.list.offsetHeight / parseInt(height, 10));
-    };
-    MultiSelect.prototype.pageUpSelection = function (steps) {
+    MultiSelect.prototype.pageUpSelection = function (steps, isVirtualKeyAction) {
         var collection = this.list.querySelectorAll('li.'
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         var previousItem = steps >= 0 ? collection[steps + 1] : collection[0];
-        this.addListFocus(previousItem);
-        this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));
+        if (this.enableVirtualization && isVirtualKeyAction) {
+            previousItem = steps >= 0 && this.viewPortInfo.startIndex != 0 ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[this.skeletonCount];
+        }
+        if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {
+            previousItem = this.liCollections[this.skeletonCount];
+        }
+        if (this.enableVirtualization) {
+            if (!isNullOrUndefined(previousItem) && !previousItem.classList.contains('e-item-focus')) {
+                this.addListFocus(previousItem);
+                this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
+            }
+            else if (this.viewPortInfo.startIndex == 0) {
+                this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
+            }
+        }
+        else {
+            this.addListFocus(previousItem);
+            this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
+        }
     };
-    MultiSelect.prototype.pageDownSelection = function (steps) {
+    MultiSelect.prototype.pageDownSelection = function (steps, isVirtualKeyAction) {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         var list = this.getItems();
         var collection = this.list.querySelectorAll('li.'
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         var previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];
+        if (this.enableVirtualization && this.skeletonCount > 0) {
+            previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
+        }
+        if (this.enableVirtualization && isVirtualKeyAction) {
+            previousItem = steps <= list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
+        }
         this.addListFocus(previousItem);
-        this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')));
+        this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), false, this.keyboardEvent.keyCode);
     };
     MultiSelect.prototype.getItems = function () {
         if (!this.list) {
@@ -12184,21 +12835,110 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    MultiSelect.prototype.homeNavigation = function (isHome) {
+    MultiSelect.prototype.homeNavigation = function (isHome, isVirtualKeyAction) {
         this.removeFocus();
+        if (this.enableVirtualization) {
+            if (isHome) {
+                if (this.enableVirtualization && this.viewPortInfo.startIndex !== 0) {
+                    this.viewPortInfo.startIndex = 0;
+                    this.viewPortInfo.endIndex = this.itemCount;
+                    this.updateVirtualItemIndex();
+                    this.resetList(this.dataSource, this.fields, this.query);
+                }
+            }
+            else {
+                if (this.enableVirtualization && ((!this.value && this.viewPortInfo.endIndex !== this.totalItemCount) || (this.value && this.value.length > 0 && this.viewPortInfo.endIndex !== this.totalItemCount + this.value.length))) {
+                    this.viewPortInfo.startIndex = this.totalItemCount - this.itemCount;
+                    this.viewPortInfo.endIndex = this.totalItemCount;
+                    this.updateVirtualItemIndex();
+                    var query = new Query().clone();
+                    if (this.value && this.value.length > 0) {
+                        query = this.getForQuery(this.value).clone();
+                        query = query.skip(this.totalItemCount - this.itemCount);
+                    }
+                    this.resetList(this.dataSource, this.fields, query);
+                }
+            }
+        }
+        this.UpdateSkeleton();
         var scrollEle = this.ulElement.querySelectorAll('li.' + dropDownBaseClasses.li
             + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         if (scrollEle.length > 0) {
             var element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];
+            if (this.enableVirtualization && isHome) {
+                element = scrollEle[this.skeletonCount];
+            }
+            this.removeFocus();
             element.classList.add(dropDownBaseClasses.focus);
-            this.scrollBottom(element);
+            if (this.enableVirtualization && isHome) {
+                this.scrollTop(element, undefined, this.keyboardEvent.keyCode);
+            }
+            else if (!isVirtualKeyAction) {
+                this.scrollBottom(element, undefined, false, this.keyboardEvent.keyCode);
+            }
             this.updateAriaActiveDescendant();
         }
     };
+    MultiSelect.prototype.updateSelectionList = function () {
+        if (!isNullOrUndefined(this.value) && this.value.length) {
+            for (var index = 0; index < this.value.length; index++) {
+                var value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
+                var selectedItem = this.getElementByValue(value);
+                if (selectedItem && !selectedItem.classList.contains(dropDownBaseClasses.selected)) {
+                    selectedItem.classList.add('e-active');
+                }
+            }
+        }
+    };
+    MultiSelect.prototype.handleVirtualKeyboardActions = function (e, pageCount) {
+        var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+        var activeIndex;
+        this.isKeyBoardAction = true;
+        switch (e.keyCode) {
+            case 40:
+                this.arrowDown(e, true);
+                break;
+            case 38:
+                this.arrowUp(e, true);
+                break;
+            case 33:
+                e.preventDefault();
+                if (focusedItem) {
+                    var count = (this.getPageCount() * 2) - 4;
+                    activeIndex = Math.round(count);
+                    activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));
+                    this.pageUpSelection(activeIndex - this.getPageCount(), true);
+                    this.updateAriaAttribute();
+                }
+                break;
+            case 34:
+                e.preventDefault();
+                if (focusedItem) {
+                    activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));
+                    this.pageDownSelection(activeIndex + this.getPageCount() + 1, true);
+                    this.updateAriaAttribute();
+                }
+                break;
+            case 35:
+            case 36:
+                this.isMouseScrollAction = true;
+                this.homeNavigation((e.keyCode === 36) ? true : false, true);
+                this.isPreventScrollAction = true;
+                break;
+        }
+        this.keyboardEvent = null;
+        this.isScrollChanged = true;
+        this.isKeyBoardAction = false;
+    };
     MultiSelect.prototype.onKeyDown = function (e) {
         if (this.readonly || !this.enabled && this.mode !== 'CheckBox') {
             return;
         }
+        this.preventSetCurrentData = false;
+        this.keyboardEvent = e;
+        if (this.isPreventKeyAction && this.enableVirtualization) {
+            e.preventDefault();
+        }
         this.keyCode = e.keyCode;
         this.keyDownStatus = true;
         if (e.keyCode > 111 && e.keyCode < 124) {
@@ -12211,16 +12951,18 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         else if (this.isPopupOpen()) {
             var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
             var activeIndex = void 0;
+            this.isKeyBoardAction = true;
             switch (e.keyCode) {
                 case 36:
                 case 35:
+                    this.isMouseScrollAction = true;
                     this.homeNavigation((e.keyCode === 36) ? true : false);
                     break;
                 case 33:
                     e.preventDefault();
                     if (focusedItem) {
-                        this.getIndexByValue(focusedItem.getAttribute('data-value'));
-                        this.pageUpSelection(activeIndex - this.getPagingCount());
+                        activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));
+                        this.pageUpSelection(activeIndex - this.getPageCount() - 1);
                         this.updateAriaAttribute();
                     }
                     return;
@@ -12228,7 +12970,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     e.preventDefault();
                     if (focusedItem) {
                         this.getIndexByValue(focusedItem.getAttribute('data-value'));
-                        this.pageDownSelection(activeIndex + this.getPagingCount());
+                        this.pageDownSelection(activeIndex + this.getPageCount());
                         this.updateAriaAttribute();
                     }
                     return;
@@ -12294,10 +13036,11 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (!(this.mode === 'CheckBox' && this.showSelectAll)) {
             this.refreshPopup();
         }
+        this.isKeyBoardAction = false;
     };
-    MultiSelect.prototype.arrowDown = function (e) {
+    MultiSelect.prototype.arrowDown = function (e, isVirtualKeyAction) {
         e.preventDefault();
-        this.moveByList(1);
+        this.moveByList(1, isVirtualKeyAction);
         this.keyAction = true;
         if (document.activeElement.classList.contains(FILTERINPUT)
             || (this.mode === 'CheckBox' && !this.allowFiltering && document.activeElement !== this.list)) {
@@ -12305,7 +13048,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         this.updateAriaAttribute();
     };
-    MultiSelect.prototype.arrowUp = function (e) {
+    MultiSelect.prototype.arrowUp = function (e, isVirtualKeyAction) {
         e.preventDefault();
         this.keyAction = true;
         var list = this.list.querySelectorAll('li.'
@@ -12323,7 +13066,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.keyAction = false;
             this.notify('inputFocus', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'focus' });
         }
-        this.moveByList(-1);
+        this.moveByList(-1, isVirtualKeyAction);
         this.updateAriaAttribute();
     };
     MultiSelect.prototype.spaceKeySelection = function (e) {
@@ -12374,8 +13117,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         else if (e.keyCode === 8 && this.mode === 'Delimiter') {
             if (this.value && this.value.length) {
                 e.preventDefault();
-                var temp = this.value[this.value.length - 1];
-                this.removeValue(temp, e);
+                var temp = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+                this.removeValue(this.value[this.value.length - 1], e);
                 this.updateDelimeter(this.delimiterChar, e);
                 this.focusAtLastListItem(temp);
             }
@@ -12390,6 +13133,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.escapeAction = function () {
         var temp = this.tempValues ? this.tempValues.slice() : [];
+        if (this.allowObjectBinding) {
+            temp = this.tempValues ? this.tempValues.slice() : [];
+        }
         if (this.value && this.validateValues(this.value, temp)) {
             if (this.mode !== 'CheckBox') {
                 this.value = temp;
@@ -12411,36 +13157,103 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         this.makeTextBoxEmpty();
     };
-    MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex) {
+    MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex, isInitialSelection, keyCode) {
+        if (isInitialSelection === void 0) { isInitialSelection = false; }
+        if (keyCode === void 0) { keyCode = null; }
+        if ((!isNullOrUndefined(selectedLI) && selectedLI.classList.contains('e-virtual-list')) || (this.enableVirtualization && isNullOrUndefined(selectedLI))) {
+            selectedLI = this.liCollections[this.skeletonCount];
+        }
+        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 ? selectedLI.offsetTop + (this.virtualListInfo.startIndex * selectedLI.offsetHeight) : selectedLI.offsetTop;
         var currentOffset = this.list.offsetHeight;
-        var nextBottom = selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop;
+        var nextBottom = selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) + selectedLI.offsetHeight - this.list.scrollTop;
         var nextOffset = this.list.scrollTop + nextBottom - currentOffset;
-        var boxRange = (selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop);
+        var isScrollerCHanged = false;
+        var boxRange = selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) + selectedLI.offsetHeight - this.list.scrollTop;
         boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
             boxRange - this.fixedHeaderElement.offsetHeight : boxRange;
-        if (activeIndex === 0) {
+        if (activeIndex === 0 && !this.enableVirtualization) {
             this.list.scrollTop = 0;
         }
-        else if (nextBottom > currentOffset) {
-            this.list.scrollTop = nextOffset;
-        }
-        else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {
-            this.list.scrollTop = nextOffset;
+        else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {
+            var currentElementValue = selectedLI ? selectedLI.getAttribute('data-value') : null;
+            var liCount = keyCode == 34 ? this.getPageCount() - 1 : 1;
+            if (!this.enableVirtualization || this.isKeyBoardAction || isInitialSelection) {
+                if (this.isKeyBoardAction && this.enableVirtualization && lastElementValue && currentElementValue === lastElementValue && keyCode != 35 && !this.isVirtualScrolling) {
+                    this.isPreventKeyAction = true;
+                    this.list.scrollTop += selectedLI.offsetHeight * liCount;
+                    this.isPreventKeyAction = this.IsScrollerAtEnd() ? false : this.isPreventKeyAction;
+                    this.isKeyBoardAction = false;
+                    this.isPreventScrollAction = false;
+                }
+                else if (this.enableVirtualization && keyCode == 35) {
+                    this.isPreventKeyAction = false;
+                    this.isKeyBoardAction = false;
+                    this.isPreventScrollAction = false;
+                    this.list.scrollTop = this.list.scrollHeight;
+                }
+                else {
+                    if (keyCode == 34 && this.enableVirtualization && !this.isVirtualScrolling) {
+                        this.isPreventKeyAction = false;
+                        this.isKeyBoardAction = false;
+                        this.isPreventScrollAction = false;
+                        nextOffset = nextOffset + (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;
     };
-    MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex) {
-        var nextOffset = selectedLI.offsetTop - this.list.scrollTop;
+    MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex, keyCode) {
+        if (keyCode === void 0) { keyCode = null; }
+        var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ? selectedLI.offsetTop + (this.virtualListInfo.startIndex * selectedLI.offsetHeight) : selectedLI.offsetTop;
+        var nextOffset = selectedLiOffsetTop - (virtualListCount * 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 && !isUndefined(this.fixedHeaderElement) ?
             nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;
-        var boxRange = (selectedLI.offsetTop + selectedLI.offsetHeight - this.list.scrollTop);
-        if (activeIndex === 0) {
+        var boxRange = (selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) + selectedLI.offsetHeight - this.list.scrollTop);
+        var isPageUpKeyAction = this.enableVirtualization && this.getModuleName() === 'autocomplete' && nextOffset <= 0;
+        if (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 = selectedLI ? selectedLI.getAttribute('data-value') : null;
+            var liCount = keyCode == 33 ? this.getPageCount() - 2 : 1;
+            if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue && currentElementValue === firstElementValue && keyCode != 36 && !this.isVirtualScrolling) {
+                this.isUpwardScrolling = true;
+                this.isPreventKeyAction = true;
+                this.list.scrollTop -= selectedLI.offsetHeight * liCount;
+                this.isPreventKeyAction = this.list.scrollTop != 0 ? this.isPreventKeyAction : false;
+                this.isKeyBoardAction = false;
+                this.isPreventScrollAction = false;
+            }
+            else if (this.enableVirtualization && keyCode == 36) {
+                this.isPreventScrollAction = false;
+                this.isPreventKeyAction = true;
+                this.isKeyBoardAction = false;
+                this.list.scrollTo(0, 0);
+            }
+            else {
+                if (keyCode == 33 && this.enableVirtualization && !this.isVirtualScrolling) {
+                    this.isPreventKeyAction = false;
+                    this.isKeyBoardAction = false;
+                    this.isPreventScrollAction = false;
+                    nextOffset = nextOffset - (selectedLI.offsetHeight * liCount);
+                }
+                this.list.scrollTop = this.list.scrollTop + nextOffset;
+            }
         }
         else if (!(boxRange > 0 && this.list.offsetHeight > boxRange)) {
-            this.list.scrollTop = selectedLI.offsetTop - (this.fields.groupBy && !isUndefined(this.fixedHeaderElement) ?
+            this.list.scrollTop = selectedLI.offsetTop - (this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
                 this.fixedHeaderElement.offsetHeight : 0);
         }
     };
@@ -12527,7 +13340,19 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if ((this.allowFiltering || (this.mode === 'CheckBox' && this.enableSelectionOrder === true)
             || this.allowCustomValue) && this.mainList && this.listData) {
             var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
-            this.onActionComplete(list, this.mainData);
+            if (this.enableVirtualization) {
+                if (this.allowCustomValue && this.virtualCustomData && data == null && this.virtualCustomData && this.viewPortInfo && this.viewPortInfo.startIndex === 0 && this.viewPortInfo.endIndex === this.itemCount) {
+                    this.virtualCustomData = null;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.renderItems(this.mainData, this.fields);
+                }
+                else {
+                    this.onActionComplete(this.list, this.listData);
+                }
+            }
+            else {
+                this.onActionComplete(list, this.mainData);
+            }
             this.focusAtLastListItem(data);
             if (this.value && this.value.length) {
                 this.refreshSelection();
@@ -12542,14 +13367,15 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var temp;
         if (selectedElem !== null) {
             if (!isNullOrUndefined(this.value)) {
-                this.tempValues = this.value.slice();
+                this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
             }
             temp = selectedElem.nextElementSibling;
             if (temp !== null) {
                 this.removeChipSelection();
                 this.addChipSelection(temp, e);
             }
-            this.removeValue(selectedElem.getAttribute('data-value'), e);
+            var currentChip = this.allowObjectBinding ? this.getDataByValue(selectedElem.getAttribute('data-value')) : selectedElem.getAttribute('data-value');
+            this.removeValue(currentChip, e);
             this.makeTextBoxEmpty();
         }
         if (this.closePopupOnSelect) {
@@ -12576,7 +13402,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             selectAllParent.classList.remove('e-item-focus');
         }
     };
-    MultiSelect.prototype.moveByList = function (position) {
+    MultiSelect.prototype.moveByList = function (position, isVirtualKeyAction) {
         if (this.list) {
             var elements = this.list.querySelectorAll('li.'
                 + dropDownBaseClasses.li
@@ -12587,6 +13413,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
             }
             var selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);
+            if (this.enableVirtualization && isVirtualKeyAction && !isNullOrUndefined(this.currentFocuedListElement)) {
+                selectedElem = this.getElementByValue(this.getFormattedValue(this.currentFocuedListElement.getAttribute('data-value')));
+            }
             var temp = -1;
             var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
             if (this.mode === 'CheckBox' && this.showSelectAll && position == 1 && !isNullOrUndefined(selectAllParent) && !selectAllParent.classList.contains('e-item-focus') && this.list.getElementsByClassName('e-item-focus').length == 0 && this.liCollections.length > 1) {
@@ -12615,22 +13444,57 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 if (position > 0) {
                     if (temp < (elements.length - 1)) {
                         this.removeFocus();
-                        this.addListFocus(elements[++temp]);
-                        this.updateCheck(elements[temp]);
-                        this.scrollBottom(elements[temp], temp);
+                        if (this.enableVirtualization && isVirtualKeyAction) {
+                            this.addListFocus(elements[temp]);
+                        }
+                        else {
+                            this.addListFocus(elements[++temp]);
+                        }
+                        if (temp > -1) {
+                            this.updateCheck(elements[temp]);
+                            this.scrollBottom(elements[temp], temp);
+                            this.currentFocuedListElement = elements[temp];
+                        }
                     }
                 }
                 else {
                     if (temp > 0) {
-                        this.removeFocus();
-                        this.addListFocus(elements[--temp]);
-                        this.updateCheck(elements[temp]);
-                        this.scrollTop(elements[temp], temp);
+                        if (this.enableVirtualization) {
+                            var isVirtualElement = elements[temp - 1].classList.contains('e-virtual-list');
+                            var elementIndex = isVirtualKeyAction ? temp : temp - 1;
+                            if (isVirtualKeyAction || !isVirtualElement) {
+                                this.removeFocus();
+                            }
+                            if (isVirtualKeyAction || !isVirtualElement) {
+                                this.addListFocus(elements[elementIndex]);
+                                this.updateCheck(elements[elementIndex]);
+                                this.scrollTop(elements[elementIndex], temp);
+                                this.currentFocuedListElement = elements[elementIndex];
+                            }
+                        }
+                        else {
+                            this.removeFocus();
+                            this.addListFocus(elements[--temp]);
+                            this.updateCheck(elements[temp]);
+                            this.scrollTop(elements[temp], temp);
+                        }
                     }
                 }
             }
         }
     };
+    MultiSelect.prototype.getElementByValue = function (value) {
+        var item;
+        var listItems = this.getItems();
+        for (var _i = 0, listItems_1 = listItems; _i < listItems_1.length; _i++) {
+            var liItem = listItems_1[_i];
+            if (this.getFormattedValue(liItem.getAttribute('data-value')) === value) {
+                item = liItem;
+                break;
+            }
+        }
+        return item;
+    };
     MultiSelect.prototype.updateCheck = function (element) {
         if (this.mode === 'CheckBox' && this.enableGroupCheckBox &&
             !isNullOrUndefined(this.fields.groupBy)) {
@@ -12692,7 +13556,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (this.enabled && !this.readonly) {
             var element = e.target.parentElement;
             var customVal = element.getAttribute('data-value');
-            var value = this.getFormattedValue(customVal);
+            var value = this.allowObjectBinding ? this.getDataByValue(customVal) : this.getFormattedValue(customVal);
             if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||
                 (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {
                 value = customVal;
@@ -12704,6 +13568,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 this.inputElement.focus();
             }
             this.removeValue(value, e);
+            value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
             if (isNullOrUndefined(this.findListElement(this.list, 'li', 'data-value', value)) && this.mainList && this.listData) {
                 var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
                 this.onActionComplete(list, this.mainData);
@@ -12738,7 +13603,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         this.expandTextbox();
     };
     MultiSelect.prototype.removeAllItems = function (value, eve, isClearAll, element, mainElement) {
-        var index = this.value.indexOf(value);
+        var index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) : this.value.indexOf(value);
         var removeVal = this.value.slice(0);
         removeVal.splice(index, 1);
         this.setProperties({ value: [].concat([], removeVal) }, true);
@@ -12753,7 +13618,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             e: this, index: index
         });
         this.invokeCheckboxSelection(element, eve, isClearAll);
-        this.updateMainList(true, value, mainElement);
+        var currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
+        this.updateMainList(true, currentValue, mainElement);
         this.updateChipStatus();
     };
     MultiSelect.prototype.invokeCheckboxSelection = function (element, eve, isClearAll) {
@@ -12770,9 +13636,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.removeValue = function (value, eve, length, isClearAll) {
         var _this = this;
-        var index = this.value.indexOf(this.getFormattedValue(value));
+        var index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) : this.value.indexOf(this.getFormattedValue(value));
         if (index === -1 && this.allowCustomValue && !isNullOrUndefined(value)) {
-            index = this.value.indexOf(value.toString());
+            index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) : this.value.indexOf(value.toString());
         }
         var targetEle = eve && eve.target;
         isClearAll = (isClearAll || targetEle && targetEle.classList.contains('e-close-hooker')) ? true : null;
@@ -12780,7 +13646,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             HIDE_LIST :
             dropDownBaseClasses.selected;
         if (index !== -1) {
-            var element_1 = this.findListElement(this.list, 'li', 'data-value', value);
+            var currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
+            var element_1 = this.findListElement(this.list, 'li', 'data-value', currentValue);
             var val_1 = this.getDataByValue(value);
             var eventArgs = {
                 e: eve,
@@ -12794,11 +13661,20 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     _this.removeIndex++;
                 }
                 else {
+                    _this.virtualSelectAll = false;
                     var removeVal = _this.value.slice(0);
+                    if (_this.enableVirtualization && isClearAll) {
+                        removeVal = [];
+                    }
                     removeVal.splice(index, 1);
                     _this.setProperties({ value: [].concat([], removeVal) }, true);
+                    if (_this.enableVirtualization) {
+                        var currentText = index == 0 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index] + _this.delimiterChar, '') : _this.text.replace(_this.delimiterChar + _this.text.split(_this.delimiterChar)[index], '');
+                        _this.setProperties({ text: currentText.toString() }, true);
+                    }
                     if (element_1 !== null) {
-                        var hideElement = _this.findListElement(_this.mainList, 'li', 'data-value', value);
+                        var currentValue_1 = _this.allowObjectBinding ? getValue(((_this.fields.value) ? _this.fields.value : ''), value) : value;
+                        var hideElement = _this.findListElement(_this.mainList, 'li', 'data-value', currentValue_1);
                         element_1.setAttribute('aria-selected', 'false');
                         removeClass([element_1], className);
                         if (hideElement) {
@@ -12812,15 +13688,16 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         });
                         _this.invokeCheckboxSelection(element_1, eve, isClearAll);
                     }
+                    var currentValue_2 = _this.allowObjectBinding ? getValue(((_this.fields.value) ? _this.fields.value : ''), value) : value;
                     if (_this.hideSelectedItem && _this.fields.groupBy && element_1) {
-                        _this.hideGroupItem(value);
+                        _this.hideGroupItem(currentValue_2);
                     }
                     if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox' &&
                         _this.isPopupOpen()) {
                         _super.prototype.scrollStop.call(_this);
                     }
-                    _this.updateMainList(true, value);
-                    _this.removeChip(value);
+                    _this.updateMainList(true, currentValue_2);
+                    _this.removeChip(currentValue_2, isClearAll);
                     _this.updateChipStatus();
                     var limit = _this.value && _this.value.length ? _this.value.length : 0;
                     if (limit < _this.maximumSelectionLength) {
@@ -12856,6 +13733,14 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     if (isClearAll && (length === 1 || length === null)) {
                         _this.clearAllCallback(eve, isClearAll);
                     }
+                    if (_this.isPopupOpen() && element_1 && element_1.parentElement.classList.contains('e-reorder')) {
+                        if (_this.hideSelectedItem && _this.value && Array.isArray(_this.value) && _this.value.length > 0) {
+                            _this.totalItemsCount();
+                        }
+                        _this.notify("setCurrentViewDataAsync", {
+                            module: "VirtualScroll",
+                        });
+                    }
                 }
             });
         }
@@ -12886,11 +13771,16 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    MultiSelect.prototype.removeChip = function (value) {
+    MultiSelect.prototype.removeChip = function (value, isClearAll) {
         if (this.chipCollectionWrapper) {
-            var element = this.findListElement(this.chipCollectionWrapper, 'span', 'data-value', value);
-            if (element) {
-                remove(element);
+            if (this.enableVirtualization && isClearAll) {
+                var childElements = this.chipCollectionWrapper.querySelectorAll('.e-chips');
+            }
+            else {
+                var element = this.findListElement(this.chipCollectionWrapper, 'span', 'data-value', value);
+                if (element) {
+                    remove(element);
+                }
             }
         }
     };
@@ -12924,12 +13814,45 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.hideOverAllClear();
         }
     };
+    MultiSelect.prototype.indexOfObjectInArray = function (objectToFind, array) {
+        var _loop_1 = function (i) {
+            var item = array[i];
+            if (Object.keys(objectToFind).every(function (key) { return item.hasOwnProperty(key) && item[key] === objectToFind[key]; })) {
+                return { value: i };
+            }
+        };
+        for (var i = 0; i < array.length; i++) {
+            var state_1 = _loop_1(i);
+            if (typeof state_1 === "object")
+                return state_1.value;
+        }
+        return -1; // Return -1 if the object is not found
+    };
     MultiSelect.prototype.addValue = function (value, text, eve) {
         if (!this.value) {
             this.value = [];
         }
-        if (this.value.indexOf(value) < 0) {
-            this.setProperties({ value: [].concat([], this.value, [value]) }, true);
+        var currentValue = this.allowObjectBinding ? this.getDataByValue(value) : value;
+        if ((this.allowObjectBinding && !this.isObjectInArray(value, this.value)) || (!this.allowObjectBinding && this.value.indexOf(currentValue) < 0)) {
+            this.setProperties({ value: [].concat([], this.value, [currentValue]) }, true);
+            if (this.enableVirtualization) {
+                var data = this.viewWrapper.innerHTML;
+                var temp = void 0;
+                data += (this.value.length === 1) ? '' : this.delimiterChar + ' ';
+                temp = this.getOverflowVal(this.value.length - 1);
+                data += temp;
+                temp = this.viewWrapper.innerHTML;
+                this.updateWrapperText(this.viewWrapper, data);
+            }
+            if (this.enableVirtualization && this.mode === 'CheckBox') {
+                var temp = void 0;
+                var currentText = [];
+                var value_1 = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+                temp = this.getTextByValue(value_1);
+                var textValues = this.text != null ? this.text + ',' + temp : temp;
+                currentText.push(textValues);
+                this.setProperties({ text: currentText.toString() }, true);
+            }
         }
         var element = this.findListElement(this.list, 'li', 'data-value', value);
         this.removeFocus();
@@ -12958,6 +13881,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         var list = this.listData;
         if (this.initStatus && !isNotTrigger) {
+            value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
             var val_2 = this.getDataByValue(value);
             var eventArgs = {
                 e: eve,
@@ -12986,7 +13910,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     if (_this.allowCustomValue && _this.isServerRendered && _this.listData !== list) {
                         _this.listData = list;
                     }
-                    _this.updateListSelectEventCallback(value, element, eve);
+                    value = _this.allowObjectBinding ? _this.getDataByValue(value) : value;
+                    if ((_this.enableVirtualization && value) || !_this.enableVirtualization) {
+                        _this.updateListSelectEventCallback(value, element, eve);
+                    }
                     if (_this.hideSelectedItem && _this.fixedHeaderElement && _this.fields.groupBy && _this.mode !== 'CheckBox') {
                         _super.prototype.scrollStop.call(_this);
                     }
@@ -13071,7 +13998,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             chipContent.innerText = data;
         }
         else {
-            chipContent.innerHTML = this.encodeHtmlEntities(data);
+            chipContent.innerHTML = this.encodeHtmlEntities(data.toString());
         }
         chip.appendChild(chipContent);
         var eventArgs = {
@@ -13157,6 +14084,37 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     overAllHeight -= this.header.offsetHeight;
                 }
                 append([this.list], this.popupWrapper);
+                if (!this.list.classList.contains(dropDownBaseClasses.noData) && this.getItems()[1]) {
+                    this.listItemHeight = this.getItems()[1].offsetHeight;
+                }
+                if (this.enableVirtualization && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+                    if (!this.list.querySelector('.e-virtual-ddl-content') && this.list.querySelector('.e-list-parent')) {
+                        this.list.appendChild(this.createElement('div', {
+                            className: 'e-virtual-ddl-content',
+                            styles: this.getTransformValues()
+                        })).appendChild(this.list.querySelector('.e-list-parent'));
+                    }
+                    else if (this.list.querySelector('.e-virtual-ddl-content')) {
+                        // 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.mode !== 'CheckBox') {
+                        this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+                    }
+                    if (!this.list.querySelector('.e-virtual-ddl')) {
+                        var virualElement = this.createElement('div', {
+                            id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                        });
+                        this.popupWrapper.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();
+                    }
+                }
                 if (this.footerTemplate) {
                     this.setFooterTemplate();
                     overAllHeight -= this.footer.offsetHeight;
@@ -13229,21 +14187,41 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         }
                         _this.popupObj.wireScrollEvents();
                         if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
-                            _this.targetElement().trim() !== '')) {
+                            _this.targetElement().trim() !== '') && !_this.enableVirtualization) {
                             _this.loadTemplate();
+                            if (_this.enableVirtualization && _this.mode === 'CheckBox') {
+                                _this.UpdateSkeleton();
+                            }
                         }
+                        _this.isPreventScrollAction = true;
                         _this.setScrollPosition();
                         if (_this.allowFiltering) {
                             _this.notify('inputFocus', {
                                 module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus'
                             });
                         }
+                        if (_this.enableVirtualization) {
+                            _this.notify("bindScrollEvent", {
+                                module: "VirtualScroll",
+                                component: _this.getModuleName(),
+                                enable: _this.enableVirtualization,
+                            });
+                            setTimeout(function () {
+                                if (_this.value) {
+                                    _this.updateSelectionList();
+                                }
+                                else if (_this.viewPortInfo && _this.viewPortInfo.offsets.top) {
+                                    _this.list.scrollTop = _this.viewPortInfo.offsets.top;
+                                }
+                            }, 5);
+                        }
                     }, targetExitViewport: function () {
                         if (!Browser.isDevice) {
                             _this.hidePopup();
                         }
                     }
                 });
+                this.popupContentElement = this.popupObj.element.querySelector('.e-content');
                 if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
                     this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                 }
@@ -13301,6 +14279,53 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         append([this.footer], this.popupWrapper);
         EventHandler.add(this.footer, 'mousedown', this.onListMouseDown, this);
     };
+    MultiSelect.prototype.updateInitialData = function () {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        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,
+        };
+        this.previousStartIndex = 0;
+        this.previousEndIndex = 0;
+        if (this.dataSource instanceof DataManager) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = this.dataCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        }
+        if (this.mode !== 'CheckBox') {
+            this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+        }
+        this.getSkeletonCount();
+        this.UpdateSkeleton();
+        // 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();
+        }
+        else if (!this.list.querySelector('.e-virtual-ddl') && this.skeletonCount > 0) {
+            var virualElement = this.createElement('div', {
+                id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+            });
+            this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
+        }
+        this.listData = 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();
+        }
+    };
     MultiSelect.prototype.clearAll = function (e) {
         if (this.enabled && !this.readonly) {
             var temp = void 0;
@@ -13321,6 +14346,24 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             else {
                 this.clearAllCallback(e);
             }
+            this.checkAndResetCache();
+            if (this.enableVirtualization) {
+                this.updateInitialData();
+                if (this.chipCollectionWrapper) {
+                    this.chipCollectionWrapper.innerHTML = '';
+                }
+                if (!this.isCustomDataUpdated) {
+                    this.notify("setGeneratedData", {
+                        module: "VirtualScroll",
+                    });
+                }
+            }
+            if (this.enableVirtualization) {
+                this.list.scrollTop = 0;
+                this.virtualListInfo = null;
+                this.previousStartIndex = 0;
+                this.previousEndIndex = 0;
+            }
         }
     };
     MultiSelect.prototype.clearAllCallback = function (e, isClearAll) {
@@ -13421,6 +14464,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.search = function (e) {
         var _this = this;
         this.resetFilteredData = true;
+        this.preventSetCurrentData = false;
+        this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         if (!isNullOrUndefined(e)) {
             this.keyCode = e.keyCode;
         }
@@ -13437,6 +14482,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 if (this.allowCustomValue) {
                     this.isRemoteSelection = true;
                 }
+                if (!this.backCommand) {
+                    this.checkAndResetCache();
+                }
                 var eventArgs_1 = {
                     preventDefaultAction: false,
                     text: this.targetElement(),
@@ -13463,12 +14511,83 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             else if (this.allowCustomValue) {
                 var query = new Query();
                 query = this.allowFiltering && (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;
-                this.dataUpdater(this.mainData, query, this.fields);
+                if (this.enableVirtualization) {
+                    if (this.dataSource instanceof DataManager) {
+                        this.dataUpdater(this.virtualGroupDataSource, query, this.fields);
+                    }
+                    else {
+                        this.dataUpdater(this.dataSource, query, this.fields);
+                    }
+                }
+                else {
+                    this.dataUpdater(this.mainData, query, this.fields);
+                }
+                this.UpdateSkeleton();
             }
             else {
                 var liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');
+                var type = this.typeOfData(this.listData).typeof;
                 var activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);
-                if (activeElement && activeElement.item !== null) {
+                if (this.enableVirtualization && this.targetElement().trim() !== '' && !this.allowFiltering) {
+                    var updatingincrementalindex = false;
+                    if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {
+                        updatingincrementalindex = true;
+                        this.incrementalStartIndex = 0;
+                        this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                        this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                        updatingincrementalindex = false;
+                    }
+                    if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                        this.updateIncrementalView(0, this.itemCount);
+                    }
+                    activeElement = Search(this.targetElement(), this.incrementalLiCollections, this.filterType, true, this.listData, this.fields, type);
+                    while (isNullOrUndefined(activeElement) && this.incrementalEndIndex < this.totalItemCount) {
+                        this.incrementalStartIndex = this.incrementalEndIndex;
+                        this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                        this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                        updatingincrementalindex = true;
+                        if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                            this.updateIncrementalView(0, this.itemCount);
+                        }
+                        activeElement = Search(this.targetElement(), this.incrementalLiCollections, this.filterType, true, this.listData, this.fields, type);
+                        if (!isNullOrUndefined(activeElement)) {
+                            break;
+                        }
+                        if (isNullOrUndefined(activeElement) && this.incrementalEndIndex >= this.totalItemCount) {
+                            this.incrementalStartIndex = 0;
+                            this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                            break;
+                        }
+                    }
+                    if (activeElement.index) {
+                        if ((!(this.viewPortInfo.startIndex >= activeElement.index)) || (!(activeElement.index >= this.viewPortInfo.endIndex))) {
+                            var startIndex = activeElement.index - ((this.itemCount / 2) - 2) > 0 ? activeElement.index - ((this.itemCount / 2) - 2) : 0;
+                            var endIndex = startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : startIndex + this.itemCount;
+                            if (startIndex != this.viewPortInfo.startIndex) {
+                                this.updateIncrementalView(startIndex, endIndex);
+                            }
+                        }
+                    }
+                    if (!isNullOrUndefined(activeElement.item)) {
+                        var index_1 = this.getIndexByValue(activeElement.item.getAttribute('data-value')) - this.skeletonCount;
+                        if (index_1 > this.itemCount / 2) {
+                            var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;
+                            var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                            this.updateIncrementalView(startIndex, endIndex);
+                        }
+                        activeElement.item = this.getElementByValue(activeElement.item.getAttribute('data-value'));
+                    }
+                    else {
+                        this.updateIncrementalView(0, this.itemCount);
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                        this.list.scrollTop = 0;
+                    }
+                    if (activeElement && activeElement.item) {
+                        activeElement.item = this.getElementByValue(activeElement.item.getAttribute('data-value'));
+                    }
+                }
+                if (activeElement && activeElement.item) {
                     this.addListFocus(activeElement.item);
                     this.list.scrollTop =
                         activeElement.item.offsetHeight * activeElement.index;
@@ -13481,11 +14600,15 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        if (this.enableVirtualization && this.allowFiltering) {
+            this.getFilteringSkeletonCount();
+        }
     };
     MultiSelect.prototype.preRender = function () {
         if (this.allowFiltering === null) {
             this.allowFiltering = (this.mode === 'CheckBox') ? true : false;
         }
+        this.preventSetCurrentData = false;
         this.initializeData();
         this.updateDataAttribute(this.htmlAttributes);
         _super.prototype.preRender.call(this);
@@ -13507,6 +14630,14 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         this.isCustomRendered = false;
         this.isRemoteSelection = false;
         this.isSelectAllTarget = true;
+        this.viewPortInfo = {
+            currentPageNumber: null,
+            direction: null,
+            sentinelInfo: {},
+            offsets: {},
+            startIndex: 0,
+            endIndex: this.itemCount,
+        };
     };
     MultiSelect.prototype.updateData = function (delimiterChar, e) {
         var data = '';
@@ -13514,7 +14645,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var text = [];
         var temp;
         var tempData = this.listData;
-        this.listData = this.mainData;
+        if (!this.enableVirtualization) {
+            this.listData = this.mainData;
+        }
         if (!isNullOrUndefined(this.hiddenElement)) {
             this.hiddenElement.innerHTML = '';
         }
@@ -13522,16 +14655,32 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             var valueLength = this.value.length;
             var hiddenElementContent = '';
             for (var index = 0; index < valueLength; index++) {
-                var valueItem = this.value[index];
+                var valueItem = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[index]) : this.value[index];
                 var listValue = this.findListElement((!isNullOrUndefined(this.mainList) ? this.mainList : this.ulElement), 'li', 'data-value', valueItem);
-                if (isNullOrUndefined(listValue) && !this.allowCustomValue) {
+                if (this.enableVirtualization) {
+                    listValue = this.findListElement((!isNullOrUndefined(this.list) ? this.list : this.ulElement), 'li', 'data-value', valueItem);
+                }
+                if (isNullOrUndefined(listValue) && !this.allowCustomValue && !this.enableVirtualization) {
                     this.value.splice(index, 1);
                     index -= 1;
                     valueLength -= 1;
                 }
                 else {
                     if (this.listData) {
-                        temp = this.getTextByValue(valueItem);
+                        if (this.enableVirtualization) {
+                            if (delim) {
+                                data = this.delimiterWrapper && this.delimiterWrapper.innerHTML == "" ? data : this.delimiterWrapper.innerHTML;
+                            }
+                            var value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+                            temp = this.getTextByValue(value);
+                            var textValues = this.text != null && this.text != "" ? this.text + ',' + temp : temp;
+                            data += temp + delimiterChar + ' ';
+                            text.push(textValues);
+                            break;
+                        }
+                        else {
+                            temp = this.getTextByValue(valueItem);
+                        }
                     }
                     else {
                         temp = valueItem;
@@ -13545,7 +14694,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 this.hiddenElement.innerHTML = hiddenElementContent;
             }
         }
-        this.setProperties({ text: text.toString() }, true);
+        var isChipRemove = e && e.target && e.target.classList.contains('e-chips-close');
+        if (!this.enableVirtualization || (this.enableVirtualization && this.mode !== 'CheckBox' && !isChipRemove)) {
+            this.setProperties({ text: text.toString() }, true);
+        }
         if (delim) {
             this.updateWrapperText(this.delimiterWrapper, data);
             this.delimiterWrapper.setAttribute('id', getUniqueID('delim_val'));
@@ -13574,7 +14726,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (textVal && textVal.length) {
-                this.setProperties({ value: textVal }, true);
+                var value = this.allowObjectBinding ? this.getDataByValue(textVal) : textVal;
+                this.setProperties({ value: value }, true);
             }
         }
         else {
@@ -13587,10 +14740,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             isEmptyData = true;
         }
         _super.prototype.render.call(this, null, 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();
     };
-    MultiSelect.prototype.initialValueUpdate = function () {
+    MultiSelect.prototype.initialValueUpdate = function (listItems) {
         if (this.list) {
             var text = void 0;
             var element = void 0;
@@ -13601,12 +14756,34 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.removeListSelection();
             if (!isNullOrUndefined(this.value)) {
                 for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
-                    value = this.value[index];
+                    value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
                     element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
-                    text = this.getTextByValue(value);
-                    if ((element && (element.getAttribute('aria-selected') !== 'true')) ||
+                    var isCustomData = false;
+                    if (this.enableVirtualization) {
+                        text = null;
+                        if (listItems != null && listItems.length > 0) {
+                            for (var i = 0; i < listItems.length; i++) {
+                                if (getValue((this.fields.value ? this.fields.value : 'value'), listItems[i]) === value) {
+                                    text = getValue(this.fields.text, listItems[i]);
+                                    break;
+                                }
+                            }
+                        }
+                        if (isNullOrUndefined(text) && this.allowCustomValue) {
+                            text = this.getTextByValue(value);
+                            isCustomData = true;
+                        }
+                    }
+                    else {
+                        text = this.getTextByValue(value);
+                    }
+                    if (((element && (element.getAttribute('aria-selected') !== 'true')) ||
                         (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&
-                            (this.mode === 'Box' || this.mode === 'Default'))) {
+                            (this.mode === 'Box' || this.mode === 'Default'))) || (this.enableVirtualization && value != null && text != null && !isCustomData)) {
+                        var currentText = [];
+                        var textValues = this.text != null ? this.text + ',' + text : text;
+                        currentText.push(textValues);
+                        this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
                         this.addListSelection(element);
                     }
@@ -13617,12 +14794,24 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         setValue(this.fields.value, value, newValue);
                         var noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);
                         this.addItem(newValue, indexItem);
+                        if (this.enableVirtualization) {
+                            if (this.virtualCustomSelectData && this.virtualCustomSelectData.length >= 0) {
+                                this.virtualCustomSelectData.push(newValue);
+                            }
+                            else {
+                                this.virtualCustomSelectData = [newValue];
+                            }
+                        }
                         element = element ? element : this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
                         if (this.popupWrapper.contains(noDataEle)) {
                             this.list.setAttribute('style', noDataEle.getAttribute('style'));
                             this.popupWrapper.replaceChild(this.list, noDataEle);
                             this.wireListEvents();
                         }
+                        var currentText = [];
+                        var textValues = this.text != null ? this.text + ',' + text : text;
+                        currentText.push(textValues);
+                        this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
                         this.addListSelection(element);
                     }
@@ -13652,7 +14841,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     MultiSelect.prototype.updateActionCompleteData = function (li, item) {
-        if (this.value && this.value.indexOf(li.getAttribute('data-value')) > -1) {
+        if (this.value && ((!this.allowObjectBinding && this.value.indexOf(li.getAttribute('data-value')) > -1) || (this.allowObjectBinding && this.isObjectInArray(this.getDataByValue(li.getAttribute('data-value')), this.value)))) {
             this.mainList = this.ulElement;
             if (this.hideSelectedItem) {
                 addClass([li], HIDE_LIST);
@@ -13690,13 +14879,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.updateListSelection = function (li, e, length) {
         var customVal = li.getAttribute('data-value');
-        var value = this.getFormattedValue(customVal);
+        var value = this.allowObjectBinding ? this.getDataByValue(customVal) : this.getFormattedValue(customVal);
         if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||
             (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {
             value = customVal;
         }
         this.removeHover();
-        if (!this.value || this.value.indexOf(value) === -1) {
+        if (!this.value || ((!this.allowObjectBinding && this.value.indexOf(value) === -1) || (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) === -1))) {
             this.dispatchSelect(value, e, li, (li.getAttribute('aria-selected') === 'true'), length);
         }
         else {
@@ -13705,9 +14894,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.updateListSelectEventCallback = function (value, li, e) {
         var _this = this;
+        value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
         var text = this.getTextByValue(value);
-        if ((this.allowCustomValue || this.allowFiltering) && !this.findListElement(this.mainList, 'li', 'data-value', value)) {
-            var temp_1 = li.cloneNode(true);
+        if ((this.allowCustomValue || this.allowFiltering) && !this.findListElement(this.mainList, 'li', 'data-value', value) && (!this.enableVirtualization || (this.enableVirtualization && this.virtualCustomData))) {
+            var temp_1 = li ? li.cloneNode(true) : li;
             var fieldValue = this.fields.value ? this.fields.value : 'value';
             if (this.allowCustomValue && this.mainData.length && typeof getValue(fieldValue, this.mainData[0]) === 'number') {
                 value = !isNaN(parseFloat(value.toString())) ? parseFloat(value.toString()) : value;
@@ -13719,10 +14909,22 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             };
             this.trigger('customValueSelection', eventArgs, function (eventArgs) {
                 if (!eventArgs.cancel) {
-                    append([temp_1], _this.mainList);
-                    _this.mainData.push(data_1);
-                    _this.remoteCustomValue = false;
-                    _this.addValue(value, text, e);
+                    if (_this.enableVirtualization && _this.virtualCustomData) {
+                        if (_this.virtualCustomSelectData && _this.virtualCustomSelectData.length >= 0) {
+                            _this.virtualCustomSelectData.push(data_1);
+                        }
+                        else {
+                            _this.virtualCustomSelectData = [data_1];
+                        }
+                        _this.remoteCustomValue = false;
+                        _this.addValue(value, text, e);
+                    }
+                    else {
+                        append([temp_1], _this.mainList);
+                        _this.mainData.push(data_1);
+                        _this.remoteCustomValue = false;
+                        _this.addValue(value, text, e);
+                    }
                 }
             });
         }
@@ -13832,8 +15034,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var _this = this;
         this.keyCode = null;
         this.scrollFocusStatus = false;
+        this.keyboardEvent = null;
         var target = e.target;
         var li = closest(target, '.' + dropDownBaseClasses.li);
+        if (this.enableVirtualization && li && li.classList.contains('e-virtual-list')) {
+            return;
+        }
         var headerLi = closest(target, '.' + dropDownBaseClasses.group);
         if (headerLi && this.enableGroupCheckBox && this.mode === 'CheckBox' && this.fields.groupBy) {
             target = target.classList.contains('e-list-group-item') ? target.firstElementChild.lastElementChild
@@ -13910,6 +15116,39 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             else {
                 e.preventDefault();
             }
+            if (this.enableVirtualization && this.hideSelectedItem) {
+                var visibleListElements = this.list.querySelectorAll('li.'
+                    + dropDownBaseClasses.li
+                    + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list)');
+                if (visibleListElements.length) {
+                    var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
+                    if (visibleListElements.length < (actualCount + 2)) {
+                        var query = this.getForQuery(this.value).clone();
+                        query = query.skip(this.virtualItemStartIndex);
+                        this.resetList(this.dataSource, this.fields, query);
+                        this.UpdateSkeleton();
+                        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                        this.virtualItemCount = this.itemCount;
+                        if (this.mode !== 'CheckBox') {
+                            this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+                        }
+                        if (!this.list.querySelector('.e-virtual-ddl')) {
+                            var virualElement = this.createElement('div', {
+                                id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
+                            });
+                            this.popupWrapper.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();
+                        }
+                        if (this.list.querySelector('.e-virtual-ddl-content')) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                        }
+                    }
+                }
+            }
             this.refreshPlaceHolder();
             this.deselectHeader();
         }
@@ -14147,7 +15386,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             var remaining = void 0;
             var downIconWidth = 0;
             var overAllContainer = void 0;
-            this.updateWrapperText(this.viewWrapper, data);
+            if (!this.enableVirtualization) {
+                this.updateWrapperText(this.viewWrapper, data);
+            }
             var l10nLocale = {
                 noRecordsTemplate: 'No records found',
                 actionFailureTemplate: 'Request failed',
@@ -14178,11 +15419,21 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.checkClearIconWidth();
             if (!isNullOrUndefined(this.value)) {
                 for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
-                    data += (index === 0) ? '' : this.delimiterChar + ' ';
-                    temp = this.getOverflowVal(index);
-                    data += temp;
-                    temp = this.viewWrapper.innerHTML;
-                    this.updateWrapperText(this.viewWrapper, data);
+                    var items = this.text && this.text.split(this.delimiterChar);
+                    if (!this.enableVirtualization) {
+                        data += (index === 0) ? '' : this.delimiterChar + ' ';
+                        temp = this.getOverflowVal(index);
+                        data += temp;
+                        temp = this.viewWrapper.innerHTML;
+                        this.updateWrapperText(this.viewWrapper, data);
+                    }
+                    else if (items) {
+                        data += (index === 0) ? '' : this.delimiterChar + ' ';
+                        temp = items[index];
+                        data += temp;
+                        temp = this.viewWrapper.innerHTML;
+                        this.updateWrapperText(this.viewWrapper, data);
+                    }
                     wrapperleng = this.viewWrapper.offsetWidth +
                         parseInt(window.getComputedStyle(this.viewWrapper).paddingRight, 10);
                     overAllContainer = this.componentWrapper.offsetWidth -
@@ -14285,18 +15536,19 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.getOverflowVal = function (index) {
         var temp;
         if (this.mainData && this.mainData.length) {
+            var value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
             if (this.mode === 'CheckBox') {
                 var newTemp = this.listData;
                 this.listData = this.mainData;
-                temp = this.getTextByValue(this.value[index]);
+                temp = this.getTextByValue(value);
                 this.listData = newTemp;
             }
             else {
-                temp = this.getTextByValue(this.value[index]);
+                temp = this.getTextByValue(value);
             }
         }
         else {
-            temp = this.value[index];
+            temp = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
         }
         return temp;
     };
@@ -14414,8 +15666,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             preventSelectEvent: false
         };
         this.trigger('beforeSelectAll', beforeSelectArgs);
-        if (li && li.length) {
-            var index_1 = 0;
+        if ((li && li.length) || (this.enableVirtualization && !state)) {
+            var index_2 = 0;
             var count_1 = 0;
             if (this.enableGroupCheckBox) {
                 count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;
@@ -14424,62 +15676,153 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;
             }
             if (!beforeSelectArgs.preventSelectEvent) {
-                this.isSelectAllTarget = (length === index_1 + 1);
-                while (index_1 < length && index_1 <= 50 && index_1 < count_1) {
-                    this.updateListSelection(li[index_1], event, length - index_1);
-                    if (this.enableGroupCheckBox) {
-                        this.findGroupStart(li[index_1]);
-                    }
-                    index_1++;
-                }
-                if (length > 50) {
-                    setTimeout(function () {
-                        while (index_1 < length && index_1 < count_1) {
-                            _this.isSelectAllTarget = (length === index_1 + 1);
-                            _this.updateListSelection(li[index_1], event, length - index_1);
-                            if (_this.enableGroupCheckBox) {
-                                _this.findGroupStart(li[index_1]);
+                if (this.enableVirtualization) {
+                    if (state) {
+                        this.virtualSelectAll = true;
+                        this.resetList(this.dataSource, this.fields, new Query().skip(this.viewPortInfo.startIndex));
+                        if (this.virtualSelectAllData instanceof Array) {
+                            for (var i = 0; i < this.virtualSelectAllData.length; i++) {
+                                if (li[this.skeletonCount + i]) {
+                                    var value_2 = this.allowObjectBinding ? this.getDataByValue(li[this.skeletonCount + i].getAttribute('data-value')) : this.getFormattedValue(li[this.skeletonCount + i].getAttribute('data-value'));
+                                    if (((!this.allowObjectBinding && this.value && this.value.indexOf(value_2) === 1) || (this.allowObjectBinding && this.indexOfObjectInArray(value_2, this.value) === 1))) {
+                                        continue;
+                                    }
+                                    this.updateListSelection(li[this.skeletonCount + i], event, length - i);
+                                }
+                                else {
+                                    if (this.fields) {
+                                        var value_3 = getValue(this.fields.value, this.virtualSelectAllData[i]);
+                                        value_3 = this.allowObjectBinding ? this.getDataByValue(value_3) : value_3;
+                                        if (((!this.allowObjectBinding && this.value && this.value.indexOf(value_3) === 1) || (this.allowObjectBinding && this.indexOfObjectInArray(value_3, this.value) === 1))) {
+                                            continue;
+                                        }
+                                        if (this.value && value_3 != null && Array.isArray(this.value) && ((!this.allowObjectBinding && this.value.indexOf(value_3) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value_3, this.value)))) {
+                                            this.dispatchSelect(value_3, event, null, false, length);
+                                        }
+                                    }
+                                }
+                            }
+                            if (this.virtualSelectAllData && this.value.length != this.virtualSelectAllData.length && this.virtualItemStartIndex != 0) {
+                                if (this.virtualItemStartIndex > this.itemCount) {
+                                    for (var i = 0; i < this.itemCount; i++) {
+                                        if (this.fields) {
+                                            var value_4 = getValue(this.fields.value, this.virtualSelectAllData[i]);
+                                            value_4 = this.allowObjectBinding ? this.getDataByValue(value_4) : value_4;
+                                            if (this.value && value_4 != null && Array.isArray(this.value) && ((!this.allowObjectBinding && this.value.indexOf(value_4) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value_4, this.value)))) {
+                                                this.setProperties({ value: [].concat([], this.value, this.allowObjectBinding ? [this.virtualSelectAllData[i]] : [value_4]) }, true);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                            else {
+                                for (var i = 0; i < this.virtualItemStartIndex; i++) {
+                                    if (this.fields) {
+                                        var value = getValue(this.fields.value, this.virtualSelectAllData[i]);
+                                        value = this.allowObjectBinding ? this.getDataByValue(value) : value;
+                                        if (Array.isArray(this.value) && ((!this.allowObjectBinding && this.value.indexOf(value) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value, this.value)))) {
+                                            this.setProperties({ value: [].concat([], this.value, this.allowObjectBinding ? [this.virtualSelectAllData[i]] : [value]) }, true);
+                                        }
+                                    }
+                                }
                             }
-                            index_1++;
                         }
-                        _this.updatedataValueItems(event);
-                        if (!_this.changeOnBlur) {
-                            _this.updateValueState(event, _this.value, _this.tempValues);
-                            _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
+                    }
+                    else {
+                        while (index_2 < this.value.length && index_2 <= 50 && index_2 < count_1 && this.value.length > 0) {
+                            this.removeValue(this.value[index_2], event, this.value.length - index_2);
+                            index_2++;
                         }
-                        _this.updateHiddenElement();
-                        if (_this.popupWrapper && li[index_1 - 1].classList.contains('e-item-focus')) {
-                            var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-                            if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
-                                li[index_1 - 1].classList.remove('e-item-focus');
-                            }
+                        if (length > 50) {
+                            setTimeout(function () {
+                                while (index_2 < _this.value.length && index_2 < count_1 && _this.value.length > 0) {
+                                    _this.removeValue(value[index_2], event, _this.value.length - index_2);
+                                    index_2++;
+                                }
+                                _this.updatedataValueItems(event);
+                                if (!_this.changeOnBlur) {
+                                    _this.updateValueState(event, _this.value, _this.tempValues);
+                                    _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
+                                }
+                                _this.updateHiddenElement();
+                            }, 0);
+                        }
+                        this.value = [];
+                        this.virtualSelectAll = false;
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        var ulElement = this.renderItems(this.listData, this.fields);
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var virtualTrackElement = this.list.getElementsByClassName('e-virtual-ddl')[0];
+                    if (virtualTrackElement) {
+                        (virtualTrackElement).style = this.GetVirtualTrackHeight();
+                    }
+                    this.UpdateSkeleton();
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var virtualContentElement = this.list.getElementsByClassName('e-virtual-ddl-content')[0];
+                    if (virtualContentElement) {
+                        (virtualContentElement).style = this.getTransformValues();
+                    }
+                }
+                else {
+                    while (index_2 < length && index_2 <= 50 && index_2 < count_1) {
+                        this.isSelectAllTarget = (length === index_2 + 1);
+                        this.updateListSelection(li[index_2], event, length - index_2);
+                        if (this.enableGroupCheckBox) {
+                            this.findGroupStart(li[index_2]);
                         }
-                    }, 0);
+                        index_2++;
+                    }
+                    if (length > 50) {
+                        setTimeout(function () {
+                            while (index_2 < length && index_2 < count_1) {
+                                _this.isSelectAllTarget = (length === index_2 + 1);
+                                _this.updateListSelection(li[index_2], event, length - index_2);
+                                if (_this.enableGroupCheckBox) {
+                                    _this.findGroupStart(li[index_2]);
+                                }
+                                index_2++;
+                            }
+                            _this.updatedataValueItems(event);
+                            if (!_this.changeOnBlur) {
+                                _this.updateValueState(event, _this.value, _this.tempValues);
+                                _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
+                            }
+                            _this.updateHiddenElement();
+                            if (_this.popupWrapper && li[index_2 - 1].classList.contains('e-item-focus')) {
+                                var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+                                if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                                    li[index_2 - 1].classList.remove('e-item-focus');
+                                }
+                            }
+                        }, 0);
+                    }
                 }
             }
             else {
-                for (var i = 0; i < li.length && i < count_1; i++) {
+                for (var i_1 = 0; i_1 < li.length && i_1 < count_1; i_1++) {
                     this.removeHover();
-                    var customVal = li[i].getAttribute('data-value');
-                    var value = this.getFormattedValue(customVal);
+                    var customVal = li[i_1].getAttribute('data-value');
+                    var value_5 = this.getFormattedValue(customVal);
+                    value_5 = this.allowObjectBinding ? this.getDataByValue(value_5) : value_5;
                     var mainElement = this.mainList ? this.mainList.querySelectorAll(state ?
                         'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide)' :
-                        'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)')[i] : null;
+                        'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)')[i_1] : null;
                     if (state) {
                         this.value = !this.value ? [] : this.value;
-                        if (this.value.indexOf(value) < 0) {
-                            this.setProperties({ value: [].concat([], this.value, [value]) }, true);
+                        if ((!this.allowObjectBinding && this.value.indexOf(value_5) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value_5, this.value))) {
+                            this.setProperties({ value: [].concat([], this.value, [value_5]) }, true);
                         }
                         this.removeFocus();
-                        this.addListSelection(li[i], mainElement);
+                        this.addListSelection(li[i_1], mainElement);
                         this.updateChipStatus();
                         this.checkMaxSelection();
                     }
                     else {
-                        this.removeAllItems(value, event, false, li[i], mainElement);
+                        this.removeAllItems(value_5, event, false, li[i_1], mainElement);
                     }
                     if (this.enableGroupCheckBox) {
-                        this.findGroupStart(li[i]);
+                        this.findGroupStart(li[i_1]);
                     }
                 }
                 if (!state) {
@@ -14613,6 +15956,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
             this.selectAllItem(state, event);
         }
+        this.virtualSelectAll = false;
     };
     /**
      * Get the properties to be maintained in the persisted state.
@@ -14780,12 +16124,31 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         this.renderPopup();
     };
+    MultiSelect.prototype.totalItemsCount = function () {
+        var dataSourceCount;
+        if (this.dataSource instanceof DataManager) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            dataSourceCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        }
+        if (this.mode === 'CheckBox') {
+            this.totalItemCount = dataSourceCount != 0 ? dataSourceCount : this.totalItemCount;
+        }
+        else {
+            this.totalItemCount = dataSourceCount != 0 ? dataSourceCount - this.value.length : this.totalItemCount;
+        }
+    };
     MultiSelect.prototype.presentItemValue = function (ulElement) {
         var valuecheck = [];
         for (var i = 0; i < this.value.length; i++) {
-            var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', this.value[i]);
+            var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[i]) : this.value[i];
+            var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', value);
             if (!checkEle) {
-                valuecheck.push(this.value[i]);
+                var checkvalue = this.allowObjectBinding ? this.getDataByValue(this.value[i]) : this.value[i];
+                valuecheck.push(checkvalue);
             }
         }
         return valuecheck;
@@ -14898,6 +16261,31 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     if (_this.mode === 'CheckBox' && _this.showSelectAll) {
                         EventHandler.remove(_this.popupObj.element, 'click', _this.clickHandler);
                     }
+                    if (_this.enableVirtualization && _this.mode === 'CheckBox') {
+                        _this.viewPortInfo.startIndex = _this.virtualItemStartIndex = 0;
+                        _this.viewPortInfo.endIndex = _this.virtualItemEndIndex = _this.viewPortInfo.startIndex > 0 ? _this.viewPortInfo.endIndex : _this.itemCount;
+                        _this.previousStartIndex = 0;
+                        _this.previousEndIndex = 0;
+                    }
+                    var dataSourceCount = void 0;
+                    if (_this.dataSource instanceof DataManager) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        dataSourceCount = _this.virtualGroupDataSource && _this.virtualGroupDataSource.length ? _this.virtualGroupDataSource.length : 0;
+                    }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        dataSourceCount = _this.dataSource && _this.dataSource.length ? _this.dataSource.length : 0;
+                    }
+                    if (_this.enableVirtualization && (_this.allowFiltering || _this.allowCustomValue) && _this.value != null && _this.targetElement() && _this.totalItemCount !== dataSourceCount) {
+                        _this.updateInitialData();
+                        _this.checkAndResetCache();
+                    }
+                    if (_this.virtualCustomData && _this.viewPortInfo && _this.viewPortInfo.startIndex === 0 && _this.viewPortInfo.endIndex === _this.itemCount) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        _this.renderItems(_this.mainData, _this.fields);
+                    }
+                    _this.virtualCustomData = null;
+                    _this.isVirtualTrackHeight = false;
                 }
             });
         }
@@ -14912,6 +16300,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
+        this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         var args = { cancel: false };
         this.trigger('beforeOpen', args, function (args) {
             if (!args.cancel) {
@@ -14934,6 +16323,47 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     return;
                 }
                 _this.onPopupShown(e);
+                if (_this.enableVirtualization && _this.listData && _this.listData.length) {
+                    if (!isNullOrUndefined(_this.value) && (_this.getModuleName() === 'dropdownlist' || _this.getModuleName() === 'combobox')) {
+                        _this.removeHover();
+                    }
+                    if (!_this.beforePopupOpen) {
+                        if (_this.hideSelectedItem && _this.value && Array.isArray(_this.value) && _this.value.length > 0) {
+                            _this.totalItemsCount();
+                        }
+                        if (!_this.preventSetCurrentData && !isNullOrUndefined(_this.viewPortInfo.startIndex) && !isNullOrUndefined(_this.viewPortInfo.endIndex)) {
+                            _this.notify("setCurrentViewDataAsync", {
+                                component: _this.getModuleName(),
+                                module: "VirtualScroll",
+                            });
+                        }
+                    }
+                }
+                if (_this.enableVirtualization && !_this.allowFiltering && _this.selectedValueInfo != null && _this.selectedValueInfo.startIndex > 0 && _this.value != null) {
+                    _this.notify("dataProcessAsync", {
+                        module: "VirtualScroll",
+                        isOpen: true,
+                    });
+                }
+                if (_this.enableVirtualization) {
+                    _this.updatevirtualizationList();
+                }
+                else {
+                    if (_this.value && _this.value.length) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        var element = void 0;
+                        var listItems = _this.getItems();
+                        for (var _i = 0, _a = _this.value; _i < _a.length; _i++) {
+                            var value = _a[_i];
+                            var checkValue = _this.allowObjectBinding ? getValue((_this.fields.value) ? _this.fields.value : '', value) : value;
+                            element = _this.getElementByValue(checkValue);
+                            if (element) {
+                                _this.addListSelection(element);
+                            }
+                        }
+                    }
+                }
+                _this.preventSetCurrentData = true;
             }
         });
     };
@@ -15086,6 +16516,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         this.wireEvent();
         this.enable(this.enabled);
         this.enableRTL(this.enableRtl);
+        if (this.enableVirtualization) {
+            this.updateVirtualizationProperties(this.itemCount, this.allowFiltering, this.mode === 'CheckBox');
+        }
+        this.listItemHeight = this.getListHeight();
+        this.getSkeletonCount();
+        this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.viewPortInfo.startIndex > 0 ? this.viewPortInfo.endIndex : this.itemCount;
         this.checkInitialValue();
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
@@ -15097,6 +16534,22 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         this.renderComplete();
     };
+    MultiSelect.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;
+    };
     MultiSelect.prototype.checkInitialValue = function () {
         var _this = this;
         var isData = this.dataSource instanceof Array ? (this.dataSource.length > 0)
@@ -15113,7 +16566,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 var opt = optionsElement[index];
                 if (!isNullOrUndefined(opt.getAttribute('selected'))) {
                     if (opt.getAttribute('value')) {
-                        valueCol.push(opt.getAttribute('value'));
+                        var value = this.allowObjectBinding ? this.getDataByValue(opt.getAttribute('value')) : opt.getAttribute('value');
+                        valueCol.push(value);
                     }
                     else {
                         textCol += (opt.text + this.delimiterChar);
@@ -15140,14 +16594,40 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.initialTextUpdate();
         }
         if (this.value && this.value.length) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var listItems_2;
+            if (this.enableVirtualization) {
+                var fields = (this.fields.value) ? this.fields.value : '';
+                var predicate = void 0;
+                for (var i = 0; i < this.value.length; i++) {
+                    var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[i]) : this.value[i];
+                    if (i === 0) {
+                        predicate = new Predicate(fields, 'equal', value);
+                    }
+                    else {
+                        predicate = predicate.or(fields, 'equal', value);
+                    }
+                }
+                if (this.dataSource instanceof DataManager) {
+                    this.dataSource.executeQuery(new Query().where(predicate))
+                        .then(function (e) {
+                        if (e.result.result.length > 0) {
+                            listItems_2 = e.result.result;
+                        }
+                    });
+                }
+                else {
+                    listItems_2 = new DataManager(this.dataSource).executeLocal(new Query().where(predicate));
+                }
+            }
             if (!(this.dataSource instanceof DataManager)) {
-                this.initialValueUpdate();
+                this.initialValueUpdate(listItems_2);
                 this.initialUpdate();
             }
             else {
                 this.setInitialValue = function () {
                     _this.initStatus = false;
-                    _this.initialValueUpdate();
+                    _this.initialValueUpdate(listItems_2);
                     _this.initialUpdate();
                     _this.setInitialValue = null;
                     _this.initStatus = true;
@@ -15169,6 +16649,34 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             this.inputElement.focus();
         }
     };
+    MultiSelect.prototype.updatevirtualizationList = function () {
+        if (this.value && this.value.length) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var element = void 0;
+            var listItems = this.getItems();
+            for (var _i = 0, _a = this.value; _i < _a.length; _i++) {
+                var value = _a[_i];
+                var checkValue = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
+                element = this.getElementByValue(checkValue);
+                if (element) {
+                    this.addListSelection(element);
+                }
+            }
+            if (this.enableVirtualization && this.hideSelectedItem) {
+                var visibleListElements = this.list.querySelectorAll('li.'
+                    + dropDownBaseClasses.li
+                    + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list)');
+                if (visibleListElements.length) {
+                    var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
+                    if (visibleListElements.length < (actualCount + 2)) {
+                        var query = this.getForQuery(this.value).clone();
+                        query = query.skip(this.viewPortInfo.startIndex);
+                        this.resetList(this.dataSource, this.fields, query);
+                    }
+                }
+            }
+        }
+    };
     MultiSelect.prototype.setFloatLabelType = function () {
         removeFloating(this.overAllWrapper, this.componentWrapper, this.searchWrapper, this.inputElement, this.value, this.floatLabelType, this.placeholder);
         if (this.floatLabelType !== 'Never') {
@@ -15202,6 +16710,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (this.mode !== 'Box' && !(this.setDynValue && this.mode === 'Default' && this.inputFocus)) {
             this.updateDelimView();
         }
+        this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
+        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
         this.updateCssClass();
         this.updateHTMLAttribute();
         this.updateReadonly(this.readonly);
@@ -15298,6 +16808,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     __decorate$5([
         Property(true)
     ], MultiSelect.prototype, "enableHtmlSanitizer", void 0);
+    __decorate$5([
+        Property(false)
+    ], MultiSelect.prototype, "enableVirtualization", void 0);
     __decorate$5([
         Property([])
     ], MultiSelect.prototype, "dataSource", void 0);
@@ -15376,6 +16889,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     __decorate$5([
         Property(null)
     ], MultiSelect.prototype, "value", void 0);
+    __decorate$5([
+        Property(false)
+    ], MultiSelect.prototype, "allowObjectBinding", void 0);
     __decorate$5([
         Property(true)
     ], MultiSelect.prototype, "hideSelectedItem", void 0);
@@ -15606,7 +17122,7 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
                 }
                 EventHandler.add(this.checkAllParent, 'mousedown', this.clickHandler, this);
             }
-            if (this.parent.list.classList.contains('e-nodata') || (this.parent.listData && this.parent.listData.length <= 1 &&
+            if (this.parent.list.classList.contains('e-nodata') || (this.parent.listData && this.parent.listData.length <= 1 && !this.parent.enableVirtualization &&
                 !(this.parent.isDynamicDataChange)) || (this.parent.isDynamicDataChange &&
                 this.parent.listData && this.parent.listData.length <= 1)) {
                 this.checkAllParent.style.display = 'none';
@@ -15968,7 +17484,13 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
                 });
                 remLi = this.parent.ulElement.querySelectorAll('li.e-active');
                 addClass(remLi, 'e-reorder-hide');
-                prepend([ulEle_1], this.parent.list);
+                if (this.parent.enableVirtualization) {
+                    var virtualUlElement = this.parent.list.querySelector('.e-virtual-ddl-content');
+                    prepend([ulEle_1], virtualUlElement);
+                }
+                else {
+                    prepend([ulEle_1], this.parent.list);
+                }
             }
             this.parent.focusAtFirstListItem();
         }
@@ -16369,7 +17891,7 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.initWrapper();
-        this.setSelection();
+        this.setSelection(this.value, true, false, !this.isRendered);
         this.initDraggable();
         this.mainList = this.ulElement;
         if (this.initLoad) {
@@ -18032,11 +19554,12 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
             });
         }
     };
-    ListBox.prototype.setSelection = function (values, isSelect, isText) {
+    ListBox.prototype.setSelection = function (values, isSelect, isText, canFocus) {
         var _this = this;
         if (values === void 0) { values = this.value; }
         if (isSelect === void 0) { isSelect = true; }
         if (isText === void 0) { isText = false; }
+        if (canFocus === void 0) { canFocus = true; }
         var li;
         var liselect;
         if (values) {
@@ -18065,13 +19588,17 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                     if (!isSelect && liselect || isSelect && !liselect && li) {
                         if (_this.selectionSettings.showCheckbox) {
                             _this.notify('updatelist', { li: li, module: 'listbox' });
-                            li.focus();
+                            if (canFocus) {
+                                li.focus();
+                            }
                         }
                         else {
                             if (isSelect) {
                                 li.classList.add(cssClass.selected);
                                 li.setAttribute('aria-selected', 'true');
-                                li.focus();
+                                if (canFocus) {
+                                    li.focus();
+                                }
                             }
                             else {
                                 li.classList.remove(cssClass.selected);
@@ -18573,6 +20100,8 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         this.isPopupOpen = false;
         this.isCollided = false;
         this.lineBreak = false;
+        this.isRTE = false;
+        this.keyEventName = 'mousedown';
     };
     /**
      * Execute before render the list items
@@ -18618,7 +20147,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
     };
     Mention.prototype.bindCommonEvent = function () {
         if (!Browser.isDevice) {
-            this.inputElement.addEventListener('keydown', this.keyDownHandler.bind(this), true);
+            this.inputElement.addEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
         }
     };
     /**
@@ -18648,6 +20177,10 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 return parentElement.querySelector('.e-content');
             }
         }
+        if (targetElement && targetElement.parentElement && targetElement.parentElement.classList.contains('e-rte-content')) {
+            this.isRTE = true;
+            this.keyEventName = 'click';
+        }
         return targetElement;
     };
     /**
@@ -18789,7 +20322,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
     };
     Mention.prototype.unBindCommonEvent = function () {
         if (!Browser.isDevice) {
-            this.inputElement.removeEventListener('keydown', this.keyDownHandler.bind(this), true);
+            this.inputElement.removeEventListener('keydown', this.keyDownHandler.bind(this), !this.isRTE);
         }
     };
     Mention.prototype.onKeyUp = function (e) {
@@ -18800,7 +20333,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         }
         this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
         var isRteImage = document.activeElement.parentElement && document.activeElement.parentElement.querySelector('.e-rte-image') ? true : false;
-        if (document.activeElement != this.inputElement && !isRteImage) {
+        if (document.activeElement != this.inputElement && isRteImage) {
             this.inputElement.focus();
         }
         if (this.isContentEditable(this.inputElement)) {
@@ -18826,9 +20359,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&
                 (rangetextContent.length === 1 || rangetextContent[rangetextContent.length - 2].indexOf('') === -1 ||
                     this.range.startContainer.nodeType === 1))) {
-            if (this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
+            if (this.isPopupOpen && this.allowSpaces && currentRange && currentRange.trim() !== '' && charRegex.test(currentRange) && currentRange.indexOf(this.mentionChar) !== -1
                 && !this.isMatchedText() && (currentRange.length > 1 && currentRange.replace(/\u00A0/g, ' ').charAt(currentRange.length - 2) !== ' ') &&
-                (this.list && this.list.querySelectorAll('ul').length > 0)) {
+                (this.list && this.list.querySelectorAll('ul').length > 0) && e.code !== 'Enter') {
                 this.queryString = currentRange.substring(currentRange.lastIndexOf(this.mentionChar) + 1).replace('\u00a0', ' ');
                 this.searchLists(e);
             }
@@ -19334,6 +20867,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             this.popupObj.element.removeAttribute('style');
             this.popupObj.element.removeAttribute('aria-disabled');
         }
+        if (this.list.classList.contains('e-nodata')) {
+            this.list = null;
+        }
     };
     Mention.prototype.onDocumentClick = function (e) {
         var target = e.target;
@@ -19444,6 +20980,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         return coordinates;
     };
     Mention.prototype.initValue = function () {
+        this.isDataFetched = false;
         this.renderList();
         if (this.dataSource instanceof DataManager) {
             this.initRemoteRender = true;
@@ -19469,7 +21006,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.wireListEvents = function () {
-        EventHandler.add(this.list, 'mousedown', this.onMouseClick, this);
+        EventHandler.add(this.list, this.keyEventName, this.onMouseClick, this);
         EventHandler.add(this.list, 'mouseover', this.onMouseOver, this);
         EventHandler.add(this.list, 'mouseout', this.onMouseLeave, this);
     };
@@ -19479,7 +21016,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     Mention.prototype.unWireListEvents = function () {
-        EventHandler.remove(this.list, 'mousedown', this.onMouseClick);
+        EventHandler.remove(this.list, this.keyEventName, this.onMouseClick);
         EventHandler.remove(this.list, 'mouseover', this.onMouseOver);
         EventHandler.remove(this.list, 'mouseout', this.onMouseLeave);
     };
@@ -19494,7 +21031,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         var delay = 100;
         this.closePopup(delay, e);
         this.inputElement.focus();
-        e.preventDefault();
+        if (!this.isRTE) {
+            e.preventDefault();
+        }
     };
     Mention.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {
         var _this = this;
@@ -19735,7 +21274,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             if (this.isPopupOpen) {
                 this.hidePopup();
             }
-            //New event to update the RichTextEditor value, when a mention item is selected using mouse click action. 
+            //New event to update the RichTextEditor value, when a mention item is selected using mouse click action.
             if (!isNullOrUndefined(e.pointerType) && e.pointerType === 'mouse') {
                 var event_1 = new CustomEvent('content-changed', { detail: { click: true } });
                 this.inputElement.dispatchEvent(event_1);