@syncfusion/ej2-dropdowns 26.2.11 → 27.1.48

package/src/multi-select/multi-select.js

@@ -108,9 +108,6 @@ var MultiSelect = /** @class */ (function (_super) {
         _this.isSelectAllLoop = false;
         _this.scrollFocusStatus = false;
         _this.keyDownStatus = false;
-        _this.IsScrollerAtEnd = function () {
-            return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
-        };
         return _this;
     }
     MultiSelect.prototype.enableRTL = function (state) {
@@ -267,7 +264,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (_this.popupObj) {
                     _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
                 }
-                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
+                attributes(_this.inputElement, {
+                    'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id
+                });
                 _this.updateAriaActiveDescendant();
                 if (_this.isFirstClick) {
                     if (!_this.enableVirtualization) {
@@ -336,7 +335,9 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.setScrollPosition = function () {
         if (((!this.hideSelectedItem && this.mode !== 'CheckBox') || (this.mode === 'CheckBox' && !this.enableSelectionOrder)) &&
             (!isNullOrUndefined(this.value) && (this.value.length > 0))) {
-            var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+            var value = this.allowObjectBinding
+                ? getValue((this.fields.value) ? this.fields.value : '', this.value[this.value.length - 1])
+                : this.value[this.value.length - 1];
             var valueEle = this.findListElement((this.hideSelectedItem ? this.ulElement : this.list), 'li', 'data-value', value);
             if (!isNullOrUndefined(valueEle)) {
                 this.scrollBottom(valueEle);
@@ -393,7 +394,9 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         else {
             if (this.value && this.value.length) {
-                var value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+                var value = this.allowObjectBinding
+                    ? getValue((this.fields.value) ? this.fields.value : '', this.value[this.value.length - 1])
+                    : this.value[this.value.length - 1];
                 Search(value, this.liCollections, 'StartsWith', this.ignoreCase);
             }
             else {
@@ -402,7 +405,8 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         if (activeElement && activeElement.item !== null) {
             this.addListFocus(activeElement.item);
-            if (((this.allowCustomValue || this.allowFiltering) && this.isPopupOpen() && this.closePopupOnSelect && !this.enableVirtualization) || this.closePopupOnSelect && !this.enableVirtualization) {
+            if (((this.allowCustomValue || this.allowFiltering) && this.isPopupOpen() &&
+                this.closePopupOnSelect && !this.enableVirtualization) || this.closePopupOnSelect && !this.enableVirtualization) {
                 this.scrollBottom(activeElement.item, activeElement.index);
             }
         }
@@ -417,7 +421,12 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.updateListARIA = function () {
         if (!isNullOrUndefined(this.ulElement)) {
-            attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'list' });
+            attributes(this.ulElement, {
+                'id': this.element.id + '_options',
+                'role': 'listbox',
+                'aria-hidden': 'false',
+                'aria-label': 'list'
+            });
         }
         var disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;
         if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {
@@ -446,7 +455,8 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.value)) {
             this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
         }
-        var customValue = this.allowObjectBinding ? this.getDataByValue(this.getFormattedValue(value)) : this.getFormattedValue(value);
+        var customValue = this.allowObjectBinding ?
+            this.getDataByValue(this.getFormattedValue(value)) : this.getFormattedValue(value);
         if (this.allowCustomValue && (value !== 'false' && customValue === false || (!isNullOrUndefined(customValue) &&
             customValue.toString() === 'NaN'))) {
             customValue = value;
@@ -478,7 +488,8 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.enableVirtualization && valuecheck) {
             if (isCheckbox) {
                 for (var i = 0; i < valuecheck.length; i++) {
-                    var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', valuecheck[i]) : valuecheck[i];
+                    var value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                        this.fields.value : '', valuecheck[i]) : valuecheck[i];
                     if (i === 0) {
                         predicate = new Predicate(field, 'equal', (value));
                     }
@@ -490,7 +501,8 @@ var MultiSelect = /** @class */ (function (_super) {
             }
             else {
                 for (var i = 0; i < valuecheck.length; i++) {
-                    var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', valuecheck[i]) : valuecheck[i];
+                    var value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                        this.fields.value : '', valuecheck[i]) : valuecheck[i];
                     if (i === 0) {
                         predicate = new Predicate(field, 'notequal', (value));
                     }
@@ -526,13 +538,17 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         /* eslint-enable @typescript-eslint/no-unused-vars */
         _super.prototype.onActionComplete.call(this, ulElement, list, e);
-        this.skeletonCount = this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2) ? 0 : this.skeletonCount;
+        this.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);
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
-        if (!isNullOrUndefined(this.value) && !this.allowCustomValue && !this.enableVirtualization && this.listData && this.listData.length > 0) {
+        if (!isNullOrUndefined(this.value) && !this.allowCustomValue && !this.enableVirtualization &&
+            this.listData && this.listData.length > 0) {
             for (var i = 0; i < this.value.length; i++) {
-                var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', proxy.value[i]) : proxy.value[i];
+                var value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                    this.fields.value : '', proxy.value[i]) : proxy.value[i];
                 var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', value);
                 if (!checkEle && !(this.dataSource instanceof DataManager)) {
                     this.value.splice(i, 1);
@@ -551,7 +567,8 @@ var MultiSelect = /** @class */ (function (_super) {
         else {
             this.updateActionList(ulElement, list, e);
         }
-        if (this.dataSource instanceof DataManager && this.allowCustomValue && !this.isCustomRendered && this.inputElement.value && this.inputElement.value !== '') {
+        if (this.dataSource instanceof DataManager && this.allowCustomValue && !this.isCustomRendered &&
+            this.inputElement.value && this.inputElement.value !== '') {
             var query = new Query();
             query = this.allowFiltering ? query.where(this.fields.text, 'startswith', this.inputElement.value, this.ignoreCase, this.ignoreAccent) : query;
             this.checkForCustomValue(query, this.fields);
@@ -586,7 +603,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 return;
             }
         }
-        if (this.value && this.value.length && ((this.mode !== 'CheckBox' && !isNullOrUndefined(this.inputElement) && this.inputElement.value.trim() !== '') ||
+        if (this.value && this.value.length && ((this.mode !== 'CheckBox' && !isNullOrUndefined(this.inputElement) &&
+            this.inputElement.value.trim() !== '') ||
             this.mode === 'CheckBox' || ((this.keyCode === 8 || this.keyCode === 46) && this.allowFiltering &&
             this.allowCustomValue && this.dataSource instanceof DataManager && this.inputElement.value === ''))) {
             this.refreshSelection();
@@ -627,7 +645,8 @@ var MultiSelect = /** @class */ (function (_super) {
             dropDownBaseClasses.selected;
         if (!isNullOrUndefined(this.value)) {
             for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
-                value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[index]) : this.value[index];
+                value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[index]) :
+                    this.value[index];
                 element = this.findListElement(this.list, 'li', 'data-value', value);
                 if (element) {
                     addClass([element], className);
@@ -732,10 +751,12 @@ var MultiSelect = /** @class */ (function (_super) {
             searchActiveCount = searchActiveCount - groupItemLength;
         }
         if ((!this.enableVirtualization && ((searchCount === searchActiveCount || searchActiveCount === this.maximumSelectionLength)
-            && (this.mode === 'CheckBox' && this.showSelectAll))) || (this.enableVirtualization && this.mode === 'CheckBox' && this.showSelectAll && this.virtualSelectAll && this.value && this.value.length === this.totalItemCount)) {
+            && (this.mode === 'CheckBox' && this.showSelectAll))) || (this.enableVirtualization && this.mode === 'CheckBox' &&
+            this.showSelectAll && this.virtualSelectAll && this.value && this.value.length === this.totalItemCount)) {
             this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'check' });
         }
-        else if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll) && ((!this.enableVirtualization) || (this.enableVirtualization && !this.virtualSelectAll))) {
+        else if ((searchCount !== searchActiveCount) && (this.mode === 'CheckBox' && this.showSelectAll) &&
+            ((!this.enableVirtualization) || (this.enableVirtualization && !this.virtualSelectAll))) {
             this.notify('checkSelectAll', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', value: 'uncheck' });
         }
         if (this.enableGroupCheckBox && this.fields.groupBy && !this.enableSelectionOrder) {
@@ -804,27 +825,30 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
         if (this.filterAction) {
-            if ((this.targetElement() !== null && !this.enableVirtualization) || (this.enableVirtualization && this.targetElement() !== null && this.targetElement().trim() !== '')) {
+            if ((this.targetElement() !== null && !this.enableVirtualization) || (this.enableVirtualization &&
+                this.targetElement() !== null && this.targetElement().trim() !== '')) {
                 var dataType = this.typeOfData(this.dataSource).typeof;
                 if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                     filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
-                else if ((this.enableVirtualization && this.targetElement() !== "") || !this.enableVirtualization) {
+                else if ((this.enableVirtualization && this.targetElement() !== '') || !this.enableVirtualization) {
                     var fields = this.fields;
                     filterQuery.where(!isNullOrUndefined(fields.text) ? fields.text : '', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
             }
-            if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && !this.virtualSelectAll) {
+            if (this.enableVirtualization && (this.viewPortInfo.endIndex !== 0) && !this.virtualSelectAll) {
                 return this.virtualFilterQuery(filterQuery);
             }
             return filterQuery;
         }
         else {
-            if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && !this.virtualSelectAll) {
+            if (this.enableVirtualization && (this.viewPortInfo.endIndex !== 0) && !this.virtualSelectAll) {
                 return this.virtualFilterQuery(filterQuery);
             }
             if (this.virtualSelectAll) {
-                return query ? query.take(this.maximumSelectionLength).requiresCount() : this.query ? this.query.take(this.maximumSelectionLength).requiresCount() : new Query().take(this.maximumSelectionLength).requiresCount();
+                return query ? query.take(this.maximumSelectionLength).requiresCount() : this.query ?
+                    this.query.take(this.maximumSelectionLength).requiresCount() :
+                    new Query().take(this.maximumSelectionLength).requiresCount();
             }
             return query ? query : this.query ? this.query : new Query();
         }
@@ -835,7 +859,9 @@ var MultiSelect = /** @class */ (function (_super) {
         var isSkip = true;
         var isTake = true;
         for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
-            if (this.getModuleName() === 'multiselect' && ((filterQuery.queries[queryElements].e && filterQuery.queries[queryElements].e.condition == 'or') || (filterQuery.queries[queryElements].e && filterQuery.queries[queryElements].e.operator == 'equal'))) {
+            if (this.getModuleName() === 'multiselect' && ((filterQuery.queries[queryElements].e &&
+                filterQuery.queries[queryElements].e.condition === 'or') || (filterQuery.queries[queryElements].e &&
+                filterQuery.queries[queryElements].e.operator === 'equal'))) {
                 isReOrder = false;
             }
             if (filterQuery.queries[queryElements].fn === 'onSkip') {
@@ -849,21 +875,24 @@ var MultiSelect = /** @class */ (function (_super) {
         if (filterQuery && filterQuery.queries.length > 0) {
             for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
                 if (filterQuery.queries[queryElements].fn === 'onTake') {
-                    queryTakeValue = takeValue <= filterQuery.queries[queryElements].e.nos ? filterQuery.queries[queryElements].e.nos : takeValue;
+                    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 = 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;
+                    queryTakeValue = takeValue <= this.query.queries[queryElements].e.nos ?
+                        this.query.queries[queryElements].e.nos : takeValue;
                 }
             }
         }
         if (filterQuery && filterQuery.queries.length > 0) {
             for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
                 if (filterQuery.queries[queryElements].fn === 'onTake') {
-                    queryTakeValue = filterQuery.queries[queryElements].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements].e.nos;
+                    queryTakeValue = filterQuery.queries[queryElements].e.nos <= queryTakeValue ?
+                        queryTakeValue : filterQuery.queries[queryElements].e.nos;
                     filterQuery.queries.splice(queryElements, 1);
                     --queryElements;
                 }
@@ -896,10 +925,11 @@ var MultiSelect = /** @class */ (function (_super) {
         this.isDataFetched = false;
         var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
         if (this.targetElement().trim() === '') {
-            var list = this.enableVirtualization ? this.list.cloneNode(true) : this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
+            var list = this.enableVirtualization ? this.list.cloneNode(true) : this.mainList.cloneNode ?
+                this.mainList.cloneNode(true) : this.mainList;
             if (this.backCommand) {
                 this.remoteCustomValue = false;
-                if (this.allowCustomValue && list.querySelectorAll('li').length == 0 && this.mainData.length > 0) {
+                if (this.allowCustomValue && list.querySelectorAll('li').length === 0 && this.mainData.length > 0) {
                     this.mainData = [];
                 }
                 if (this.enableVirtualization) {
@@ -907,7 +937,8 @@ var MultiSelect = /** @class */ (function (_super) {
                     this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
                     this.resetList(dataSource, fields, query);
                     if (this.mode !== 'CheckBox') {
-                        this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+                        this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length :
+                            this.totalItemCount;
                     }
                     this.UpdateSkeleton();
                     if ((isNoData || this.allowCustomValue) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
@@ -921,7 +952,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             var virualElement = this.createElement('div', {
                                 id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
                             });
-                            document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                            document.getElementsByClassName('e-multi-select-list-wrapper')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
                         }
                     }
                 }
@@ -943,7 +974,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.virtualListInfo = null;
             }
             this.resetList(dataSource, fields, query);
-            if (this.enableVirtualization && (isNoData || this.allowCustomValue) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+            if (this.enableVirtualization && (isNoData || this.allowCustomValue) &&
+                !this.list.classList.contains(dropDownBaseClasses.noData)) {
                 if (!this.list.querySelector('.e-virtual-ddl-content')) {
                     this.list.appendChild(this.createElement('div', {
                         className: 'e-virtual-ddl-content',
@@ -957,7 +989,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     var virualElement = this.createElement('div', {
                         id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
                     });
-                    document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
+                    document.getElementsByClassName('e-multi-select-list-wrapper')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
                 }
             }
             if (this.allowCustomValue) {
@@ -997,16 +1029,19 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
                 var emptyObject_1 = {};
                 if (this.allowObjectBinding) {
-                    var keys = this.listData && this.listData.length > 0 ? Object.keys(this.listData[0]) : this.firstItem ? Object.keys(this.firstItem) : Object.keys(dataItem_1);
+                    var keys = this.listData && this.listData.length > 0 ? Object.keys(this.listData[0]) : this.firstItem ?
+                        Object.keys(this.firstItem) : Object.keys(dataItem_1);
                     // Create an empty object with predefined keys
                     keys.forEach(function (key) {
-                        emptyObject_1[key] = ((key === fields.value) || (key === fields.text)) ? getValue(fields.value, dataItem_1) : null;
+                        emptyObject_1[key] = ((key === fields.value) || (key === fields.text)) ?
+                            getValue(fields.value, dataItem_1) : null;
                     });
                 }
                 dataItem_1 = this.allowObjectBinding ? emptyObject_1 : dataItem_1;
                 if (this.enableVirtualization) {
                     this.virtualCustomData = dataItem_1;
-                    var tempData = this.dataSource instanceof DataManager ? JSON.parse(JSON.stringify(this.listData)) : JSON.parse(JSON.stringify(this.dataSource));
+                    var tempData = this.dataSource instanceof DataManager ?
+                        JSON.parse(JSON.stringify(this.listData)) : JSON.parse(JSON.stringify(this.dataSource));
                     var totalData = [];
                     if (this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {
                         totalData = tempData.concat(this.virtualCustomSelectData);
@@ -1018,7 +1053,8 @@ var MultiSelect = /** @class */ (function (_super) {
                     this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.itemCount;
                     this.resetList(tempData, field, query);
                     this.isCustomDataUpdated = false;
-                    this.totalItemCount = this.enableVirtualization && this.dataSource instanceof DataManager ? tempCount : this.totalItemCount;
+                    this.totalItemCount = this.enableVirtualization && this.dataSource instanceof DataManager ?
+                        tempCount : this.totalItemCount;
                 }
                 else {
                     if (this.dataSource instanceof DataManager && this.allowCustomValue && this.allowFiltering) {
@@ -1199,7 +1235,8 @@ var MultiSelect = /** @class */ (function (_super) {
         this.checkPlaceholderSize();
         Input.createSpanElement(this.overAllWrapper, this.createElement);
         this.calculateWidth();
-        if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
+        if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
+            this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
         }
     };
@@ -1207,12 +1244,13 @@ var MultiSelect = /** @class */ (function (_super) {
         var elementWidth;
         if (this.overAllWrapper) {
             if (!this.showDropDownIcon || this.overAllWrapper.querySelector('.' + 'e-label-top')) {
-                elementWidth = this.overAllWrapper.clientWidth - 2 * (parseInt(getComputedStyle(this.inputElement).paddingRight));
+                elementWidth = this.overAllWrapper.clientWidth - 2 * (parseInt(getComputedStyle(this.inputElement).paddingRight, 10));
             }
             else {
                 var downIconWidth = this.dropIcon.offsetWidth +
-                    parseInt(getComputedStyle(this.dropIcon).marginRight);
-                elementWidth = this.overAllWrapper.clientWidth - (downIconWidth + 2 * (parseInt(getComputedStyle(this.inputElement).paddingRight)));
+                    parseInt(getComputedStyle(this.dropIcon).marginRight, 10);
+                elementWidth = this.overAllWrapper.clientWidth -
+                    (downIconWidth + 2 * (parseInt(getComputedStyle(this.inputElement).paddingRight, 10)));
             }
             if (this.floatLabelType !== 'Never') {
                 Input.calculateWidth(elementWidth, this.overAllWrapper, this.getModuleName());
@@ -1297,11 +1335,14 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.pageUpSelection = function (steps, isVirtualKeyAction) {
-        var collection = this.list.querySelectorAll('li.'
-            + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
+        var collection = this.list.querySelectorAll('li.' + dropDownBaseClasses.li +
+            ':not(.' + HIDE_LIST + ')' +
+            ':not(.e-reorder-hide)');
         var previousItem = steps >= 0 ? collection[steps + 1] : collection[0];
         if (this.enableVirtualization && isVirtualKeyAction) {
-            previousItem = (this.liCollections.length >= steps && steps >= 0) ? this.liCollections[steps] : this.liCollections[this.skeletonCount];
+            previousItem = (this.liCollections.length >= steps && steps >= 0)
+                ? this.liCollections[steps]
+                : this.liCollections[this.skeletonCount];
         }
         if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {
             previousItem = this.liCollections[this.skeletonCount];
@@ -1312,7 +1353,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.addListFocus(previousItem);
                 this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
             }
-            else if (this.viewPortInfo.startIndex == 0) {
+            else if (this.viewPortInfo.startIndex === 0) {
                 this.isKeyBoardAction = true;
                 this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
             }
@@ -1325,7 +1366,6 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.pageDownSelection = function (steps, isVirtualKeyAction) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         var list = this.getItems();
         var collection = this.list.querySelectorAll('li.'
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
@@ -1407,7 +1447,8 @@ var MultiSelect = /** @class */ (function (_super) {
         var size = 5;
         if (this.placeholder) {
             var codePoint = this.placeholder.charCodeAt(0);
-            var sizeMultiplier = (0xAC00 <= codePoint && codePoint <= 0xD7AF) ? 1.5 : (0x4E00 <= codePoint && codePoint <= 0x9FFF) ? 2 : 1;
+            var sizeMultiplier = (0xAC00 <= codePoint && codePoint <= 0xD7AF) ? 1.5
+                : (0x4E00 <= codePoint && codePoint <= 0x9FFF) ? 2 : 1;
             size = size > this.inputElement.placeholder.length ? size : this.inputElement.placeholder.length * sizeMultiplier;
         }
         if (this.inputElement.value.length > size) {
@@ -1453,9 +1494,11 @@ var MultiSelect = /** @class */ (function (_super) {
             this.inputElement.setAttribute('aria-activedescendant', focusedItem.id);
             if (this.allowFiltering) {
                 var filterInput = this.popupWrapper.querySelector('.' + FILTERINPUT);
-                filterInput && filterInput.setAttribute('aria-activedescendant', focusedItem.id);
+                if (filterInput) {
+                    filterInput.setAttribute('aria-activedescendant', focusedItem.id);
+                }
             }
-            else if (this.mode == "CheckBox") {
+            else if (this.mode === 'CheckBox') {
                 this.overAllWrapper.setAttribute('aria-activedescendant', focusedItem.id);
             }
         }
@@ -1472,7 +1515,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
             else {
-                if (this.enableVirtualization && ((!this.value && this.viewPortInfo.endIndex !== this.totalItemCount) || (this.value && this.value.length > 0 && this.viewPortInfo.endIndex !== this.totalItemCount + this.value.length))) {
+                if (this.enableVirtualization && ((!this.value && this.viewPortInfo.endIndex !== this.totalItemCount) ||
+                    (this.value && this.value.length > 0 && this.viewPortInfo.endIndex !== this.totalItemCount + this.value.length))) {
                     this.viewPortInfo.startIndex = this.totalItemCount - this.itemCount;
                     this.viewPortInfo.endIndex = this.totalItemCount;
                     this.updateVirtualItemIndex();
@@ -1507,7 +1551,8 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.updateSelectionList = function () {
         if (!isNullOrUndefined(this.value) && this.value.length) {
             for (var index = 0; index < this.value.length; index++) {
-                var value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
+                var value = this.allowObjectBinding ?
+                    getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
                 var selectedItem = this.getElementByValue(value);
                 if (selectedItem && !selectedItem.classList.contains(dropDownBaseClasses.selected)) {
                     selectedItem.classList.add('e-active');
@@ -1689,7 +1734,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         }
         var focuseElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);
-        this.focusFirstListItem = !isNullOrUndefined(this.liCollections[0]) ? this.liCollections[0].classList.contains('e-item-focus') : false;
+        this.focusFirstListItem = !isNullOrUndefined(this.liCollections[0]) ? this.liCollections[0].classList.contains('e-item-focus') :
+            false;
         var index = Array.prototype.slice.call(list).indexOf(focuseElem);
         if (index <= 0 && (this.mode === 'CheckBox' && this.allowFiltering)) {
             this.keyAction = false;
@@ -1746,7 +1792,9 @@ var MultiSelect = /** @class */ (function (_super) {
         else if (e.keyCode === 8 && this.mode === 'Delimiter') {
             if (this.value && this.value.length) {
                 e.preventDefault();
-                var temp = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
+                var temp = this.allowObjectBinding ?
+                    getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) :
+                    this.value[this.value.length - 1];
                 this.removeValue(this.value[this.value.length - 1], e);
                 this.updateDelimeter(this.delimiterChar, e);
                 this.focusAtLastListItem(temp);
@@ -1789,19 +1837,27 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.scrollBottom = function (selectedLI, activeIndex, isInitialSelection, keyCode) {
         if (isInitialSelection === void 0) { isInitialSelection = false; }
         if (keyCode === void 0) { keyCode = null; }
-        if ((!isNullOrUndefined(selectedLI) && selectedLI.classList.contains('e-virtual-list')) || (this.enableVirtualization && isNullOrUndefined(selectedLI))) {
+        if ((!isNullOrUndefined(selectedLI) && selectedLI.classList.contains('e-virtual-list')) ||
+            (this.enableVirtualization && isNullOrUndefined(selectedLI))) {
             selectedLI = this.liCollections[this.skeletonCount];
         }
+        var selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?
+            parseInt(window.getComputedStyle(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 ? selectedLI.offsetTop + (this.virtualListInfo.startIndex * selectedLI.offsetHeight) : 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 ?
+            selectedLI.offsetTop + (this.virtualListInfo.startIndex * (selectedLI.offsetHeight + selectedListMargin))
+            : selectedLI.offsetTop;
         var currentOffset = this.list.offsetHeight;
-        var nextBottom = selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) + selectedLI.offsetHeight - this.list.scrollTop;
+        var nextBottom = selectedLiOffsetTop - (virtualListCount * (selectedLI.offsetHeight + selectedListMargin)) +
+            (selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop;
         var nextOffset = this.list.scrollTop + nextBottom - currentOffset;
         var isScrollerCHanged = false;
         var isScrollTopChanged = false;
-        var boxRange = selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) + selectedLI.offsetHeight - this.list.scrollTop;
+        var boxRange = selectedLiOffsetTop - (virtualListCount * (selectedLI.offsetHeight + selectedListMargin)) +
+            (selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop;
         boxRange = this.fields.groupBy && !isNullOrUndefined(this.fixedHeaderElement) ?
             boxRange - this.fixedHeaderElement.offsetHeight : boxRange;
         if (activeIndex === 0 && !this.enableVirtualization) {
@@ -1809,23 +1865,24 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         else if (nextBottom > currentOffset || !(boxRange > 0 && this.list.offsetHeight > boxRange)) {
             var currentElementValue = selectedLI ? selectedLI.getAttribute('data-value') : null;
-            var liCount = keyCode == 34 ? this.getPageCount() - 1 : 1;
+            var liCount = keyCode === 34 ? this.getPageCount() - 1 : 1;
             if (!this.enableVirtualization || this.isKeyBoardAction || isInitialSelection) {
-                if (this.isKeyBoardAction && this.enableVirtualization && lastElementValue && currentElementValue === lastElementValue && keyCode != 35 && !this.isVirtualScrolling) {
+                if (this.isKeyBoardAction && this.enableVirtualization && lastElementValue &&
+                    currentElementValue === lastElementValue && keyCode !== 35 && !this.isVirtualScrolling) {
                     this.isPreventKeyAction = true;
-                    this.list.scrollTop += selectedLI.offsetHeight * liCount;
-                    this.isPreventKeyAction = this.IsScrollerAtEnd() ? false : this.isPreventKeyAction;
+                    this.list.scrollTop += (selectedLI.offsetHeight + selectedListMargin) * liCount;
+                    this.isPreventKeyAction = this.isScrollerAtEnd() ? false : this.isPreventKeyAction;
                     this.isKeyBoardAction = false;
                     this.isPreventScrollAction = false;
                 }
-                else if (this.enableVirtualization && keyCode == 35) {
+                else if (this.enableVirtualization && keyCode === 35) {
                     this.isPreventKeyAction = false;
                     this.isKeyBoardAction = false;
                     this.isPreventScrollAction = false;
                     this.list.scrollTop = this.list.scrollHeight;
                 }
                 else {
-                    if (keyCode == 34 && this.enableVirtualization && !this.isVirtualScrolling) {
+                    if (keyCode === 34 && this.enableVirtualization && !this.isVirtualScrolling) {
                         this.isPreventKeyAction = false;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
@@ -1834,7 +1891,8 @@ var MultiSelect = /** @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;
@@ -1844,35 +1902,43 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex, keyCode) {
         if (keyCode === void 0) { keyCode = null; }
         var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
-        var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ? selectedLI.offsetTop + (this.virtualListInfo.startIndex * selectedLI.offsetHeight) : selectedLI.offsetTop;
-        var nextOffset = selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) - this.list.scrollTop;
-        var firstElementValue = this.list.querySelector('li.e-list-item:not(.e-virtual-list)') ? this.list.querySelector('li.e-list-item:not(.e-virtual-list)').getAttribute('data-value') : null;
+        var selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?
+            parseInt(window.getComputedStyle(selectedLI).marginBottom, 10) : 0;
+        var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ?
+            selectedLI.offsetTop + (this.virtualListInfo.startIndex * (selectedLI.offsetHeight + selectedListMargin)) :
+            selectedLI.offsetTop;
+        var nextOffset = selectedLiOffsetTop - (virtualListCount * (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 && !isUndefined(this.fixedHeaderElement) ?
             nextOffset - this.fixedHeaderElement.offsetHeight : nextOffset;
-        var boxRange = (selectedLiOffsetTop - (virtualListCount * selectedLI.offsetHeight) + selectedLI.offsetHeight - this.list.scrollTop);
+        var boxRange = (selectedLiOffsetTop - (virtualListCount * (selectedLI.offsetHeight + selectedListMargin)) +
+            (selectedLI.offsetHeight + selectedListMargin) - this.list.scrollTop);
         var isPageUpKeyAction = this.enableVirtualization && this.getModuleName() === 'autocomplete' && nextOffset <= 0;
         if (activeIndex === 0 && !this.enableVirtualization) {
             this.list.scrollTop = 0;
         }
         else if (nextOffset < 0 || isPageUpKeyAction) {
             var currentElementValue = selectedLI ? selectedLI.getAttribute('data-value') : null;
-            var liCount = keyCode == 33 ? this.getPageCount() - 2 : 1;
-            if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue && currentElementValue === firstElementValue && keyCode != 36 && !this.isVirtualScrolling) {
+            var liCount = keyCode === 33 ? this.getPageCount() - 2 : 1;
+            if (this.enableVirtualization && this.isKeyBoardAction && firstElementValue &&
+                currentElementValue === firstElementValue && keyCode !== 36 && !this.isVirtualScrolling) {
                 this.isUpwardScrolling = true;
                 this.isPreventKeyAction = true;
                 this.isKeyBoardAction = false;
-                this.list.scrollTop -= selectedLI.offsetHeight * liCount;
-                this.isPreventKeyAction = this.list.scrollTop != 0 ? this.isPreventKeyAction : false;
+                this.list.scrollTop -= (selectedLI.offsetHeight + selectedListMargin) * liCount;
+                this.isPreventKeyAction = this.list.scrollTop !== 0 ? this.isPreventKeyAction : false;
                 this.isPreventScrollAction = false;
             }
-            else if (this.enableVirtualization && keyCode == 36) {
+            else if (this.enableVirtualization && keyCode === 36) {
                 this.isPreventScrollAction = false;
                 this.isPreventKeyAction = true;
                 this.isKeyBoardAction = false;
                 this.list.scrollTo(0, 0);
             }
             else {
-                if (keyCode == 33 && this.enableVirtualization && !this.isVirtualScrolling) {
+                if (keyCode === 33 && this.enableVirtualization && !this.isVirtualScrolling) {
                     this.isPreventKeyAction = false;
                     this.isKeyBoardAction = false;
                     this.isPreventScrollAction = false;
@@ -1885,6 +1951,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.fixedHeaderElement.offsetHeight : 0);
         }
     };
+    MultiSelect.prototype.isScrollerAtEnd = function () {
+        return this.list && this.list.scrollTop + this.list.clientHeight >= this.list.scrollHeight;
+    };
     MultiSelect.prototype.selectListByKey = function (e) {
         var li = this.list.querySelector('li.' + dropDownBaseClasses.focus);
         var limit = this.value && this.value.length ? this.value.length : 0;
@@ -1969,7 +2038,8 @@ var MultiSelect = /** @class */ (function (_super) {
             || this.allowCustomValue) && this.mainList && this.listData) {
             var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
             if (this.enableVirtualization) {
-                if (this.allowCustomValue && this.virtualCustomData && data == null && this.virtualCustomData && this.viewPortInfo && this.viewPortInfo.startIndex === 0 && this.viewPortInfo.endIndex === this.itemCount) {
+                if (this.allowCustomValue && this.virtualCustomData && data == null && this.virtualCustomData &&
+                    this.viewPortInfo && this.viewPortInfo.startIndex === 0 && this.viewPortInfo.endIndex === this.itemCount) {
                     this.virtualCustomData = null;
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this.renderItems(this.mainData, this.fields);
@@ -2002,7 +2072,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.removeChipSelection();
                 this.addChipSelection(temp, e);
             }
-            var currentChip = this.allowObjectBinding ? this.getDataByValue(this.getFormattedValue(selectedElem.getAttribute('data-value'))) : selectedElem.getAttribute('data-value');
+            var currentChip = this.allowObjectBinding ?
+                this.getDataByValue(this.getFormattedValue(selectedElem.getAttribute('data-value'))) :
+                selectedElem.getAttribute('data-value');
             this.removeValue(currentChip, e);
             this.makeTextBoxEmpty();
         }
@@ -2026,7 +2098,9 @@ var MultiSelect = /** @class */ (function (_super) {
         var targetElement = e.target;
         var filterInputClassName = targetElement.className;
         var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-        if ((filterInputClassName === 'e-input-filter e-input' || filterInputClassName === 'e-input-group e-control-wrapper e-input-focus') && selectAllParent.classList.contains('e-item-focus')) {
+        if ((filterInputClassName === 'e-input-filter e-input' ||
+            filterInputClassName === 'e-input-group e-control-wrapper e-input-focus') &&
+            selectAllParent.classList.contains('e-item-focus')) {
             selectAllParent.classList.remove('e-item-focus');
         }
     };
@@ -2046,7 +2120,9 @@ var MultiSelect = /** @class */ (function (_super) {
             }
             var temp = -1;
             var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-            if (this.mode === 'CheckBox' && this.showSelectAll && position == 1 && !isNullOrUndefined(selectAllParent) && !selectAllParent.classList.contains('e-item-focus') && this.list.getElementsByClassName('e-item-focus').length == 0 && this.liCollections.length > 1) {
+            if (this.mode === 'CheckBox' && this.showSelectAll && position === 1 && !isNullOrUndefined(selectAllParent) &&
+                !selectAllParent.classList.contains('e-item-focus') && this.list.getElementsByClassName('e-item-focus').length === 0 &&
+                this.liCollections.length > 1) {
                 if (!this.focusFirstListItem && selectAllParent.classList.contains('e-item-focus')) {
                     selectAllParent.classList.remove('e-item-focus');
                 }
@@ -2055,7 +2131,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
             else if (elements.length) {
-                if (this.mode === 'CheckBox' && this.showSelectAll && !isNullOrUndefined(selectAllParent && position == -1)) {
+                if (this.mode === 'CheckBox' && this.showSelectAll && !isNullOrUndefined(selectAllParent && position === -1)) {
                     if (!this.focusFirstListItem && selectAllParent.classList.contains('e-item-focus')) {
                         selectAllParent.classList.remove('e-item-focus');
                     }
@@ -2204,7 +2280,8 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.enabled && !this.readonly) {
             var element = e.target.parentElement;
             var customVal = element.getAttribute('data-value');
-            var value = this.allowObjectBinding ? this.getDataByValue(this.getFormattedValue(customVal)) : this.getFormattedValue(customVal);
+            var value = this.allowObjectBinding ?
+                this.getDataByValue(this.getFormattedValue(customVal)) : this.getFormattedValue(customVal);
             if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||
                 (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {
                 value = customVal;
@@ -2217,7 +2294,8 @@ var MultiSelect = /** @class */ (function (_super) {
             }
             this.removeValue(value, e);
             value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
-            if (isNullOrUndefined(this.findListElement(this.list, 'li', 'data-value', value)) && this.mainList && this.listData) {
+            if (isNullOrUndefined(this.findListElement(this.list, 'li', 'data-value', value)) &&
+                this.mainList && this.listData) {
                 var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
                 this.onActionComplete(list, this.mainData);
             }
@@ -2251,7 +2329,8 @@ var MultiSelect = /** @class */ (function (_super) {
         this.expandTextbox();
     };
     MultiSelect.prototype.removeAllItems = function (value, eve, isClearAll, element, mainElement) {
-        var index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) : this.value.indexOf(value);
+        var index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) :
+            this.value.indexOf(value);
         var removeVal = this.value.slice(0);
         removeVal.splice(index, 1);
         this.setProperties({ value: [].concat([], removeVal) }, true);
@@ -2266,7 +2345,8 @@ var MultiSelect = /** @class */ (function (_super) {
             e: this, index: index
         });
         this.invokeCheckboxSelection(element, eve, isClearAll);
-        var currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
+        var currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ?
+            this.fields.value : ''), value) : value;
         this.updateMainList(true, currentValue, mainElement);
         this.updateChipStatus();
     };
@@ -2284,9 +2364,11 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.removeValue = function (value, eve, length, isClearAll) {
         var _this = this;
-        var index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) : this.value.indexOf(this.getFormattedValue(value));
+        var index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) :
+            this.value.indexOf(this.getFormattedValue(value));
         if (index === -1 && this.allowCustomValue && !isNullOrUndefined(value)) {
-            index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) : this.value.indexOf(value.toString());
+            index = this.allowObjectBinding ? this.indexOfObjectInArray(value, this.value) :
+                this.value.indexOf(value.toString());
         }
         var targetEle = eve && eve.target;
         isClearAll = (isClearAll || targetEle && targetEle.classList.contains('e-close-hooker')) ? true : null;
@@ -2294,7 +2376,8 @@ var MultiSelect = /** @class */ (function (_super) {
             HIDE_LIST :
             dropDownBaseClasses.selected;
         if (index !== -1) {
-            var currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
+            var currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ?
+                this.fields.value : ''), value) : value;
             var element_1 = this.virtualSelectAll ? null : this.findListElement(this.list, 'li', 'data-value', currentValue);
             var val_1 = this.allowObjectBinding ? value : this.getDataByValue(value);
             var eventArgs = {
@@ -2309,6 +2392,9 @@ var MultiSelect = /** @class */ (function (_super) {
                     _this.removeIndex++;
                 }
                 else {
+                    _this.isRemoveSelection = true;
+                    _this.currentRemoveValue = _this.allowObjectBinding ? getValue(((_this.fields.value) ?
+                        _this.fields.value : ''), value) : value;
                     _this.virtualSelectAll = false;
                     var removeVal = _this.value.slice(0);
                     if (_this.enableVirtualization && isClearAll) {
@@ -2320,11 +2406,17 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     _this.setProperties({ value: [].concat([], removeVal) }, true);
                     if (_this.enableVirtualization) {
-                        var currentText = index == 0 && _this.text.split(_this.delimiterChar) && _this.text.split(_this.delimiterChar).length == 1 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index], '') : index == 0 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index] + _this.delimiterChar, '') : _this.text.replace(_this.delimiterChar + _this.text.split(_this.delimiterChar)[index], '');
+                        var currentText = index === 0 && _this.text.split(_this.delimiterChar) &&
+                            _this.text.split(_this.delimiterChar).length === 1 ?
+                            _this.text.replace(_this.text.split(_this.delimiterChar)[index], '') :
+                            index === 0 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index] +
+                                _this.delimiterChar, '') :
+                                _this.text.replace(_this.delimiterChar + _this.text.split(_this.delimiterChar)[index], '');
                         _this.setProperties({ text: currentText.toString() }, true);
                     }
                     if (element_1 !== null) {
-                        var currentValue_1 = _this.allowObjectBinding ? getValue(((_this.fields.value) ? _this.fields.value : ''), value) : value;
+                        var currentValue_1 = _this.allowObjectBinding ? getValue(((_this.fields.value) ?
+                            _this.fields.value : ''), value) : value;
                         var hideElement = _this.findListElement(_this.mainList, 'li', 'data-value', currentValue_1);
                         element_1.setAttribute('aria-selected', 'false');
                         removeClass([element_1], className);
@@ -2339,7 +2431,8 @@ var MultiSelect = /** @class */ (function (_super) {
                         });
                         _this.invokeCheckboxSelection(element_1, eve, isClearAll);
                     }
-                    var currentValue_2 = _this.allowObjectBinding ? getValue(((_this.fields.value) ? _this.fields.value : ''), value) : value;
+                    var currentValue_2 = _this.allowObjectBinding ? getValue(((_this.fields.value) ?
+                        _this.fields.value : ''), value) : value;
                     if (_this.hideSelectedItem && _this.fields.groupBy && element_1) {
                         _this.hideGroupItem(currentValue_2);
                     }
@@ -2388,8 +2481,8 @@ var MultiSelect = /** @class */ (function (_super) {
                         if (_this.hideSelectedItem && _this.value && Array.isArray(_this.value) && _this.value.length > 0) {
                             _this.totalItemsCount();
                         }
-                        _this.notify("setCurrentViewDataAsync", {
-                            module: "VirtualScroll",
+                        _this.notify('setCurrentViewDataAsync', {
+                            module: 'VirtualScroll'
                         });
                     }
                 }
@@ -2424,10 +2517,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.removeChip = function (value, isClearAll) {
         if (this.chipCollectionWrapper) {
-            if (this.enableVirtualization && isClearAll) {
-                var childElements = this.chipCollectionWrapper.querySelectorAll('.e-chips');
-            }
-            else {
+            if (!(this.enableVirtualization && isClearAll)) {
                 var element = this.findListElement(this.chipCollectionWrapper, 'span', 'data-value', value);
                 if (element) {
                     remove(element);
@@ -2468,7 +2558,9 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.indexOfObjectInArray = function (objectToFind, array) {
         var _loop_1 = function (i) {
             var item = array[i];
-            if (Object.keys(objectToFind).every(function (key) { return item.hasOwnProperty(key) && item[key] === objectToFind[key]; })) {
+            // eslint-disable-next-line no-prototype-builtins
+            if (Object.keys(objectToFind).every(function (key) { return item.hasOwnProperty(key) &&
+                item[key] === objectToFind[key]; })) {
                 return { value: i };
             }
         };
@@ -2484,7 +2576,8 @@ var MultiSelect = /** @class */ (function (_super) {
             this.value = [];
         }
         var currentValue = this.allowObjectBinding ? this.getDataByValue(value) : value;
-        if ((this.allowObjectBinding && !this.isObjectInArray(this.getDataByValue(value), this.value)) || (!this.allowObjectBinding && this.value.indexOf(currentValue) < 0)) {
+        if ((this.allowObjectBinding && !this.isObjectInArray(this.getDataByValue(value), this.value)) || (!this.allowObjectBinding &&
+            this.value.indexOf(currentValue) < 0)) {
             this.setProperties({ value: [].concat([], this.value, [currentValue]) }, true);
             if (this.enableVirtualization && !this.isSelectAllLoop) {
                 var data = this.viewWrapper.innerHTML;
@@ -2496,11 +2589,12 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.updateWrapperText(this.viewWrapper, data);
             }
             if (this.enableVirtualization && this.mode === 'CheckBox') {
-                var temp = void 0;
                 var currentText = [];
-                var value_1 = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
-                temp = this.getTextByValue(value_1);
-                var textValues = this.text != null && this.text != "" ? this.text + ',' + temp : temp;
+                var value_1 = this.allowObjectBinding ?
+                    getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) :
+                    this.value[this.value.length - 1];
+                var temp = this.getTextByValue(value_1);
+                var textValues = this.text != null && this.text !== '' ? this.text + ',' + temp : temp;
                 currentText.push(textValues);
                 this.setProperties({ text: currentText.toString() }, true);
             }
@@ -2659,7 +2753,6 @@ var MultiSelect = /** @class */ (function (_super) {
             else {
                 compiledString = compile(this.valueTemplate);
             }
-            // eslint-disable-next-line
             var valueCompTemp = compiledString(itemData, this, 'valueTemplate', this.valueTemplateId, this.isStringTemplate, null, chipContent);
             if (valueCompTemp && valueCompTemp.length > 0) {
                 append(valueCompTemp, chipContent);
@@ -2757,7 +2850,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
                 append([this.list], this.popupWrapper);
                 if (!this.list.classList.contains(dropDownBaseClasses.noData) && this.getItems()[1]) {
-                    this.listItemHeight = this.getItems()[1].offsetHeight;
+                    this.listItemHeight = this.getItems()[1].offsetHeight +
+                        parseInt(window.getComputedStyle(this.getItems()[1]).marginBottom, 10);
                 }
                 if (this.enableVirtualization && !this.list.classList.contains(dropDownBaseClasses.noData)) {
                     if (!this.list.querySelector('.e-virtual-ddl-content') && this.list.querySelector('.e-list-parent')) {
@@ -2867,8 +2961,10 @@ var MultiSelect = /** @class */ (function (_super) {
                         }
                         _this.isPreventScrollAction = true;
                         _this.setScrollPosition();
-                        if (!_this.list.classList.contains(dropDownBaseClasses.noData) && _this.getItems()[1] && _this.getItems()[1].offsetHeight !== 0) {
-                            _this.listItemHeight = _this.getItems()[1].offsetHeight;
+                        if (!_this.list.classList.contains(dropDownBaseClasses.noData) && _this.getItems()[1] &&
+                            _this.getItems()[1].offsetHeight !== 0) {
+                            _this.listItemHeight = _this.getItems()[1].offsetHeight +
+                                parseInt(window.getComputedStyle(_this.getItems()[1]).marginBottom, 10);
                             if (_this.list.getElementsByClassName('e-virtual-ddl-content')[0]) {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 _this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = _this.getTransformValues();
@@ -2880,10 +2976,10 @@ var MultiSelect = /** @class */ (function (_super) {
                             });
                         }
                         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) {
@@ -2902,7 +2998,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 });
                 this.checkCollision(this.popupWrapper);
                 this.popupContentElement = this.popupObj.element.querySelector('.e-content');
-                if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering) {
+                if (this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering && this.isDeviceFullScreen) {
                     this.notify('deviceSearchBox', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox' });
                 }
                 this.popupObj.close();
@@ -2911,7 +3007,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.checkCollision = function (popupEle) {
-        if (!(this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering)) {
+        if (!(this.mode === 'CheckBox' && Browser.isDevice && this.allowFiltering && this.isDeviceFullScreen)) {
             var collision = isCollide(popupEle);
             if (collision.length > 0) {
                 popupEle.style.marginTop = -parseInt(getComputedStyle(popupEle).marginTop, 10) + 'px';
@@ -2979,7 +3075,7 @@ var MultiSelect = /** @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: this.itemCount,
+            endIndex: this.itemCount
         };
         this.previousStartIndex = 0;
         this.previousEndIndex = 0;
@@ -3018,6 +3114,11 @@ var MultiSelect = /** @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.notify('setGeneratedData', {
+                module: 'VirtualScroll'
+            });
+        }
     };
     MultiSelect.prototype.clearAll = function (e) {
         if (this.enabled && !this.readonly) {
@@ -3057,8 +3158,8 @@ var MultiSelect = /** @class */ (function (_super) {
                     this.chipCollectionWrapper.innerHTML = '';
                 }
                 if (!this.isCustomDataUpdated) {
-                    this.notify("setGeneratedData", {
-                        module: "VirtualScroll",
+                    this.notify('setGeneratedData', {
+                        module: 'VirtualScroll'
                     });
                 }
             }
@@ -3234,7 +3335,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 var activeElement = Search(this.targetElement(), liCollections, 'StartsWith', this.ignoreCase);
                 if (this.enableVirtualization && this.targetElement().trim() !== '' && !this.allowFiltering) {
                     var updatingincrementalindex = false;
-                    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 = 0;
                         this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
@@ -3247,7 +3349,8 @@ var MultiSelect = /** @class */ (function (_super) {
                     activeElement = Search(this.targetElement(), this.incrementalLiCollections, this.filterType, true, this.listData, this.fields, type);
                     while (isNullOrUndefined(activeElement) && this.incrementalEndIndex < this.totalItemCount) {
                         this.incrementalStartIndex = this.incrementalEndIndex;
-                        this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                        this.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) {
@@ -3264,19 +3367,28 @@ var MultiSelect = /** @class */ (function (_super) {
                         }
                     }
                     if (activeElement.index) {
-                        if ((!(this.viewPortInfo.startIndex >= activeElement.index)) || (!(activeElement.index >= this.viewPortInfo.endIndex))) {
-                            var startIndex = activeElement.index - ((this.itemCount / 2) - 2) > 0 ? activeElement.index - ((this.itemCount / 2) - 2) : 0;
-                            var endIndex = startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : startIndex + this.itemCount;
-                            if (startIndex != this.viewPortInfo.startIndex) {
+                        if (!(this.viewPortInfo.startIndex >= activeElement.index) ||
+                            !(activeElement.index >= this.viewPortInfo.endIndex)) {
+                            var startIndex = activeElement.index - ((this.itemCount / 2) - 2) > 0
+                                ? activeElement.index - ((this.itemCount / 2) - 2)
+                                : 0;
+                            var endIndex = startIndex + this.itemCount > this.totalItemCount
+                                ? this.totalItemCount
+                                : startIndex + this.itemCount;
+                            if (startIndex !== this.viewPortInfo.startIndex) {
                                 this.updateIncrementalView(startIndex, endIndex);
                             }
                         }
                     }
                     if (!isNullOrUndefined(activeElement.item)) {
-                        var index_1 = this.getIndexByValue(activeElement.item.getAttribute('data-value')) - this.skeletonCount;
-                        if (index_1 > this.itemCount / 2) {
-                            var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;
-                            var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        var index1 = this.getIndexByValue(activeElement.item.getAttribute('data-value')) - this.skeletonCount;
+                        if (index1 > this.itemCount / 2) {
+                            var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount
+                                ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2)
+                                : this.totalItemCount;
+                            var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount
+                                ? this.totalItemCount
+                                : this.viewPortInfo.startIndex + this.itemCount;
                             this.updateIncrementalView(startIndex, endIndex);
                         }
                         activeElement.item = this.getElementByValue(activeElement.item.getAttribute('data-value'));
@@ -3340,7 +3452,7 @@ var MultiSelect = /** @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: this.itemCount,
+            endIndex: this.itemCount
         };
     };
     MultiSelect.prototype.updateData = function (delimiterChar, e) {
@@ -3358,53 +3470,65 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.value)) {
             var valueLength = this.value.length;
             var hiddenElementContent = '';
-            for (var index = 0; index < valueLength; index++) {
-                var valueItem = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[index]) : this.value[index];
-                var listValue = this.findListElement((!isNullOrUndefined(this.mainList) ? this.mainList : this.ulElement), 'li', 'data-value', valueItem);
-                if (this.enableVirtualization) {
-                    listValue = this.findListElement((!isNullOrUndefined(this.list) ? this.list : this.ulElement), 'li', 'data-value', valueItem);
-                }
-                if (isNullOrUndefined(listValue) && !this.allowCustomValue && !this.enableVirtualization && this.listData && this.listData.length > 0) {
-                    this.value.splice(index, 1);
+            var _loop_2 = function (index) {
+                var valueItem = this_1.allowObjectBinding ?
+                    getValue((this_1.fields.value) ? this_1.fields.value : '', this_1.value[index]) : this_1.value[index];
+                var listValue = this_1.findListElement((!isNullOrUndefined(this_1.mainList) ? this_1.mainList : this_1.ulElement), 'li', 'data-value', valueItem);
+                if (this_1.enableVirtualization) {
+                    listValue = this_1.findListElement((!isNullOrUndefined(this_1.list) ? this_1.list : this_1.ulElement), 'li', 'data-value', valueItem);
+                }
+                if (isNullOrUndefined(listValue) && !this_1.allowCustomValue && !this_1.enableVirtualization &&
+                    this_1.listData && this_1.listData.length > 0) {
+                    this_1.value.splice(index, 1);
                     index -= 1;
                     valueLength -= 1;
                 }
                 else {
-                    if (this.listData) {
-                        if (this.enableVirtualization) {
+                    if (this_1.listData) {
+                        if (this_1.enableVirtualization) {
                             if (delim) {
-                                data = this.delimiterWrapper && this.delimiterWrapper.innerHTML == "" ? data : this.delimiterWrapper.innerHTML;
+                                data = this_1.delimiterWrapper && this_1.delimiterWrapper.innerHTML === '' ? data :
+                                    this_1.delimiterWrapper.innerHTML;
+                            }
+                            var value = this_1.allowObjectBinding ?
+                                getValue(((this_1.fields.value) ? this_1.fields.value : ''), this_1.value[this_1.value.length - 1]) :
+                                this_1.value[this_1.value.length - 1];
+                            if (this_1.isRemoveSelection) {
+                                data = this_1.text.replace(/,/g, delimiterChar + ' ') + delimiterChar + ' ';
+                                text = this_1.text.split(delimiterChar);
                             }
-                            var value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) : this.value[this.value.length - 1];
-                            temp = this.getTextByValue(value);
-                            var textValues = this.text != null && this.text != "" ? this.text + ',' + temp : temp;
-                            data += temp + delimiterChar + ' ';
-                            text.push(textValues);
-                            hiddenElementContent = this.hiddenElement.innerHTML;
-                            if ((e && e.currentTarget && e.currentTarget.classList.contains('e-chips-close')) || (e && (e.key === 'Backspace'))) {
-                                var item = e.target.parentElement.getAttribute('data-value');
+                            else {
+                                temp = this_1.getTextByValue(value);
+                                var textValues = this_1.text != null && this_1.text !== '' ? this_1.text + ',' + temp : temp;
+                                data += temp + delimiterChar + ' ';
+                                text.push(textValues);
+                                hiddenElementContent = this_1.hiddenElement.innerHTML;
+                            }
+                            if ((e && e.currentTarget && e.currentTarget.classList.contains('e-chips-close')) ||
+                                (e && (e.key === 'Backspace'))) {
+                                var item_1 = e.target.parentElement.getAttribute('data-value');
                                 if (e.key === 'Backspace') {
-                                    var lastChild = this.hiddenElement.lastChild;
+                                    var lastChild = this_1.hiddenElement.lastChild;
                                     if (lastChild) {
-                                        this.hiddenElement.removeChild(lastChild);
+                                        this_1.hiddenElement.removeChild(lastChild);
                                     }
                                 }
                                 else {
-                                    this.hiddenElement.childNodes.forEach(function (option) {
-                                        if (option.value === item) {
+                                    this_1.hiddenElement.childNodes.forEach(function (option) {
+                                        if (option.value === item_1) {
                                             option.parentNode.removeChild(option);
                                         }
                                     });
                                 }
-                                hiddenElementContent = this.hiddenElement.innerHTML;
+                                hiddenElementContent = this_1.hiddenElement.innerHTML;
                             }
                             else {
-                                hiddenElementContent += "<option selected value=\"" + value + "\">" + index + "</option>";
+                                hiddenElementContent += '<option selected value=\'' + value + '\'>' + index + '</option>';
                             }
-                            break;
+                            return out_index_1 = index, "break";
                         }
                         else {
-                            temp = this.getTextByValue(valueItem);
+                            temp = this_1.getTextByValue(valueItem);
                         }
                     }
                     else {
@@ -3414,9 +3538,25 @@ var MultiSelect = /** @class */ (function (_super) {
                     text.push(temp);
                 }
                 hiddenElementContent += "<option selected value=\"" + valueItem + "\">" + index + "</option>";
+                out_index_1 = index;
+            };
+            var this_1 = this, out_index_1;
+            for (var index = 0; index < valueLength; index++) {
+                var state_2 = _loop_2(index);
+                index = out_index_1;
+                if (state_2 === "break")
+                    break;
             }
             if (!isNullOrUndefined(this.hiddenElement)) {
-                this.hiddenElement.innerHTML = hiddenElementContent;
+                if (this.isRemoveSelection) {
+                    if (this.findListElement(this.hiddenElement, 'option', 'value', this.currentRemoveValue)) {
+                        this.hiddenElement.removeChild(this.findListElement(this.hiddenElement, 'option', 'value', this.currentRemoveValue));
+                    }
+                    this.isRemoveSelection = false;
+                }
+                else {
+                    this.hiddenElement.innerHTML = hiddenElementContent;
+                }
             }
         }
         var isChipRemove = e && e.target && e.target.classList.contains('e-chips-close');
@@ -3481,7 +3621,9 @@ var MultiSelect = /** @class */ (function (_super) {
             this.removeListSelection();
             if (!isNullOrUndefined(this.value)) {
                 for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
-                    value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
+                    value = this.allowObjectBinding ?
+                        getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) :
+                        this.value[index];
                     element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
                     var isCustomData = false;
                     if (this.enableVirtualization) {
@@ -3507,7 +3649,9 @@ var MultiSelect = /** @class */ (function (_super) {
                                 }
                             }
                         }
-                        if ((isNullOrUndefined(text) && this.allowCustomValue) && ((!(this.dataSource instanceof DataManager)) || (this.dataSource instanceof DataManager && isInitialVirtualData))) {
+                        if ((isNullOrUndefined(text) && this.allowCustomValue) &&
+                            ((!(this.dataSource instanceof DataManager)) ||
+                                (this.dataSource instanceof DataManager && isInitialVirtualData))) {
                             text = this.getTextByValue(value);
                             isCustomData = true;
                         }
@@ -3517,15 +3661,21 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     if (((element && (element.getAttribute('aria-selected') !== 'true')) ||
                         (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&
-                            (this.mode === 'Box' || this.mode === 'Default'))) || (this.enableVirtualization && value != null && text != null && !isCustomData)) {
+                            (this.mode === 'Box' || this.mode === 'Default'))) ||
+                        (this.enableVirtualization && value != null && text != null && !isCustomData)) {
                         var currentText = [];
-                        var textValues = this.text != null && this.text != "" ? this.text + ',' + text : text;
+                        var textValues = this.text != null && this.text !== '' ? this.text + ',' + text : text;
                         currentText.push(textValues);
                         this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
                         this.addListSelection(element);
                     }
-                    else if ((!this.enableVirtualization && value && this.allowCustomValue) || ((this.enableVirtualization && value && this.allowCustomValue) && ((!(this.dataSource instanceof DataManager)) || (this.dataSource instanceof DataManager && isInitialVirtualData)))) {
+                    else if ((!this.enableVirtualization && value && this.allowCustomValue) ||
+                        (this.enableVirtualization &&
+                            value &&
+                            this.allowCustomValue &&
+                            ((!(this.dataSource instanceof DataManager)) ||
+                                (this.dataSource instanceof DataManager && isInitialVirtualData)))) {
                         var indexItem = this.listData.length;
                         var newValue = {};
                         setValue(this.fields.text, value, newValue);
@@ -3542,14 +3692,15 @@ var MultiSelect = /** @class */ (function (_super) {
                                 this.virtualCustomSelectData = [newValue];
                             }
                         }
-                        element = element ? element : this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
+                        element = element ? element : this.findListElement(this.hideSelectedItem ?
+                            this.ulElement : this.list, 'li', 'data-value', value);
                         if (this.popupWrapper.contains(noDataEle)) {
                             this.list.setAttribute('style', noDataEle.getAttribute('style'));
                             this.popupWrapper.replaceChild(this.list, noDataEle);
                             this.wireListEvents();
                         }
                         var currentText = [];
-                        var textValues = this.text != null && this.text != "" ? this.text + ',' + text : text;
+                        var textValues = this.text != null && this.text !== '' ? this.text + ',' + text : text;
                         currentText.push(textValues);
                         this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
@@ -3581,7 +3732,8 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     MultiSelect.prototype.updateActionCompleteData = function (li, item) {
-        if (this.value && ((!this.allowObjectBinding && this.value.indexOf(li.getAttribute('data-value')) > -1) || (this.allowObjectBinding && this.isObjectInArray(this.getDataByValue(li.getAttribute('data-value')), this.value)))) {
+        if (this.value && ((!this.allowObjectBinding && this.value.indexOf(li.getAttribute('data-value')) > -1) ||
+            (this.allowObjectBinding && this.isObjectInArray(this.getDataByValue(li.getAttribute('data-value')), this.value)))) {
             this.mainList = this.ulElement;
             if (this.hideSelectedItem) {
                 addClass([li], HIDE_LIST);
@@ -3605,8 +3757,14 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.updateDataList = function () {
         if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction || this.targetElement().trim())) {
             var isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
-            var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0] && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount)));
-            var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 && !(this.ulElement.childElementCount < this.mainList.childElementCount) && (this.ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
+            var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 &&
+                this.ulElement.children[0].childElementCount > 0) &&
+                (this.mainList.children[0] && (this.mainList.children[0].childElementCount <
+                    this.ulElement.children[0].childElementCount)));
+            var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 &&
+                !(this.ulElement.childElementCount < this.mainList.childElementCount) &&
+                (this.ulElement.children[0].childElementCount > 0 ||
+                    (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
             if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
                 //EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
                 this.mainList = this.ulElement;
@@ -3619,13 +3777,15 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.updateListSelection = function (li, e, length) {
         var customVal = li.getAttribute('data-value');
-        var value = this.allowObjectBinding ? this.getDataByValue(this.getFormattedValue(customVal)) : this.getFormattedValue(customVal);
+        var value = this.allowObjectBinding ?
+            this.getDataByValue(this.getFormattedValue(customVal)) : this.getFormattedValue(customVal);
         if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||
             (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {
             value = customVal;
         }
         this.removeHover();
-        if (!this.value || ((!this.allowObjectBinding && this.value.indexOf(value) === -1) || (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) === -1))) {
+        if (!this.value || ((!this.allowObjectBinding && this.value.indexOf(value) === -1) ||
+            (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) === -1))) {
             this.dispatchSelect(value, e, li, (li.getAttribute('aria-selected') === 'true'), length);
         }
         else {
@@ -3636,7 +3796,9 @@ var MultiSelect = /** @class */ (function (_super) {
         var _this = this;
         value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
         var text = this.getTextByValue(value);
-        if ((this.allowCustomValue || this.allowFiltering) && !this.findListElement(this.mainList, 'li', 'data-value', value) && (!this.enableVirtualization || (this.enableVirtualization && this.virtualCustomData))) {
+        if ((this.allowCustomValue || this.allowFiltering) &&
+            !this.findListElement(this.mainList, 'li', 'data-value', value) &&
+            (!this.enableVirtualization || (this.enableVirtualization && this.virtualCustomData))) {
             var temp_1 = li ? li.cloneNode(true) : li;
             var fieldValue = this.fields.value ? this.fields.value : 'value';
             if (this.allowCustomValue && this.mainData.length && typeof getValue(fieldValue, this.mainData[0]) === 'number') {
@@ -3870,7 +4032,8 @@ var MultiSelect = /** @class */ (function (_super) {
                         this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
                         this.virtualItemCount = this.itemCount;
                         if (this.mode !== 'CheckBox') {
-                            this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
+                            this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length :
+                                this.totalItemCount;
                         }
                         if (!this.list.querySelector('.e-virtual-ddl')) {
                             var virualElement = this.createElement('div', {
@@ -4300,7 +4463,8 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.getOverflowVal = function (index) {
         var temp;
         if (this.mainData && this.mainData.length) {
-            var value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
+            var value = this.allowObjectBinding ?
+                getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
             if (this.mode === 'CheckBox') {
                 var newTemp = this.listData;
                 this.listData = this.mainData;
@@ -4312,7 +4476,8 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
         else {
-            temp = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) : this.value[index];
+            temp = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) :
+                this.value[index];
         }
         return temp;
     };
@@ -4359,7 +4524,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)');
         }
         if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
-            var target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
+            var target = (event ? (this.groupTemplate ?
+                closest(event.target, '.e-list-group-item') : event.target) : null);
             target = (event && event.keyCode === 32) ? list : target;
             target = (target && target.classList.contains('e-frame')) ? target.parentElement.parentElement : target;
             if (target && target.classList.contains('e-list-group-item')) {
@@ -4426,7 +4592,8 @@ var MultiSelect = /** @class */ (function (_super) {
         var length = li.length;
         var count = this.maximumSelectionLength;
         if (state) {
-            length = this.virtualSelectAllData && this.virtualSelectAllData.length != 0 ? this.virtualSelectAllData.length : length;
+            this.virtualSelectAll = true;
+            length = this.virtualSelectAllData && this.virtualSelectAllData.length !== 0 ? this.virtualSelectAllData.length : length;
             this.listData = this.virtualSelectAllData;
             var ulElement = this.createListItems(this.virtualSelectAllData.slice(0, 30), this.fields);
             var firstItems = ulElement.querySelectorAll('li');
@@ -4442,21 +4609,27 @@ var MultiSelect = /** @class */ (function (_super) {
                 while (index < length && index <= 50 && index < count) {
                     this.isSelectAllTarget = (length === index + 1);
                     if (concatenatedNodeList[index]) {
-                        var value = this.allowObjectBinding ? this.getDataByValue(concatenatedNodeList[index].getAttribute('data-value')) : this.getFormattedValue(concatenatedNodeList[index].getAttribute('data-value'));
-                        if (((!this.allowObjectBinding && this.value && this.value.indexOf(value) >= 0) || (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) >= 0))) {
+                        var value = this.allowObjectBinding
+                            ? this.getDataByValue(concatenatedNodeList[index].getAttribute('data-value'))
+                            : this.getFormattedValue(concatenatedNodeList[index].getAttribute('data-value'));
+                        if (((!this.allowObjectBinding && this.value && this.value.indexOf(value) >= 0) ||
+                            (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) >= 0))) {
                             index++;
                             continue;
                         }
                         this.updateListSelection(concatenatedNodeList[index], event, length - index);
                     }
                     else {
-                        var value = getValue((this.fields.value) ? this.fields.value : '', this.virtualSelectAllData[index]);
+                        var value = getValue(this.fields.value ? this.fields.value : '', this.virtualSelectAllData[index]);
                         value = this.allowObjectBinding ? this.getDataByValue(value) : value;
-                        if (((!this.allowObjectBinding && this.value && this.value.indexOf(value) >= 0) || (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) >= 0))) {
+                        if (((!this.allowObjectBinding && this.value && this.value.indexOf(value) >= 0) ||
+                            (this.allowObjectBinding && this.indexOfObjectInArray(value, this.value) >= 0))) {
                             index++;
                             continue;
                         }
-                        if (this.value && value != null && Array.isArray(this.value) && ((!this.allowObjectBinding && this.value.indexOf(value) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value, this.value)))) {
+                        if (this.value && value != null && Array.isArray(this.value) &&
+                            ((!this.allowObjectBinding && this.value.indexOf(value) < 0) ||
+                                (this.allowObjectBinding && !this.isObjectInArray(value, this.value)))) {
                             this.dispatchSelect(value, event, null, false, length);
                         }
                     }
@@ -4466,7 +4639,9 @@ var MultiSelect = /** @class */ (function (_super) {
                     setTimeout(function () {
                         if (_this.virtualSelectAllData && _this.virtualSelectAllData.length > 0) {
                             _this.virtualSelectAllData.map(function (obj) {
-                                if (_this.value && obj[_this.fields.value] != null && Array.isArray(_this.value) && ((!_this.allowObjectBinding && _this.value.indexOf(obj[_this.fields.value]) < 0) || (_this.allowObjectBinding && !_this.isObjectInArray(obj[_this.fields.value], _this.value)))) {
+                                if (_this.value && obj[_this.fields.value] != null && Array.isArray(_this.value) &&
+                                    ((!_this.allowObjectBinding && _this.value.indexOf(obj[_this.fields.value]) < 0) ||
+                                        (_this.allowObjectBinding && !_this.isObjectInArray(obj[_this.fields.value], _this.value)))) {
                                     _this.dispatchSelect(obj[_this.fields.value], event, null, false, length);
                                 }
                             });
@@ -4504,22 +4679,22 @@ var MultiSelect = /** @class */ (function (_super) {
             this.value = [];
             this.virtualSelectAll = false;
             if (!isNullOrUndefined(this.viewPortInfo.startIndex) && !isNullOrUndefined(this.viewPortInfo.endIndex)) {
-                this.notify("setCurrentViewDataAsync", {
+                this.notify('setCurrentViewDataAsync', {
                     component: this.getModuleName(),
-                    module: "VirtualScroll",
+                    module: 'VirtualScroll'
                 });
             }
         }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var virtualTrackElement = this.list.getElementsByClassName('e-virtual-ddl')[0];
         if (virtualTrackElement) {
-            (virtualTrackElement).style = this.GetVirtualTrackHeight();
+            virtualTrackElement.style = this.GetVirtualTrackHeight();
         }
         this.UpdateSkeleton();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var virtualContentElement = this.list.getElementsByClassName('e-virtual-ddl-content')[0];
         if (virtualContentElement) {
-            (virtualContentElement).style = this.getTransformValues();
+            virtualContentElement.style = this.getTransformValues();
         }
     };
     MultiSelect.prototype.updateValue = function (event, li, state) {
@@ -4535,7 +4710,7 @@ var MultiSelect = /** @class */ (function (_super) {
         };
         this.trigger('beforeSelectAll', beforeSelectArgs);
         if ((li && li.length) || (this.enableVirtualization && !state)) {
-            var index_2 = 0;
+            var index_1 = 0;
             var count_1 = 0;
             if (this.enableGroupCheckBox) {
                 count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;
@@ -4545,8 +4720,8 @@ var MultiSelect = /** @class */ (function (_super) {
             }
             if (!beforeSelectArgs.preventSelectEvent) {
                 if (this.enableVirtualization) {
-                    this.virtualSelectAll = true;
                     this.virtualSelectAllState = state;
+                    this.virtualSelectAll = true;
                     this.CurrentEvent = event;
                     if (!this.virtualSelectAllData) {
                         this.resetList(this.dataSource, this.fields, new Query());
@@ -4556,23 +4731,23 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                 }
                 else {
-                    while (index_2 < length && index_2 <= 50 && index_2 < count_1) {
-                        this.isSelectAllTarget = (length === index_2 + 1);
-                        this.updateListSelection(li[index_2], event, length - index_2);
+                    while (index_1 < length && index_1 <= 50 && index_1 < count_1) {
+                        this.isSelectAllTarget = (length === index_1 + 1);
+                        this.updateListSelection(li[index_1], event, length - index_1);
                         if (this.enableGroupCheckBox) {
-                            this.findGroupStart(li[index_2]);
+                            this.findGroupStart(li[index_1]);
                         }
-                        index_2++;
+                        index_1++;
                     }
                     if (length > 50) {
                         setTimeout(function () {
-                            while (index_2 < length && index_2 < count_1) {
-                                _this.isSelectAllTarget = (length === index_2 + 1);
-                                _this.updateListSelection(li[index_2], event, length - index_2);
+                            while (index_1 < length && index_1 < count_1) {
+                                _this.isSelectAllTarget = (length === index_1 + 1);
+                                _this.updateListSelection(li[index_1], event, length - index_1);
                                 if (_this.enableGroupCheckBox) {
-                                    _this.findGroupStart(li[index_2]);
+                                    _this.findGroupStart(li[index_1]);
                                 }
-                                index_2++;
+                                index_1++;
                             }
                             _this.updatedataValueItems(event);
                             if (!_this.changeOnBlur) {
@@ -4580,10 +4755,10 @@ var MultiSelect = /** @class */ (function (_super) {
                                 _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
                             }
                             _this.updateHiddenElement();
-                            if (_this.popupWrapper && li[index_2 - 1].classList.contains('e-item-focus')) {
+                            if (_this.popupWrapper && li[index_1 - 1].classList.contains('e-item-focus')) {
                                 var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
                                 if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
-                                    li[index_2 - 1].classList.remove('e-item-focus');
+                                    li[index_1 - 1].classList.remove('e-item-focus');
                                 }
                             }
                         }, 0);
@@ -4601,7 +4776,8 @@ var MultiSelect = /** @class */ (function (_super) {
                         'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide)')[i] : null;
                     if (state) {
                         this.value = !this.value ? [] : this.value;
-                        if ((!this.allowObjectBinding && this.value.indexOf(value) < 0) || (this.allowObjectBinding && !this.isObjectInArray(value, this.value))) {
+                        if ((!this.allowObjectBinding && this.value.indexOf(value) < 0) ||
+                            (this.allowObjectBinding && !this.isObjectInArray(value, this.value))) {
                             this.setProperties({ value: [].concat([], this.value, [value]) }, true);
                         }
                         this.removeFocus();
@@ -4877,7 +5053,9 @@ var MultiSelect = /** @class */ (function (_super) {
                     this.addValidInputClass();
                     Input.createSpanElement(this.overAllWrapper, this.createElement);
                     this.calculateWidth();
-                    if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
+                    if (!isNullOrUndefined(this.overAllWrapper) &&
+                        !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
+                            this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
                         this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
                     }
                     break;
@@ -4915,7 +5093,6 @@ var MultiSelect = /** @class */ (function (_super) {
                     break;
                 default:
                     {
-                        // eslint-disable-next-line max-len
                         var msProps = this.getPropObject(prop, newProp, oldProp);
                         _super.prototype.onPropertyChanged.call(this, msProps.newProperty, msProps.oldProperty);
                     }
@@ -4945,16 +5122,18 @@ var MultiSelect = /** @class */ (function (_super) {
             dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
         }
         if (this.mode === 'CheckBox') {
-            this.totalItemCount = dataSourceCount != 0 ? dataSourceCount : this.totalItemCount;
+            this.totalItemCount = dataSourceCount !== 0 ? dataSourceCount : this.totalItemCount;
         }
         else {
             if (this.hideSelectedItem) {
-                this.totalItemCount = dataSourceCount != 0 && this.value ? dataSourceCount - this.value.length : this.totalItemCount;
+                this.totalItemCount = dataSourceCount !== 0 && this.value ? dataSourceCount - this.value.length : this.totalItemCount;
                 if (this.allowCustomValue && this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {
                     for (var i = 0; i < this.virtualCustomSelectData.length; i++) {
                         for (var j = 0; j < this.value.length; j++) {
-                            var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[j]) : this.value[j];
-                            var customValue = getValue((this.fields.value) ? this.fields.value : '', this.virtualCustomSelectData[i]);
+                            var value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                                this.fields.value : '', this.value[j]) : this.value[j];
+                            var customValue = getValue((this.fields.value) ?
+                                this.fields.value : '', this.virtualCustomSelectData[i]);
                             if (value === customValue) {
                                 this.totalItemCount += 1;
                             }
@@ -4963,7 +5142,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
             else {
-                this.totalItemCount = dataSourceCount != 0 ? dataSourceCount : this.totalItemCount;
+                this.totalItemCount = dataSourceCount !== 0 ? dataSourceCount : this.totalItemCount;
                 if (this.allowCustomValue && this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {
                     this.totalItemCount += this.virtualCustomSelectData.length;
                 }
@@ -4973,16 +5152,17 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.presentItemValue = function (ulElement) {
         var valuecheck = [];
         for (var i = 0; i < this.value.length; i++) {
-            var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[i]) : this.value[i];
+            var value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                this.fields.value : '', this.value[i]) : this.value[i];
             var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', value);
             if (!checkEle) {
-                var checkvalue = this.allowObjectBinding ? this.getDataByValue(this.value[i]) : this.value[i];
+                var checkvalue = this.allowObjectBinding ?
+                    this.getDataByValue(this.value[i]) : this.value[i];
                 valuecheck.push(checkvalue);
             }
         }
         return valuecheck;
     };
-    ;
     MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
         var _this = this;
         this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
@@ -4992,7 +5172,6 @@ var MultiSelect = /** @class */ (function (_super) {
             _this.updateActionList(ulElement, list, event);
         });
     };
-    ;
     MultiSelect.prototype.updateVal = function (newProp, oldProp, prop) {
         if (!this.list) {
             this.onLoadSelect();
@@ -5005,7 +5184,7 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
                 valuecheck = this.presentItemValue(this.ulElement);
             }
-            if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
+            if (prop === 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
                 && this.listData != null && !this.enableVirtualization) {
                 this.mainData = null;
                 this.setDynValue = true;
@@ -5059,6 +5238,7 @@ var MultiSelect = /** @class */ (function (_super) {
     /**
      * Hides the popup, if the popup in a open state.
      *
+     * @param {MouseEvent | KeyboardEventArgs} e - Specifies the mouse event or keyboard event.
      * @returns {void}
      */
     MultiSelect.prototype.hidePopup = function (e) {
@@ -5080,7 +5260,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     _this.beforePopupOpen = false;
                     _this.overAllWrapper.classList.remove(iconAnimation);
-                    var typedValue = _this.mode == 'CheckBox' ? _this.targetElement() : null;
+                    var typedValue = _this.mode === 'CheckBox' ? _this.targetElement() : null;
                     _this.popupObj.hide(new Animation(eventArgs.animation));
                     attributes(_this.inputElement, { 'aria-expanded': 'false' });
                     _this.inputElement.removeAttribute('aria-owns');
@@ -5094,9 +5274,11 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (_this.mode === 'CheckBox' && _this.showSelectAll) {
                         EventHandler.remove(_this.popupObj.element, 'click', _this.clickHandler);
                     }
-                    if (_this.enableVirtualization && _this.mode === 'CheckBox' && _this.value && _this.value.length > 0 && _this.enableSelectionOrder) {
+                    if (_this.enableVirtualization && _this.mode === 'CheckBox' && _this.value && _this.value.length > 0 &&
+                        _this.enableSelectionOrder) {
                         _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;
                         _this.virtualListInfo = _this.viewPortInfo;
                         _this.previousStartIndex = 0;
                         _this.previousEndIndex = 0;
@@ -5114,11 +5296,13 @@ var MultiSelect = /** @class */ (function (_super) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         dataSourceCount = _this.dataSource && _this.dataSource.length ? _this.dataSource.length : 0;
                     }
-                    if (_this.enableVirtualization && (_this.allowFiltering || _this.allowCustomValue) && (_this.targetElement() || typedValue) && _this.totalItemCount !== dataSourceCount) {
-                        _this.updateInitialData();
+                    if (_this.enableVirtualization && (_this.allowFiltering || _this.allowCustomValue) &&
+                        (_this.targetElement() || typedValue) && _this.totalItemCount !== dataSourceCount) {
                         _this.checkAndResetCache();
+                        _this.updateInitialData();
                     }
-                    if (_this.virtualCustomData && _this.viewPortInfo && _this.viewPortInfo.startIndex === 0 && _this.viewPortInfo.endIndex === _this.itemCount) {
+                    if (_this.virtualCustomData && _this.viewPortInfo && _this.viewPortInfo.startIndex === 0 &&
+                        _this.viewPortInfo.endIndex === _this.itemCount) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         _this.renderItems(_this.mainData, _this.fields);
                     }
@@ -5131,6 +5315,7 @@ var MultiSelect = /** @class */ (function (_super) {
     /**
      * Shows the popup, if the popup in a closed state.
      *
+     * @param {MouseEvent | KeyboardEventArgs} e - Specifies the mouse event or keyboard event.
      * @returns {void}
      */
     MultiSelect.prototype.showPopup = function (e) {
@@ -5144,43 +5329,47 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!args.cancel) {
                 if (!_this.ulElement) {
                     _this.beforePopupOpen = true;
-                    if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {
+                    if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering && _this.isDeviceFullScreen) {
                         _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });
                     }
                     _super.prototype.render.call(_this, e);
                     return;
                 }
-                if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {
+                if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering && _this.isDeviceFullScreen) {
                     _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });
                 }
                 var mainLiLength = _this.ulElement.querySelectorAll('li.' + 'e-list-item').length;
                 var liLength = _this.ulElement.querySelectorAll('li.'
                     + dropDownBaseClasses.li + '.' + HIDE_LIST).length;
-                if (mainLiLength > 0 && (mainLiLength === liLength) && (liLength === _this.mainData.length) && !(_this.targetElement() !== '' && _this.allowCustomValue)) {
+                if (mainLiLength > 0 && (mainLiLength === liLength) && (liLength === _this.mainData.length) &&
+                    !(_this.targetElement() !== '' && _this.allowCustomValue)) {
                     _this.beforePopupOpen = false;
                     return;
                 }
                 _this.onPopupShown(e);
                 if (_this.enableVirtualization && _this.listData && _this.listData.length) {
-                    if (!isNullOrUndefined(_this.value) && (_this.getModuleName() === 'dropdownlist' || _this.getModuleName() === 'combobox')) {
+                    if (!isNullOrUndefined(_this.value) && (_this.getModuleName() === 'dropdownlist' ||
+                        _this.getModuleName() === 'combobox')) {
                         _this.removeHover();
                     }
                     if (!_this.beforePopupOpen) {
                         if (_this.hideSelectedItem && _this.value && Array.isArray(_this.value) && _this.value.length > 0) {
                             _this.totalItemsCount();
                         }
-                        if (!_this.preventSetCurrentData && !isNullOrUndefined(_this.viewPortInfo.startIndex) && !isNullOrUndefined(_this.viewPortInfo.endIndex)) {
-                            _this.notify("setCurrentViewDataAsync", {
+                        if (!_this.preventSetCurrentData && !isNullOrUndefined(_this.viewPortInfo.startIndex) &&
+                            !isNullOrUndefined(_this.viewPortInfo.endIndex)) {
+                            _this.notify('setCurrentViewDataAsync', {
                                 component: _this.getModuleName(),
-                                module: "VirtualScroll",
+                                module: 'VirtualScroll'
                             });
                         }
                     }
                 }
-                if (_this.enableVirtualization && !_this.allowFiltering && _this.selectedValueInfo != null && _this.selectedValueInfo.startIndex > 0 && _this.value != null) {
-                    _this.notify("dataProcessAsync", {
-                        module: "VirtualScroll",
-                        isOpen: true,
+                if (_this.enableVirtualization && !_this.allowFiltering && _this.selectedValueInfo != null &&
+                    _this.selectedValueInfo.startIndex > 0 && _this.value != null) {
+                    _this.notify('dataProcessAsync', {
+                        module: 'VirtualScroll',
+                        isOpen: true
                     });
                 }
                 if (_this.enableVirtualization) {
@@ -5193,7 +5382,8 @@ var MultiSelect = /** @class */ (function (_super) {
                         var listItems = _this.getItems();
                         for (var _i = 0, _a = _this.value; _i < _a.length; _i++) {
                             var value = _a[_i];
-                            var checkValue = _this.allowObjectBinding ? getValue((_this.fields.value) ? _this.fields.value : '', value) : value;
+                            var checkValue = _this.allowObjectBinding ?
+                                getValue((_this.fields.value) ? _this.fields.value : '', value) : value;
                             element = _this.getElementByValue(checkValue);
                             if (element) {
                                 _this.addListSelection(element);
@@ -5258,8 +5448,13 @@ var MultiSelect = /** @class */ (function (_super) {
         this.setDynValue = this.initStatus = false;
         this.isSelectAll = false;
         this.selectAllEventEle = [];
-        this.searchWrapper = this.createElement('span', { className: SEARCHBOX_WRAPPER + ' ' + ((this.mode === 'Box') ? BOX_ELEMENT : '') });
-        this.viewWrapper = this.createElement('span', { className: DELIMITER_VIEW + ' ' + DELIMITER_WRAPPER, styles: 'display:none;' });
+        this.searchWrapper = this.createElement('span', {
+            className: SEARCHBOX_WRAPPER + ' ' + ((this.mode === 'Box') ?
+                BOX_ELEMENT : '')
+        });
+        this.viewWrapper = this.createElement('span', {
+            className: DELIMITER_VIEW + ' ' + DELIMITER_WRAPPER, styles: 'display:none;'
+        });
         this.overAllClear = this.createElement('span', {
             className: CLOSEICON_CLASS, styles: 'display:none;'
         });
@@ -5318,7 +5513,10 @@ var MultiSelect = /** @class */ (function (_super) {
             this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);
         }
         if (!isNullOrUndefined(this.inputElement)) {
-            attributes(this.inputElement, { 'aria-expanded': 'false', 'aria-label': this.getModuleName() });
+            attributes(this.inputElement, { 'aria-expanded': 'false' });
+            if (!this.inputElement.hasAttribute('aria-label')) {
+                this.inputElement.setAttribute('aria-label', this.getModuleName());
+            }
         }
         if (this.element.tagName !== this.getNgDirective()) {
             this.element.style.display = 'none';
@@ -5351,7 +5549,8 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.mode !== 'CheckBox') {
             this.hideOverAllClear();
         }
-        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.wireEvent();
@@ -5363,14 +5562,16 @@ var MultiSelect = /** @class */ (function (_super) {
         this.listItemHeight = this.getListHeight();
         this.getSkeletonCount();
         this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
-        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.viewPortInfo.startIndex > 0 ? this.viewPortInfo.endIndex : this.itemCount;
+        this.viewPortInfo.endIndex = this.virtualItemEndIndex = this.viewPortInfo.startIndex > 0 ?
+            this.viewPortInfo.endIndex : this.itemCount;
         this.checkInitialValue();
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
         Input.createSpanElement(this.overAllWrapper, this.createElement);
         this.calculateWidth();
-        if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
+        if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
+            this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
         }
         this.renderComplete();
@@ -5387,7 +5588,8 @@ var MultiSelect = /** @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;
     };
@@ -5469,7 +5671,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 var fields = (this.fields.value) ? this.fields.value : '';
                 var predicate = void 0;
                 for (var i = 0; i < this.value.length; i++) {
-                    var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value[i]) : this.value[i];
+                    var value = this.allowObjectBinding ?
+                        getValue((this.fields.value) ? this.fields.value : '', this.value[i]) :
+                        this.value[i];
                     if (i === 0) {
                         predicate = new Predicate(fields, 'equal', value);
                     }
@@ -5530,10 +5734,10 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.value && this.value.length) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var element = void 0;
-            var listItems = this.getItems();
             for (var _i = 0, _a = this.value; _i < _a.length; _i++) {
                 var value = _a[_i];
-                var checkValue = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', value) : value;
+                var checkValue = this.allowObjectBinding ? getValue((this.fields.value) ?
+                    this.fields.value : '', value) : value;
                 element = this.getElementByValue(checkValue);
                 if (element) {
                     this.addListSelection(element);
@@ -5808,6 +6012,9 @@ var MultiSelect = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], MultiSelect.prototype, "allowFiltering", void 0);
+    __decorate([
+        Property(true)
+    ], MultiSelect.prototype, "isDeviceFullScreen", void 0);
     __decorate([
         Property(true)
     ], MultiSelect.prototype, "changeOnBlur", void 0);