@syncfusion/ej2-dropdowns 26.2.11 → 27.1.48

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';
-[];
 // don't use space in classnames
 export var dropDownListClasses = {
     root: 'e-dropdownlist',
@@ -58,7 +57,7 @@ export var dropDownListClasses = {
     popupFullScreen: 'e-popup-full-page',
     disableIcon: 'e-ddl-disable-icon',
     hiddenElement: 'e-ddl-hidden',
-    virtualList: 'e-list-item e-virtual-list',
+    virtualList: 'e-list-item e-virtual-list'
 };
 var inputObject = {
     container: null,
@@ -89,9 +88,7 @@ var DropDownList = /** @class */ (function (_super) {
         _this.isListSearched = false;
         _this.preventChange = false;
         _this.isTouched = false;
-        _this.IsScrollerAtEnd = function () {
-            return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
-        };
+        _this.isFocused = false;
         return _this;
     }
     /**
@@ -156,7 +153,7 @@ var DropDownList = /** @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: this.itemCount,
+            endIndex: this.itemCount
         };
     };
     DropDownList.prototype.setZIndex = function () {
@@ -230,7 +227,10 @@ var DropDownList = /** @class */ (function (_super) {
             this.resetSelection(properties);
         }
         var dataItem = this.getItemData();
-        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]))) {
+        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);
@@ -505,6 +505,7 @@ var DropDownList = /** @class */ (function (_super) {
             this.isActive = false;
             this.beforePopupOpen = false;
         }
+        this.isFocused = false;
     };
     DropDownList.prototype.focusOutAction = function (e) {
         this.isInteracted = false;
@@ -536,6 +537,7 @@ var DropDownList = /** @class */ (function (_super) {
             this.trigger('focus', args);
         }
         this.updateIconState();
+        this.isFocused = true;
     };
     DropDownList.prototype.resetValueHandler = function (e) {
         var formElement = closest(this.inputElement, 'form');
@@ -682,24 +684,26 @@ var DropDownList = /** @class */ (function (_super) {
                 var queryStringUpdated = false;
                 var activeElement = this.ulElement.getElementsByClassName('e-active')[0];
                 var currentValue = activeElement ? activeElement.textContent : null;
-                if (this.incrementalQueryString == '') {
+                if (this.incrementalQueryString === '') {
                     this.incrementalQueryString = String.fromCharCode(e.charCode);
                     this.incrementalPreQueryString = this.incrementalQueryString;
                 }
-                else if (String.fromCharCode(e.charCode).toLocaleLowerCase() == this.incrementalPreQueryString.toLocaleLowerCase()) {
+                else if (String.fromCharCode(e.charCode).toLocaleLowerCase() === this.incrementalPreQueryString.toLocaleLowerCase()) {
                     queryStringUpdated = true;
                 }
                 else {
                     this.incrementalQueryString = String.fromCharCode(e.charCode);
                 }
-                if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {
+                if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) ||
+                    this.incrementalEndIndex === 0) {
                     updatingincrementalindex = true;
                     this.incrementalStartIndex = this.incrementalEndIndex;
-                    if (this.incrementalEndIndex == 0) {
+                    if (this.incrementalEndIndex === 0) {
                         this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
                     }
                     else {
-                        this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                        this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount :
+                            this.incrementalEndIndex + 100;
                     }
                     this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
                     updatingincrementalindex = true;
@@ -709,7 +713,8 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 var li = incrementalSearch(e.charCode, this.incrementalLiCollections, this.activeIndex, true, this.element.id, queryStringUpdated, currentValue, true);
                 while (isNullOrUndefined(li) && this.incrementalEndIndex < this.totalItemCount) {
-                    this.updateIncrementalItemIndex(this.incrementalEndIndex, this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100);
+                    this.updateIncrementalItemIndex(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) {
@@ -736,7 +741,8 @@ var DropDownList = /** @class */ (function (_super) {
                 var index = li && this.getIndexByValue(li.getAttribute('data-value'));
                 if (!index) {
                     for (var i = 0; i < this.incrementalLiCollections.length; i++) {
-                        if (!isNullOrUndefined(li) && !isNullOrUndefined(li.getAttribute('data-value')) && this.incrementalLiCollections[i].getAttribute('data-value') === li.getAttribute('data-value').toString()) {
+                        if (!isNullOrUndefined(li) && !isNullOrUndefined(li.getAttribute('data-value')) &&
+                            this.incrementalLiCollections[i].getAttribute('data-value') === li.getAttribute('data-value').toString()) {
                             index = i;
                             index = this.incrementalStartIndex + index;
                             break;
@@ -749,15 +755,18 @@ var DropDownList = /** @class */ (function (_super) {
                 if (index) {
                     if ((!(this.viewPortInfo.startIndex >= index)) || (!(index >= this.viewPortInfo.endIndex))) {
                         var startIndex = index - ((this.itemCount / 2) - 2) > 0 ? index - ((this.itemCount / 2) - 2) : 0;
-                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ?
+                            this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
                         this.updateIncrementalView(startIndex, endIndex);
                     }
                 }
                 if (!isNullOrUndefined(li)) {
                     var index_1 = this.getIndexByValue(li.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;
+                        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);
                     }
                     li = this.getElementByValue(li.getAttribute('data-value'));
@@ -766,8 +775,11 @@ var DropDownList = /** @class */ (function (_super) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
                     if (this.enableVirtualization && !this.fields.groupBy) {
-                        var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
-                        this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
+                        var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
+                            this.selectedLI.offsetTop +
+                                (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+                        this.list.scrollTop = selectedLiOffsetTop -
+                            (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
                     }
                     this.incrementalPreQueryString = this.incrementalQueryString;
                 }
@@ -920,11 +932,11 @@ var DropDownList = /** @class */ (function (_super) {
             return;
         }
         if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
-            var value_1 = this.getItemData().value;
-            if (isNullOrUndefined(value_1)) {
-                value_1 = 'null';
+            var value = this.getItemData().value;
+            if (isNullOrUndefined(value)) {
+                value = 'null';
             }
-            var filterIndex = this.getIndexByValue(value_1);
+            var filterIndex = this.getIndexByValue(value);
             if (!isNullOrUndefined(filterIndex)) {
                 this.activeIndex = filterIndex;
             }
@@ -933,11 +945,14 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
             this.setSelection(focusEle, e);
             if (this.enableVirtualization) {
-                var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+                var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop +
+                    (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
                 if (this.fields.groupBy) {
-                    selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex == 0 ? this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;
+                    selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex === 0 ?
+                        this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;
                 }
-                this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
+                this.list.scrollTop = selectedLiOffsetTop -
+                    (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
             }
         }
         else if (!isNullOrUndefined(this.liCollections)) {
@@ -973,37 +988,45 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
             if (!isNullOrUndefined(nextItem)) {
-                var focusAtFirstElement = this.liCollections[this.skeletonCount] && this.liCollections[this.skeletonCount].classList.contains('e-item-focus');
+                var focusAtFirstElement = this.liCollections[this.skeletonCount] &&
+                    this.liCollections[this.skeletonCount].classList.contains('e-item-focus');
                 this.setSelection(nextItem, e);
                 if (focusAtFirstElement && this.enableVirtualization && this.getModuleName() === 'autocomplete' && !isVirtualKeyAction) {
-                    var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
-                    selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex == 0 && this.fields.groupBy ? this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;
+                    var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
+                        this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) :
+                        this.selectedLI.offsetTop;
+                    selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex === 0 && this.fields.groupBy ?
+                        this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;
                     this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
                 }
             }
             else if (this.enableVirtualization && !this.isPopupOpen && this.getModuleName() !== 'autocomplete' && ((this.viewPortInfo.endIndex !== this.totalItemCount && e.action === 'down') || (this.viewPortInfo.startIndex !== 0 && e.action === 'up'))) {
                 if (e.action === 'down') {
-                    this.viewPortInfo.startIndex = (this.viewPortInfo.startIndex + this.itemCount) < (this.totalItemCount - this.itemCount) ? this.viewPortInfo.startIndex + this.itemCount : this.totalItemCount - this.itemCount;
+                    this.viewPortInfo.startIndex = (this.viewPortInfo.startIndex + this.itemCount) <
+                        (this.totalItemCount - this.itemCount) ? this.viewPortInfo.startIndex + this.itemCount :
+                        this.totalItemCount - this.itemCount;
                     this.viewPortInfo.endIndex = this.viewPortInfo.startIndex + this.itemCount;
                     this.updateVirtualItemIndex();
                     this.isCustomFilter = this.getModuleName() === 'combobox' ? true : this.isCustomFilter;
                     this.resetList(this.dataSource, this.fields, this.query);
                     this.isCustomFilter = this.getModuleName() === 'combobox' ? false : this.isCustomFilter;
-                    var value_2 = this.liCollections[0].getAttribute('data-value') !== "null" ? this.getFormattedValue(this.liCollections[0].getAttribute('data-value')) : null;
-                    var selectedData = this.getDataByValue(value_2);
+                    var value = this.liCollections[0].getAttribute('data-value') !== 'null' ?
+                        this.getFormattedValue(this.liCollections[0].getAttribute('data-value')) : null;
+                    var selectedData = this.getDataByValue(value);
                     if (selectedData) {
                         this.itemData = selectedData;
                     }
                 }
                 else if (e.action === 'up') {
-                    this.viewPortInfo.startIndex = (this.viewPortInfo.startIndex - this.itemCount) > 0 ? this.viewPortInfo.startIndex - this.itemCount : 0;
+                    this.viewPortInfo.startIndex = (this.viewPortInfo.startIndex - this.itemCount) > 0 ?
+                        this.viewPortInfo.startIndex - this.itemCount : 0;
                     this.viewPortInfo.endIndex = this.viewPortInfo.startIndex + this.itemCount;
                     this.updateVirtualItemIndex();
                     this.isCustomFilter = this.getModuleName() === 'combobox' ? true : this.isCustomFilter;
                     this.resetList(this.dataSource, this.fields, this.query);
                     this.isCustomFilter = this.getModuleName() === 'combobox' ? false : this.isCustomFilter;
-                    var value_3 = this.liCollections[this.liCollections.length - 1].getAttribute('data-value') !== "null" ? this.getFormattedValue(this.liCollections[this.liCollections.length - 1].getAttribute('data-value')) : null;
-                    var selectedData = this.getDataByValue(value_3);
+                    var value = this.liCollections[this.liCollections.length - 1].getAttribute('data-value') !== 'null' ? this.getFormattedValue(this.liCollections[this.liCollections.length - 1].getAttribute('data-value')) : null;
+                    var selectedData = this.getDataByValue(value);
                     if (selectedData) {
                         this.itemData = selectedData;
                     }
@@ -1015,8 +1038,8 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
         if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
-            var value_4 = this.getItemData().value;
-            var filterIndex = this.getIndexByValueFilter(value_4, this.actionCompleteData.ulElement);
+            var value = this.getItemData().value;
+            var filterIndex = this.getIndexByValueFilter(value, this.actionCompleteData.ulElement);
             if (!isNullOrUndefined(filterIndex)) {
                 this.activeIndex = filterIndex;
             }
@@ -1125,13 +1148,18 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 break;
             case 'pageUp':
-                this.activeIndex = this.getModuleName() === 'autocomplete' ? this.getIndexByValue(this.selectedLI.getAttribute('data-value')) + this.getPageCount() - 1 : this.getIndexByValue(this.previousValue);
+                this.activeIndex = this.getModuleName() === 'autocomplete' ?
+                    this.getIndexByValue(this.selectedLI.getAttribute('data-value')) + this.getPageCount() - 1 :
+                    this.getIndexByValue(this.previousValue);
                 this.pageUpSelection(this.activeIndex - this.getPageCount(), e, true);
                 e.preventDefault();
                 break;
             case 'pageDown':
-                this.activeIndex = this.getModuleName() === 'autocomplete' ? this.getIndexByValue(this.selectedLI.getAttribute('data-value')) - this.getPageCount() : this.getIndexByValue(this.previousValue);
-                this.pageDownSelection(!isNullOrUndefined(this.activeIndex) ? (this.activeIndex + this.getPageCount()) : (2 * this.getPageCount()), e, true);
+                this.activeIndex = this.getModuleName() === 'autocomplete' ?
+                    this.getIndexByValue(this.selectedLI.getAttribute('data-value')) - this.getPageCount() :
+                    this.getIndexByValue(this.previousValue);
+                this.pageDownSelection(!isNullOrUndefined(this.activeIndex) ?
+                    (this.activeIndex + this.getPageCount()) : (2 * this.getPageCount()), e, true);
                 e.preventDefault();
                 break;
             case 'home':
@@ -1172,7 +1200,8 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.pageUpSelection = function (steps, event, isVirtualKeyAction) {
         var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
         if ((this.enableVirtualization && this.activeIndex == null)) {
-            previousItem = (this.liCollections.length >= steps && steps >= 0) ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];
+            previousItem = (this.liCollections.length >= steps && steps >= 0) ?
+                this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];
         }
         if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {
             previousItem = this.liCollections[this.skeletonCount];
@@ -1189,7 +1218,9 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.PageUpDownSelection = function (previousItem, event) {
         if (this.enableVirtualization) {
-            if (!isNullOrUndefined(previousItem) && ((this.getModuleName() !== 'autocomplete' && !previousItem.classList.contains('e-active')) || (this.getModuleName() === 'autocomplete' && !previousItem.classList.contains('e-item-focus')))) {
+            if (!isNullOrUndefined(previousItem) && ((this.getModuleName() !== 'autocomplete' &&
+                !previousItem.classList.contains('e-active')) || (this.getModuleName() === 'autocomplete' &&
+                !previousItem.classList.contains('e-item-focus')))) {
                 this.setSelection(previousItem, event);
             }
         }
@@ -1334,7 +1365,8 @@ var DropDownList = /** @class */ (function (_super) {
         this.removeSelection();
         li.classList.add(dropDownBaseClasses.selected);
         this.removeHover();
-        var value = li.getAttribute('data-value') !== null ? this.getFormattedValue(li.getAttribute('data-value')) : null;
+        var value = li.getAttribute('data-value') !== null ?
+            this.getFormattedValue(li.getAttribute('data-value')) : null;
         var selectedData = this.getDataByValue(value);
         if (!this.initial && !preventSelect && !isNullOrUndefined(e)) {
             var items = this.detachChanges(selectedData);
@@ -1367,8 +1399,9 @@ 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.allowObjectBinding ? this.checkFieldValue(this.itemData, this.fields.value.split('.')) : this.itemData : null;
+        if (this.itemData !== selectedData) {
+            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;
@@ -1432,7 +1465,10 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.isFiltering() && clearElement) {
             clearElement.style.removeProperty('visibility');
         }
-        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])))) {
+        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;
         }
@@ -1454,15 +1490,18 @@ var DropDownList = /** @class */ (function (_super) {
             this.setSelectOptions(li, e);
             if (this.enableVirtualization && this.value) {
                 var fields = (this.fields.value) ? this.fields.value : '';
-                var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
+                var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ?
+                    getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
                 if (this.dataSource instanceof DataManager) {
                     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 });
+                        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 ? dataItem.text.toString() : dataItem.text, 'value': value });
                         }
                     }
                 }
@@ -1471,9 +1510,11 @@ var DropDownList = /** @class */ (function (_super) {
                     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 });
+                        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 ? dataItem.text.toString() : dataItem.text, 'value': value });
                         }
                     }
                 }
@@ -1585,6 +1626,7 @@ var DropDownList = /** @class */ (function (_super) {
      * To trigger the change event for list.
      *
      * @param {MouseEvent | KeyboardEvent | TouchEvent} eve - Specifies the event arguments.
+     * @param {boolean} isCustomValue - Specifies whether the value is custom value or not.
      * @returns {void}
      */
     DropDownList.prototype.onChangeEvent = function (eve, isCustomValue) {
@@ -1602,8 +1644,9 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
         }
-        var value = this.allowObjectBinding ? isCustomValue ? this.value : this.getDataByValue(dataItem.value) : dataItem.value;
-        this.setProperties({ 'index': index, 'text': dataItem.text, 'value': value }, true);
+        var value = this.allowObjectBinding ? isCustomValue ?
+            this.value : this.getDataByValue(dataItem.value) : dataItem.value;
+        this.setProperties({ 'index': index, 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value }, true);
         this.detachChangeEvent(eve);
     };
     DropDownList.prototype.detachChanges = function (value) {
@@ -1755,7 +1798,7 @@ var DropDownList = /** @class */ (function (_super) {
                     this.typedString = this.filterInput.value;
                     this.preventAutoFill = false;
                     this.searchLists(e);
-                    if ((this.enableVirtualization && this.getModuleName() !== 'autocomplete') || (this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {
+                    if ((this.enableVirtualization && this.getModuleName() !== 'autocomplete') || (this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount !== 0)) {
                         this.getFilteringSkeletonCount();
                     }
                     break;
@@ -1806,9 +1849,10 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
         else {
-            filterQuery = (this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery)) ? this.customFilterQuery.clone() : query ? query.clone() : this.query ? this.query.clone() : new Query();
+            filterQuery = (this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery)) ?
+                this.customFilterQuery.clone() : query ? query.clone() : this.query ? this.query.clone() : new Query();
         }
-        if (this.enableVirtualization && this.viewPortInfo.endIndex != 0) {
+        if (this.enableVirtualization && this.viewPortInfo.endIndex !== 0) {
             var takeValue = this.getTakeValue();
             var alreadySkipAdded = false;
             if (filterQuery) {
@@ -1822,35 +1866,39 @@ var DropDownList = /** @class */ (function (_super) {
             var queryTakeValue = 0;
             var querySkipValue = 0;
             if (filterQuery && filterQuery.queries.length > 0) {
-                for (var queryElements_1 = 0; queryElements_1 < filterQuery.queries.length; queryElements_1++) {
-                    if (filterQuery.queries[queryElements_1].fn === 'onSkip') {
-                        querySkipValue = filterQuery.queries[queryElements_1].e.nos;
+                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                        querySkipValue = filterQuery.queries[queryElements].e.nos;
                     }
-                    if (filterQuery.queries[queryElements_1].fn === 'onTake') {
-                        queryTakeValue = takeValue <= filterQuery.queries[queryElements_1].e.nos ? filterQuery.queries[queryElements_1].e.nos : takeValue;
+                    if (filterQuery.queries[queryElements].fn === 'onTake') {
+                        queryTakeValue = takeValue <= filterQuery.queries[queryElements].e.nos ?
+                            filterQuery.queries[queryElements].e.nos : takeValue;
                     }
                 }
             }
             if (queryTakeValue <= 0 && this.query && this.query.queries.length > 0) {
-                for (var queryElements_2 = 0; queryElements_2 < this.query.queries.length; queryElements_2++) {
-                    if (this.query.queries[queryElements_2].fn === 'onTake') {
-                        queryTakeValue = takeValue <= this.query.queries[queryElements_2].e.nos ? this.query.queries[queryElements_2].e.nos : takeValue;
+                for (var queryElements = 0; queryElements < this.query.queries.length; queryElements++) {
+                    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;
             if (filterQuery && filterQuery.queries.length > 0) {
-                for (var queryElements_3 = 0; queryElements_3 < filterQuery.queries.length; queryElements_3++) {
-                    if (filterQuery.queries[queryElements_3].fn === 'onSkip') {
-                        querySkipValue = filterQuery.queries[queryElements_3].e.nos;
-                        filterQuery.queries.splice(queryElements_3, 1);
-                        --queryElements_3;
+                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                        querySkipValue = filterQuery.queries[queryElements].e.nos;
+                        filterQuery.queries.splice(queryElements, 1);
+                        alreadySkipAdded = false;
+                        --queryElements;
                         continue;
                     }
-                    if (filterQuery.queries[queryElements_3].fn === 'onTake') {
-                        queryTakeValue = filterQuery.queries[queryElements_3].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements_3].e.nos;
-                        filterQuery.queries.splice(queryElements_3, 1);
-                        --queryElements_3;
+                    if (filterQuery.queries[queryElements].fn === 'onTake') {
+                        queryTakeValue = filterQuery.queries[queryElements].e.nos <= queryTakeValue ?
+                            queryTakeValue : filterQuery.queries[queryElements].e.nos;
+                        filterQuery.queries.splice(queryElements, 1);
+                        --queryElements;
                     }
                 }
             }
@@ -1902,7 +1950,7 @@ var DropDownList = /** @class */ (function (_super) {
                         return;
                     }
                     _this.isCustomFilter = true;
-                    _this.customFilterQuery = query ? query.clone() : query;
+                    _this.customFilterQuery = query.clone();
                     _this.filteringAction(dataSource, query, fields);
                 },
                 baseEventArgs: e,
@@ -1930,8 +1978,8 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.filteringAction = function (dataSource, query, fields) {
         if (!isNullOrUndefined(this.filterInput)) {
-            this.beforePopupOpen = ((!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') || this.getInitialData) ?
-                false : true;
+            this.beforePopupOpen = ((!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') ||
+                this.getInitialData) ? false : true;
             var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
             if (this.filterInput.value.trim() === '' && !this.itemTemplate) {
                 this.actionCompleteData.isUpdated = false;
@@ -2019,7 +2067,7 @@ var DropDownList = /** @class */ (function (_super) {
             });
             this.element.parentNode.insertBefore(this.filterInput, this.element);
             var backIcon = false;
-            if (Browser.isDevice) {
+            if (Browser.isDevice && this.isDeviceFullScreen) {
                 backIcon = true;
             }
             this.filterInputObj = Input.createInput({
@@ -2125,7 +2173,9 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.isActive || !isNullOrUndefined(ulElement)) {
             var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;
             _super.prototype.onActionComplete.call(this, ulElement, list, e);
-            this.skeletonCount = this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2) ? 0 : this.skeletonCount;
+            this.skeletonCount = this.totalItemCount !== 0 && this.totalItemCount < (this.itemCount * 2) &&
+                ((!(this.dataSource instanceof DataManager)) ||
+                    ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;
             this.updateSelectElementData(this.allowFiltering);
             if (this.isRequested && !isNullOrUndefined(this.searchKeyEvent) && this.searchKeyEvent.type === 'keydown') {
                 this.isRequested = false;
@@ -2148,20 +2198,21 @@ var DropDownList = /** @class */ (function (_super) {
                 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 value_1 = 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) === value_5 : x[checkField_1] === value_5;
+                            _this.checkFieldValue(x, fieldValue_1) === value_1 : x[checkField_1] === value_1;
                     });
                     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;
+                                _this.checkFieldValue(x, fieldValue_1) === value_1 : x[checkField_1] === value_1;
                         });
                     }
                     if (!checkVal) {
-                        this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', value_5)))
+                        this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', value_1)))
                             .then(function (e) {
                             if (e.result.length > 0) {
                                 _this.addItem(e.result, list.length);
@@ -2200,16 +2251,20 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                 }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                if ((this.allowCustom || (this.allowFiltering && !this.isValueInList(list, this.value) && this.dataSource instanceof DataManager)) && !this.enableVirtualization) {
+                if ((this.allowCustom || (this.allowFiltering && !this.isValueInList(list, this.value) &&
+                    this.dataSource instanceof DataManager)) && !this.enableVirtualization) {
                     this.addNewItem(list, selectedItem);
                 }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                else if ((this.allowCustom || (this.allowFiltering && this.isValueInList(list, this.value))) && !this.enableVirtualization) {
+                else if ((this.allowCustom || (this.allowFiltering && this.isValueInList(list, this.value))) &&
+                    !this.enableVirtualization) {
                     this.addNewItem(list, selectedItem);
                 }
                 if (!isNullOrUndefined(this.itemData) || (isNullOrUndefined(this.itemData) && this.enableVirtualization)) {
                     this.getSkeletonCount();
-                    this.skeletonCount = this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2) ? 0 : this.skeletonCount;
+                    this.skeletonCount = this.totalItemCount !== 0 && this.totalItemCount < (this.itemCount * 2) &&
+                        ((!(this.dataSource instanceof DataManager)) ||
+                            ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;
                     this.UpdateSkeleton();
                     this.focusIndexItem();
                 }
@@ -2234,7 +2289,7 @@ var DropDownList = /** @class */ (function (_super) {
                         this.liCollections = this.list.querySelectorAll('.e-list-item');
                     }
                 }
-                if (this.enableVirtualization && tempItemCount != this.itemCount) {
+                if (this.enableVirtualization && tempItemCount !== this.itemCount) {
                     this.resetList(this.dataSource, this.fields);
                 }
             }
@@ -2276,10 +2331,10 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.addNewItem = function (listData, newElement) {
         var _this = this;
         if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {
-            var value_6 = this.getItemData().value;
+            var value_2 = this.getItemData().value;
             var isExist = listData.some(function (data) {
-                return (((typeof data === 'string' || typeof data === 'number') && data === value_6) ||
-                    (getValue(_this.fields.value, data) === value_6));
+                return (((typeof data === 'string' || typeof data === 'number') && data === value_2) ||
+                    (getValue(_this.fields.value, data) === value_2));
             });
             if (!isExist) {
                 this.addItem(this.itemData);
@@ -2313,7 +2368,8 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.focusIndexItem = function () {
         var value = this.getItemData().value;
-        this.activeIndex = ((this.enableVirtualization && !isNullOrUndefined(value)) || !this.enableVirtualization) ? this.getIndexByValue(value) : this.activeIndex;
+        this.activeIndex = ((this.enableVirtualization && !isNullOrUndefined(value)) || !this.enableVirtualization) ?
+            this.getIndexByValue(value) : this.activeIndex;
         var element = this.findListElement(this.list, 'li', 'data-value', value);
         this.selectedLI = element;
         this.activeItem(element);
@@ -2363,7 +2419,8 @@ var DropDownList = /** @class */ (function (_super) {
                 popupEle.setAttribute('aria-label', _this.element.id);
                 popupEle.setAttribute('role', 'dialog');
                 var searchBox = _this.setSearchBox(popupEle);
-                _this.listContainerHeight = _this.allowFiltering && _this.getModuleName() === 'dropdownlist' && Browser.isDevice ? formatUnit(Math.round(window.outerHeight).toString() + 'px') : formatUnit(_this.popupHeight);
+                _this.listContainerHeight = _this.allowFiltering && _this.getModuleName() === 'dropdownlist' && Browser.isDevice ?
+                    formatUnit(Math.round(window.outerHeight).toString() + 'px') : formatUnit(_this.popupHeight);
                 if (_this.headerTemplate) {
                     _this.setHeaderTemplate(popupEle);
                 }
@@ -2375,11 +2432,13 @@ var DropDownList = /** @class */ (function (_super) {
                 popupEle.style.top = '0px';
                 if (_this.enableVirtualization && _this.itemTemplate) {
                     var listitems = popupEle.querySelectorAll('li.e-list-item:not(.e-virtual-list)');
-                    _this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) : 0;
+                    _this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) +
+                        parseInt(window.getComputedStyle(listitems[0]).marginBottom, 10) : 0;
                 }
                 if (_this.enableVirtualization && !_this.list.classList.contains(dropDownBaseClasses.noData)) {
                     _this.getSkeletonCount();
-                    _this.skeletonCount = _this.totalItemCount < (_this.itemCount * 2) ? 0 : _this.skeletonCount;
+                    _this.skeletonCount = _this.totalItemCount < (_this.itemCount * 2) && ((!(_this.dataSource instanceof DataManager)) ||
+                        ((_this.dataSource instanceof DataManager) && (_this.totalItemCount <= _this.itemCount))) ? 0 : _this.skeletonCount;
                     if (!_this.list.querySelector('.e-virtual-ddl-content')) {
                         _this.list.appendChild(_this.createElement('div', {
                             className: 'e-virtual-ddl-content',
@@ -2407,19 +2466,22 @@ var DropDownList = /** @class */ (function (_super) {
                 popupEle.style.visibility = 'hidden';
                 if (_this.popupHeight !== 'auto') {
                     _this.searchBoxHeight = 0;
-                    if (!isNullOrUndefined(searchBox.container) && _this.getModuleName() !== 'combobox' && _this.getModuleName() !== 'autocomplete') {
+                    if (!isNullOrUndefined(searchBox.container) &&
+                        _this.getModuleName() !== 'combobox' && _this.getModuleName() !== 'autocomplete') {
                         _this.searchBoxHeight = (searchBox.container.parentElement).getBoundingClientRect().height;
                         _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.listContainerHeight = (parseInt(_this.listContainerHeight, 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.listContainerHeight = (parseInt(_this.listContainerHeight, 10) - (height + _this.searchBoxHeight)).toString() + 'px';
+                        _this.listContainerHeight = (parseInt(_this.listContainerHeight, 10) -
+                            (height + _this.searchBoxHeight)).toString() + 'px';
                     }
                     _this.list.style.maxHeight = (parseInt(_this.listContainerHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
                     popupEle.style.maxHeight = formatUnit(_this.popupHeight);
@@ -2439,7 +2501,7 @@ var DropDownList = /** @class */ (function (_super) {
                 else {
                     _this.list.scrollTop = 0;
                 }
-                if (Browser.isDevice && (!_this.allowFiltering && (_this.getModuleName() === 'dropdownlist' ||
+                if (Browser.isDevice && _this.isDeviceFullScreen && (!_this.allowFiltering && (_this.getModuleName() === 'dropdownlist' ||
                     (_this.isDropDownClick && _this.getModuleName() === 'combobox')))) {
                     offsetValue = _this.getOffsetValue(popupEle);
                     var firstItem = _this.isEmptyList() ? _this.list : _this.liCollections[0];
@@ -2454,7 +2516,8 @@ 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)) {
+                    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);
@@ -2462,7 +2525,7 @@ var DropDownList = /** @class */ (function (_super) {
                         && !_this.allowFiltering && _this.isDropDownClick)) {
                         _this.popupObj.collision = { X: 'fit', Y: 'fit' };
                     }
-                    if (_this.isFilterLayout()) {
+                    if (_this.isFilterLayout() && _this.isDeviceFullScreen) {
                         _this.popupObj.element.classList.add(dropDownListClasses.mobileFilter);
                         _this.popupObj.position = { X: 0, Y: 0 };
                         _this.popupObj.dataBind();
@@ -2488,10 +2551,10 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 _this.selectedElementID = _this.selectedLI ? _this.selectedLI.id : null;
                 if (_this.enableVirtualization) {
-                    _this.notify("bindScrollEvent", {
-                        module: "VirtualScroll",
+                    _this.notify('bindScrollEvent', {
+                        module: 'VirtualScroll',
                         component: _this.getModuleName(),
-                        enable: _this.enableVirtualization,
+                        enable: _this.enableVirtualization
                     });
                     setTimeout(function () {
                         if (_this.value || _this.list.querySelector('.e-active')) {
@@ -2584,6 +2647,9 @@ var DropDownList = /** @class */ (function (_super) {
                         _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);
                     }
                 }
+                else if (_this.enableVirtualization) {
+                    _this.focusIndexItem();
+                }
             },
             open: function () {
                 EventHandler.add(document, 'mousedown', _this.onDocumentClick, _this);
@@ -2638,9 +2704,9 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.isElementInViewport = function (element) {
         var elementRect = element.getBoundingClientRect();
-        return (elementRect.top >= 0 && elementRect.left >= 0 && elementRect.bottom <= window.innerHeight && elementRect.right <= window.innerWidth);
+        return (elementRect.top >= 0 && elementRect.left >= 0 && elementRect.bottom <= window.innerHeight &&
+            elementRect.right <= window.innerWidth);
     };
-    ;
     DropDownList.prototype.setSearchBoxPosition = function () {
         var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;
         this.popupObj.element.style.maxHeight = '100%';
@@ -2658,7 +2724,7 @@ var DropDownList = /** @class */ (function (_super) {
         var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
         var lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];
         var liHeight = firstItem.getBoundingClientRect().height;
-        this.listItemHeight = liHeight;
+        this.listItemHeight = liHeight + parseInt(window.getComputedStyle(firstItem).marginBottom, 10);
         var listHeight = this.list.offsetHeight / 2;
         var height = isNullOrUndefined(selectedLI) ? firstItem.offsetTop : selectedLI.offsetTop;
         var lastItemOffsetValue = lastItem.offsetTop;
@@ -2706,17 +2772,26 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
         if (!isNullOrUndefined(this.selectedLI)) {
+            var selectedListMargin = this.selectedLI &&
+                !isNaN(parseInt(window.getComputedStyle(this.selectedLI).marginBottom, 10)) ?
+                parseInt(window.getComputedStyle(this.selectedLI).marginBottom, 10) : 0;
             this.isUpwardScrolling = false;
             var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
-            var lastElementValue = this.list.querySelector('li:last-of-type') ? this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;
-            var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+            var lastElementValue = this.list.querySelector('li:last-of-type') ?
+                this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;
+            var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
+                this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * (this.selectedLI.offsetHeight +
+                    selectedListMargin)) : this.selectedLI.offsetTop;
             var currentOffset = this.list.offsetHeight;
-            var nextBottom = selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) + this.selectedLI.offsetHeight - this.list.scrollTop;
+            var nextBottom = selectedLiOffsetTop - (virtualListCount * (this.selectedLI.offsetHeight + selectedListMargin)) +
+                (this.selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop;
             var nextOffset = this.list.scrollTop + nextBottom - currentOffset;
             var isScrollerCHanged = false;
             var isScrollTopChanged = false;
-            nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 : nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10);
-            var boxRange = selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) + this.selectedLI.offsetHeight - this.list.scrollTop;
+            nextOffset = isInitial ? nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10) * 2 :
+                nextOffset + parseInt(getComputedStyle(this.list).paddingTop, 10);
+            var boxRange = selectedLiOffsetTop - (virtualListCount * (this.selectedLI.offsetHeight + selectedListMargin)) +
+                (this.selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop;
             boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
                 boxRange - this.fixedHeaderElement.offsetHeight : boxRange;
             if (this.activeIndex === 0 && !this.enableVirtualization) {
@@ -2725,31 +2800,32 @@ var DropDownList = /** @class */ (function (_super) {
             }
             else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {
                 var currentElementValue = this.selectedLI ? this.selectedLI.getAttribute('data-value') : null;
-                var liCount = keyAction == "pageDown" ? this.getPageCount() - 2 : 1;
+                var liCount = keyAction === 'pageDown' ? this.getPageCount() - 2 : 1;
                 if (!this.enableVirtualization || this.isKeyBoardAction || isInitialSelection) {
-                    if (this.isKeyBoardAction && this.enableVirtualization && lastElementValue && currentElementValue === lastElementValue && keyAction != "end" && !this.isVirtualScrolling) {
+                    if (this.isKeyBoardAction && this.enableVirtualization && lastElementValue &&
+                        currentElementValue === lastElementValue && keyAction !== 'end' && !this.isVirtualScrolling) {
                         this.isPreventKeyAction = true;
                         if (this.enableVirtualization && this.itemTemplate) {
                             this.list.scrollTop += nextOffset;
                         }
                         else {
                             if (this.enableVirtualization) {
-                                liCount = keyAction == "pageDown" ? this.getPageCount() + 1 : liCount;
+                                liCount = keyAction === 'pageDown' ? this.getPageCount() + 1 : liCount;
                             }
-                            this.list.scrollTop += this.selectedLI.offsetHeight * liCount;
+                            this.list.scrollTop += (this.selectedLI.offsetHeight + selectedListMargin) * liCount;
                         }
                         this.isPreventKeyAction = this.IsScrollerAtEnd() ? false : this.isPreventKeyAction;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
                     }
-                    else if (this.enableVirtualization && keyAction == "end") {
+                    else if (this.enableVirtualization && keyAction === 'end') {
                         this.isPreventKeyAction = false;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
                         this.list.scrollTop = this.list.scrollHeight;
                     }
                     else {
-                        if (keyAction == "pageDown" && this.enableVirtualization && !this.isVirtualScrolling) {
+                        if (keyAction === 'pageDown' && this.enableVirtualization && !this.isVirtualScrolling) {
                             this.isPreventKeyAction = false;
                             this.isKeyBoardAction = false;
                             this.isPreventScrollAction = false;
@@ -2758,13 +2834,14 @@ var DropDownList = /** @class */ (function (_super) {
                     }
                 }
                 else {
-                    this.list.scrollTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.virtualListInfo.startIndex * this.listItemHeight : 0;
+                    this.list.scrollTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
+                        this.virtualListInfo.startIndex * this.listItemHeight : 0;
                 }
                 isScrollerCHanged = this.isKeyBoardAction;
                 isScrollTopChanged = true;
             }
             this.isKeyBoardAction = isScrollerCHanged;
-            if (this.enableVirtualization && this.fields.groupBy && this.fixedHeaderElement && (keyAction == "down")) {
+            if (this.enableVirtualization && this.fields.groupBy && this.fixedHeaderElement && (keyAction === 'down')) {
                 setTimeout(function () {
                     _this.scrollStop(null, true);
                 }, 100);
@@ -2774,39 +2851,48 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.scrollTop = function (keyAction) {
         if (keyAction === void 0) { keyAction = null; }
         if (!isNullOrUndefined(this.selectedLI)) {
+            var selectedListMargin = this.selectedLI &&
+                !isNaN(parseInt(window.getComputedStyle(this.selectedLI).marginBottom, 10)) ?
+                parseInt(window.getComputedStyle(this.selectedLI).marginBottom, 10) : 0;
             var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
-            var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
-            var nextOffset = selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) - this.list.scrollTop;
-            var firstElementValue = this.list.querySelector('li.e-list-item:not(.e-virtual-list)') ? this.list.querySelector('li.e-list-item:not(.e-virtual-list)').getAttribute('data-value') : null;
+            var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ?
+                this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * (this.selectedLI.offsetHeight +
+                    selectedListMargin)) : this.selectedLI.offsetTop;
+            var nextOffset = selectedLiOffsetTop - (virtualListCount * (this.selectedLI.offsetHeight +
+                selectedListMargin)) - this.list.scrollTop;
+            var firstElementValue = this.list.querySelector('li.e-list-item:not(.e-virtual-list)') ?
+                this.list.querySelector('li.e-list-item:not(.e-virtual-list)').getAttribute('data-value') : null;
             nextOffset = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
                 nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;
-            var boxRange = (selectedLiOffsetTop - (virtualListCount * this.selectedLI.offsetHeight) + this.selectedLI.offsetHeight - this.list.scrollTop);
+            var boxRange = (selectedLiOffsetTop - (virtualListCount * (this.selectedLI.offsetHeight + selectedListMargin)) +
+                (this.selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop);
             var isPageUpKeyAction = this.enableVirtualization && this.getModuleName() === 'autocomplete' && nextOffset <= 0;
             if (this.activeIndex === 0 && !this.enableVirtualization) {
                 this.list.scrollTop = 0;
             }
             else if (nextOffset < 0 || isPageUpKeyAction) {
                 var currentElementValue = this.selectedLI ? this.selectedLI.getAttribute('data-value') : null;
-                var liCount = keyAction == "pageUp" ? this.getPageCount() - 2 : 1;
+                var liCount = keyAction === 'pageUp' ? this.getPageCount() - 2 : 1;
                 if (this.enableVirtualization) {
-                    liCount = keyAction == "pageUp" ? this.getPageCount() : liCount;
+                    liCount = keyAction === 'pageUp' ? this.getPageCount() : liCount;
                 }
-                if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue && currentElementValue === firstElementValue && keyAction != "home" && !this.isVirtualScrolling) {
+                if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue &&
+                    currentElementValue === firstElementValue && keyAction !== 'home' && !this.isVirtualScrolling) {
                     this.isUpwardScrolling = true;
                     this.isPreventKeyAction = true;
-                    this.list.scrollTop -= this.selectedLI.offsetHeight * liCount;
-                    this.isPreventKeyAction = this.list.scrollTop != 0 ? this.isPreventKeyAction : false;
+                    this.list.scrollTop -= (this.selectedLI.offsetHeight + selectedListMargin) * liCount;
+                    this.isPreventKeyAction = this.list.scrollTop !== 0 ? this.isPreventKeyAction : false;
                     this.isKeyBoardAction = false;
                     this.isPreventScrollAction = false;
                 }
-                else if (this.enableVirtualization && keyAction == "home") {
+                else if (this.enableVirtualization && keyAction === 'home') {
                     this.isPreventScrollAction = false;
                     this.isPreventKeyAction = true;
                     this.isKeyBoardAction = false;
                     this.list.scrollTo(0, 0);
                 }
                 else {
-                    if (keyAction == "pageUp" && this.enableVirtualization && !this.isVirtualScrolling) {
+                    if (keyAction === 'pageUp' && this.enableVirtualization && !this.isVirtualScrolling) {
                         this.isPreventKeyAction = false;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
@@ -2820,6 +2906,9 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
     };
+    DropDownList.prototype.IsScrollerAtEnd = function () {
+        return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
+    };
     DropDownList.prototype.isEditTextBox = function () {
         return false;
     };
@@ -2840,7 +2929,7 @@ var DropDownList = /** @class */ (function (_super) {
                     this.scrollBottom(false, false, e.action);
                     break;
                 default:
-                    this.isKeyBoardAction = e.action == 'up' || e.action == 'pageUp' || e.action == 'open';
+                    this.isKeyBoardAction = e.action === 'up' || e.action === 'pageUp' || e.action === 'open';
                     this.scrollTop(e.action);
                     break;
             }
@@ -2856,7 +2945,8 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.enableVirtualization) {
             this.list.scrollTop = 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+            this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ?
+                this.dataSource.length : 0;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.list.getElementsByClassName('e-virtual-ddl')[0]) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2884,7 +2974,8 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.closePopup = function (delay, e) {
         var _this = this;
-        var isFilterValue = !isNullOrUndefined(this.filterInput) && !isNullOrUndefined(this.filterInput.value) && this.filterInput.value !== '';
+        var 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;
@@ -2899,7 +2990,7 @@ var DropDownList = /** @class */ (function (_super) {
                 element: this.filterInput,
                 floatLabelType: this.floatLabelType,
                 properties: { placeholder: this.filterBarPlaceholder },
-                buttons: this.clearIconElement,
+                buttons: this.clearIconElement
             }, this.clearIconElement);
         }
         this.filterInputObj = null;
@@ -2910,7 +3001,7 @@ var DropDownList = /** @class */ (function (_super) {
             var element = scrollableParentElements_1[_i];
             EventHandler.remove(element, 'scroll', this.scrollHandler);
         }
-        if (Browser.isDevice && this.isFilterLayout()) {
+        if (Browser.isDevice && this.isFilterLayout() && this.isDeviceFullScreen) {
             removeClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);
         }
         if (this.isFilterLayout()) {
@@ -2951,15 +3042,18 @@ var DropDownList = /** @class */ (function (_super) {
         }
         if (this.enableVirtualization) {
             if ((this.value == null || this.isTyped)) {
-                this.viewPortInfo.endIndex = this.viewPortInfo && this.viewPortInfo.endIndex > 0 ? this.viewPortInfo.endIndex : this.itemCount;
-                if (this.getModuleName() === 'autocomplete' || (this.getModuleName() === 'dropdownlist' && !isNullOrUndefined(this.typedString) && this.typedString != "") || (this.getModuleName() === 'combobox' && this.allowFiltering && !isNullOrUndefined(this.typedString) && this.typedString != "")) {
+                this.viewPortInfo.endIndex = this.viewPortInfo && this.viewPortInfo.endIndex > 0 ?
+                    this.viewPortInfo.endIndex : this.itemCount;
+                if (this.getModuleName() === 'autocomplete' || (this.getModuleName() === 'dropdownlist' &&
+                    !isNullOrUndefined(this.typedString) && this.typedString !== '') || (this.getModuleName() === 'combobox' &&
+                    this.allowFiltering && !isNullOrUndefined(this.typedString) && this.typedString !== '')) {
                     this.checkAndResetCache();
                 }
             }
             else if (this.getModuleName() === 'autocomplete') {
                 this.checkAndResetCache();
             }
-            if ((this.getModuleName() === 'dropdownlist' || this.getModuleName() === 'combobox') && !(this.skeletonCount == 0)) {
+            if ((this.getModuleName() === 'dropdownlist' || this.getModuleName() === 'combobox') && !(this.skeletonCount === 0)) {
                 this.getSkeletonCount(true);
             }
         }
@@ -2996,7 +3090,8 @@ var DropDownList = /** @class */ (function (_super) {
         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;
+            dataSourceCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ?
+                this.virtualGroupDataSource.length : 0;
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3017,10 +3112,10 @@ var DropDownList = /** @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: this.itemCount,
+            endIndex: this.itemCount
         };
         if (this.getModuleName() === 'combobox') {
-            this.typedString = "";
+            this.typedString = '';
         }
         this.previousStartIndex = 0;
         this.previousEndIndex = 0;
@@ -3041,7 +3136,7 @@ var DropDownList = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
         }
-        if (this.getModuleName() !== 'autocomplete' && this.totalItemCount != 0 && this.totalItemCount > (this.itemCount * 2)) {
+        if (this.getModuleName() !== 'autocomplete' && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2)) {
             this.getSkeletonCount();
         }
         this.UpdateSkeleton();
@@ -3097,7 +3192,8 @@ var DropDownList = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
             updatedCssClassValues = (this.cssClass.replace(/\s+/g, ' ')).trim();
         }
-        if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
+        if (!isNullOrUndefined(closest(this.element, 'fieldset')) &&
+            closest(this.element, 'fieldset').disabled) {
             this.enabled = false;
         }
         this.inputWrapper = Input.createInput({
@@ -3120,9 +3216,16 @@ var DropDownList = /** @class */ (function (_super) {
             this.inputElement.parentElement.insertBefore(this.element, this.inputElement);
         }
         this.hiddenElement = this.createElement('select', {
-            attrs: { 'aria-hidden': 'true', 'aria-label': this.getModuleName(), 'tabindex': '-1', 'class': dropDownListClasses.hiddenElement }
+            attrs: {
+                'aria-hidden': 'true',
+                'tabindex': '-1',
+                'class': dropDownListClasses.hiddenElement
+            }
         });
         prepend([this.hiddenElement], this.inputWrapper.container);
+        if (!this.hiddenElement.hasAttribute('aria-label')) {
+            this.hiddenElement.setAttribute('aria-label', this.getModuleName());
+        }
         this.validationAttribute(this.element, this.hiddenElement);
         this.setReadOnly();
         this.setFields();
@@ -3131,7 +3234,8 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.floatLabelType !== 'Never') {
             Input.calculateWidth(this.inputElement, this.inputWrapper.container);
         }
-        if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {
+        if (!isNullOrUndefined(this.inputWrapper.buttons[0]) &&
+            this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
         }
         this.wireEvent();
@@ -3142,11 +3246,17 @@ var DropDownList = /** @class */ (function (_super) {
         this.hiddenElement.id = id + '_hidden';
         this.targetElement().setAttribute('tabindex', this.tabIndex);
         if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') && !this.readonly) {
-            this.inputElement.setAttribute('aria-label', this.getModuleName());
+            if (!this.inputElement.hasAttribute('aria-label')) {
+                this.inputElement.setAttribute('aria-label', this.getModuleName());
+            }
         }
         else if (this.getModuleName() === 'dropdownlist') {
-            attributes(this.targetElement(), { 'aria-label': this.getModuleName() });
-            this.inputElement.setAttribute('aria-label', this.getModuleName());
+            if (!this.targetElement().hasAttribute('aria-label')) {
+                attributes(this.targetElement(), { 'aria-label': this.getModuleName() });
+            }
+            if (!this.inputElement.hasAttribute('aria-label')) {
+                this.inputElement.setAttribute('aria-label', this.getModuleName());
+            }
             this.inputElement.setAttribute('aria-expanded', 'false');
         }
         attributes(this.targetElement(), this.getAriaAttributes());
@@ -3172,7 +3282,8 @@ var DropDownList = /** @class */ (function (_super) {
         }
         else if (this.element.tagName === 'SELECT' && this.element.options[0]) {
             var selectElement = this.element;
-            this.value = this.allowObjectBinding ? this.getDataByValue(selectElement.options[selectElement.selectedIndex].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();
         }
@@ -3210,7 +3321,8 @@ var DropDownList = /** @class */ (function (_super) {
             this.updateVirtualizationProperties(this.itemCount, this.allowFiltering);
         }
         this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
-        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.viewPortInfo.startIndex > 0 ? this.viewPortInfo.endIndex : this.itemCount;
+        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.viewPortInfo.startIndex > 0 ?
+            this.viewPortInfo.endIndex : this.itemCount;
     };
     DropDownList.prototype.getListHeight = function () {
         var listParent = this.createElement('div', {
@@ -3224,7 +3336,8 @@ var DropDownList = /** @class */ (function (_super) {
         listParent.appendChild(item);
         document.body.appendChild(listParent);
         this.virtualListHeight = listParent.getBoundingClientRect().height;
-        var listItemHeight = Math.ceil(item.getBoundingClientRect().height);
+        var listItemHeight = Math.ceil(item.getBoundingClientRect().height) +
+            parseInt(window.getComputedStyle(item).marginBottom, 10);
         listParent.remove();
         return listItemHeight;
     };
@@ -3339,7 +3452,9 @@ 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))) || ((props.dataSource instanceof DataManager) || (!isNullOrUndefined(props) && Array.isArray(props.dataSource) && !isNullOrUndefined(oldProps) && Array.isArray(oldProps.dataSource) && props.dataSource.length !== oldProps.dataSource.length))) {
+            || (!(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);
         }
@@ -3348,16 +3463,17 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.checkCustomValue = function () {
-        var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : 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();
         var value = this.allowObjectBinding ? this.itemData : dataItem.value;
         var index = isNullOrUndefined(value) ? null : this.index;
-        if (isNullOrUndefined(index) && (currentValue == value)) {
-            this.setProperties({ 'text': dataItem.text, 'value': value });
+        if ((isNullOrUndefined(index) && (currentValue === value)) || this.isAngular) {
+            this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });
         }
         else {
-            this.setProperties({ 'text': dataItem.text, 'index': index, 'value': value });
+            this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'index': index, 'value': value });
         }
     };
     DropDownList.prototype.updateInputFields = function () {
@@ -3375,8 +3491,8 @@ var DropDownList = /** @class */ (function (_super) {
      */
     DropDownList.prototype.onPropertyChanged = function (newProp, oldProp) {
         var _this = this;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        if (!isNullOrUndefined(newProp.dataSource) && !this.isTouched && (isNullOrUndefined(newProp.value) && isNullOrUndefined(newProp.index)) && !isNullOrUndefined(this.preselectedIndex) && !isNullOrUndefined(this.index)) {
+        if (!isNullOrUndefined(newProp.dataSource) && !this.isTouched && (isNullOrUndefined(newProp.value) &&
+            isNullOrUndefined(newProp.index)) && !isNullOrUndefined(this.preselectedIndex) && !isNullOrUndefined(this.index)) {
             newProp.index = this.index;
         }
         if (!isNullOrUndefined(newProp.value) || !isNullOrUndefined(newProp.index)) {
@@ -3436,8 +3552,8 @@ var DropDownList = /** @class */ (function (_super) {
                     if (this_1.enableVirtualization) {
                         this_1.updateValues();
                         this_1.updateInputFields();
-                        this_1.notify("setCurrentViewDataAsync", {
-                            module: "VirtualScroll",
+                        this_1.notify('setCurrentViewDataAsync', {
+                            module: 'VirtualScroll'
                         });
                         break;
                     }
@@ -3487,14 +3603,15 @@ 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])) {
+                    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();
-                        this_1.notify("setCurrentViewDataAsync", {
-                            module: "VirtualScroll",
+                        this_1.notify('setCurrentViewDataAsync', {
+                            module: 'VirtualScroll'
                         });
                         this_1.preventChange = this_1.isAngular && this_1.preventChange ? !this_1.preventChange : this_1.preventChange;
                         break;
@@ -3507,7 +3624,8 @@ var DropDownList = /** @class */ (function (_super) {
                         this_1.renderList();
                     }
                     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 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 &&
@@ -3518,8 +3636,9 @@ 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 = '';
-                                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)))
+                                var value_3 = 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_3)))
                                     .then(function (e) {
                                     if (e.result.length > 0) {
                                         _this.addItem(e.result, listLength_2);
@@ -3597,7 +3716,8 @@ var DropDownList = /** @class */ (function (_super) {
                 case 'floatLabelType':
                     Input.removeFloating(this_1.inputWrapper);
                     Input.addFloating(this_1.inputElement, newProp.floatLabelType, this_1.placeholder, this_1.createElement);
-                    if (!isNullOrUndefined(this_1.inputWrapper.buttons[0]) && this_1.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0] && this_1.floatLabelType !== 'Never') {
+                    if (!isNullOrUndefined(this_1.inputWrapper.buttons[0]) &&
+                        this_1.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0] && this_1.floatLabelType !== 'Never') {
                         this_1.inputWrapper.container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
                     }
                     break;
@@ -3643,7 +3763,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;
+                var value = _this.allowObjectBinding && !isNullOrUndefined(newProp) ?
+                    getValue(fields, newProp) : newProp;
                 li = _this.getElementByValue(newProp);
                 if (!_this.checkValidLi(li)) {
                     _this.setOldValue(oldProp);
@@ -3671,7 +3792,7 @@ var DropDownList = /** @class */ (function (_super) {
             removeClass([this.inputWrapper.container], ['e-readonly']);
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-empty-function
     DropDownList.prototype.setInputValue = function (newProp, oldProp) {
     };
     DropDownList.prototype.setCssClass = function (newClass, oldClass) {
@@ -3737,18 +3858,19 @@ var DropDownList = /** @class */ (function (_super) {
                 this.removeHover();
             }
             if (!this.beforePopupOpen) {
-                this.notify("setCurrentViewDataAsync", {
-                    module: "VirtualScroll",
+                this.notify('setCurrentViewDataAsync', {
+                    module: 'VirtualScroll'
                 });
             }
         }
         if (this.beforePopupOpen) {
             this.invokeRenderPopup(e);
         }
-        if (this.enableVirtualization && !this.allowFiltering && this.selectedValueInfo != null && this.selectedValueInfo.startIndex > 0 && this.value != null) {
-            this.notify("dataProcessAsync", {
-                module: "VirtualScroll",
-                isOpen: true,
+        if (this.enableVirtualization && !this.allowFiltering && this.selectedValueInfo != null &&
+            this.selectedValueInfo.startIndex > 0 && this.value != null) {
+            this.notify('dataProcessAsync', {
+                module: 'VirtualScroll',
+                isOpen: true
             });
         }
     };
@@ -3996,7 +4118,7 @@ var DropDownList = /** @class */ (function (_super) {
             element: this.inputElement,
             floatLabelType: this.floatLabelType,
             properties: this.properties,
-            buttons: this.inputWrapper.container.querySelectorAll('.e-input-group-icon')[0],
+            buttons: this.inputWrapper.container.querySelectorAll('.e-input-group-icon')[0]
         }, this.clearButton);
         this.clearButton = null;
         this.inputElement = null;
@@ -4078,6 +4200,9 @@ var DropDownList = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], DropDownList.prototype, "allowFiltering", void 0);
+    __decorate([
+        Property(true)
+    ], DropDownList.prototype, "isDeviceFullScreen", void 0);
     __decorate([
         Property(false)
     ], DropDownList.prototype, "readonly", void 0);