@syncfusion/ej2-dropdowns 24.2.8 → 25.1.35

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

@@ -28,7 +28,6 @@ import { Input } from '@syncfusion/ej2-inputs';
 import { incrementalSearch, resetIncrementalSearchValues } from '../common/incremental-search';
 import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-base';
 import { DataManager, Query, Predicate } from '@syncfusion/ej2-data';
-import { Skeleton } from '@syncfusion/ej2-notifications';
 [];
 // don't use space in classnames
 export var dropDownListClasses = {
@@ -87,53 +86,10 @@ var DropDownList = /** @class */ (function (_super) {
      */
     function DropDownList(options, element) {
         var _this = _super.call(this, options, element) || this;
-        _this.skeletonCount = 32;
         _this.isListSearched = false;
         _this.preventChange = false;
         _this.isAngular = false;
-        _this.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;
         };
@@ -160,7 +116,7 @@ var DropDownList = /** @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;
@@ -222,6 +178,11 @@ var DropDownList = /** @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();
     };
@@ -270,7 +231,7 @@ var DropDownList = /** @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);
@@ -451,7 +412,7 @@ var DropDownList = /** @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();
@@ -460,7 +421,8 @@ var DropDownList = /** @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);
@@ -685,23 +647,6 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.isValidLI = function (li) {
         return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');
     };
-    DropDownList.prototype.updateIncrementalInfo = function (startIndex, endIndex) {
-        this.viewPortInfo.startIndex = startIndex;
-        this.viewPortInfo.endIndex = endIndex;
-        this.updateVirtualItemIndex();
-        this.isIncrementalRequest = true;
-        this.resetList(this.dataSource, this.fields, this.query);
-        this.isIncrementalRequest = false;
-    };
-    DropDownList.prototype.updateIncrementalView = function (startIndex, endIndex) {
-        this.viewPortInfo.startIndex = startIndex;
-        this.viewPortInfo.endIndex = endIndex;
-        this.updateVirtualItemIndex();
-        this.resetList(this.dataSource, this.fields, this.query);
-        this.UpdateSkeleton();
-        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-        this.ulElement = this.list.querySelector('ul');
-    };
     DropDownList.prototype.updateIncrementalItemIndex = function (startIndex, endIndex) {
         this.incrementalStartIndex = startIndex;
         this.incrementalEndIndex = endIndex;
@@ -869,10 +814,12 @@ var DropDownList = /** @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) {
@@ -1031,7 +978,7 @@ var DropDownList = /** @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 });
             }
@@ -1041,11 +988,6 @@ var DropDownList = /** @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;
@@ -1194,6 +1136,10 @@ var DropDownList = /** @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];
         }
@@ -1358,7 +1304,7 @@ var DropDownList = /** @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;
@@ -1416,7 +1362,7 @@ var DropDownList = /** @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;
         }
@@ -1430,34 +1376,34 @@ var DropDownList = /** @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 });
                         }
                     }
                 }
@@ -1571,10 +1517,23 @@ var DropDownList = /** @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) {
@@ -1601,7 +1560,7 @@ var DropDownList = /** @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);
@@ -1648,16 +1607,17 @@ var DropDownList = /** @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());
                 }
             }
         }
@@ -1674,6 +1634,7 @@ var DropDownList = /** @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
@@ -1730,42 +1691,6 @@ var DropDownList = /** @class */ (function (_super) {
             this.isValidKey = false;
         }
     };
-    DropDownList.prototype.getFilteringSkeletonCount = function () {
-        var difference = this.dataCount - this.viewPortInfo.endIndex;
-        var currentSkeletonCount = this.skeletonCount;
-        this.getSkeletonCount(true);
-        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
-        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
@@ -1820,14 +1745,51 @@ var DropDownList = /** @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();
         }
@@ -2048,29 +2010,6 @@ var DropDownList = /** @class */ (function (_super) {
             this.renderPopup();
         }
     };
-    DropDownList.prototype.UpdateSkeleton = function (isSkeletonCountChange, skeletonCount) {
-        var isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
-        var isContainVirtualList = this.list.querySelector('.e-virtual-list');
-        if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.enableVirtualization) {
-            var totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
-            for (var i = 0; i < totalSkeletonCount; i++) {
-                var liElement = this.createElement('li', { className: dropDownListClasses.virtualList, styles: 'overflow: inherit' });
-                if (this.enableVirtualization && this.itemTemplate) {
-                    liElement.style.height = this.listItemHeight + 'px';
-                }
-                var skeleton = new Skeleton({
-                    shape: "Text",
-                    height: "10px",
-                    width: "95%",
-                    cssClass: "e-skeleton-text",
-                });
-                skeleton.appendTo(this.createElement('div'));
-                liElement.appendChild(skeleton.element);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
-            }
-        }
-    };
     DropDownList.prototype.getTakeValue = function () {
         return this.allowFiltering && this.getModuleName() === 'dropdownlist' && Browser.isDevice ? Math.round(window.outerHeight / this.listItemHeight) : this.itemCount;
     };
@@ -2106,19 +2045,26 @@ var DropDownList = /** @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);
@@ -2230,10 +2176,10 @@ var DropDownList = /** @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);
@@ -2289,46 +2235,19 @@ var DropDownList = /** @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)) {
@@ -2344,7 +2263,7 @@ var DropDownList = /** @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);
                 }
@@ -2388,19 +2307,19 @@ var DropDownList = /** @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 {
@@ -2433,6 +2352,9 @@ var DropDownList = /** @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)) {
@@ -2709,6 +2631,9 @@ var DropDownList = /** @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;
@@ -2762,6 +2687,9 @@ var DropDownList = /** @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;
@@ -2859,6 +2787,7 @@ var DropDownList = /** @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;
         }
@@ -2948,8 +2877,8 @@ var DropDownList = /** @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) {
@@ -3114,6 +3043,9 @@ var DropDownList = /** @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;
@@ -3123,7 +3055,7 @@ var DropDownList = /** @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();
         }
@@ -3275,7 +3207,7 @@ var DropDownList = /** @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);
@@ -3285,7 +3217,7 @@ var DropDownList = /** @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);
         }
@@ -3294,9 +3226,11 @@ var DropDownList = /** @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') {
@@ -3377,11 +3311,11 @@ var DropDownList = /** @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 &&
@@ -3418,6 +3352,9 @@ var DropDownList = /** @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();
@@ -3430,12 +3367,13 @@ var DropDownList = /** @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) {
@@ -3445,7 +3383,8 @@ var DropDownList = /** @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);
@@ -3474,11 +3413,11 @@ var DropDownList = /** @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 &&
@@ -3542,7 +3481,9 @@ var DropDownList = /** @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) {
@@ -3563,6 +3504,8 @@ var DropDownList = /** @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);
@@ -3625,6 +3568,7 @@ var DropDownList = /** @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;
@@ -3645,6 +3589,9 @@ var DropDownList = /** @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) {
@@ -3698,7 +3645,8 @@ var DropDownList = /** @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);
@@ -3711,6 +3659,7 @@ var DropDownList = /** @class */ (function (_super) {
                 this.resetSelection();
             }
         }
+        this.isVirtualTrackHeight = false;
         this.closePopup(0, e);
         var dataItem = this.getItemData();
         var isSelectVal = !isNullOrUndefined(this.selectedLI);
@@ -3782,6 +3731,9 @@ var DropDownList = /** @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) {
@@ -3837,6 +3789,14 @@ var DropDownList = /** @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;
         }
@@ -3851,7 +3811,7 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.getItems = function () {
         if (!this.list) {
             if (this.dataSource instanceof DataManager) {
-                this.initRemoteRender = true;
+                this.initialRemoteRender = true;
             }
             this.renderList();
         }
@@ -3929,6 +3889,9 @@ var DropDownList = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], DropDownList.prototype, "value", void 0);
+    __decorate([
+        Property(false)
+    ], DropDownList.prototype, "allowObjectBinding", void 0);
     __decorate([
         Property(null)
     ], DropDownList.prototype, "index", void 0);