@syncfusion/ej2-dropdowns 25.1.40 → 25.2.3

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

@@ -269,10 +269,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
                 _this.updateAriaActiveDescendant();
                 if (_this.isFirstClick) {
-                    if (_this.enableVirtualization && _this.mode === 'CheckBox' && _this.value && _this.enableSelectionOrder) {
-                        _this.updateVirtualReOrderList();
+                    if (!_this.enableVirtualization) {
+                        _this.loadTemplate();
                     }
-                    _this.loadTemplate();
                 }
                 if (_this.mode === 'CheckBox' && _this.showSelectAll) {
                     EventHandler.add(_this.popupObj.element, 'click', _this.clickHandler, _this);
@@ -282,7 +281,12 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.updateVirtualReOrderList = function (isCheckBoxUpdate) {
         var query = this.getForQuery(this.value, true).clone();
-        this.resetList(this.dataSource, this.fields, query);
+        if (this.enableVirtualization && this.dataSource instanceof DataManager) {
+            this.resetList(this.selectedListData, this.fields, query);
+        }
+        else {
+            this.resetList(this.dataSource, this.fields, query);
+        }
         this.UpdateSkeleton();
         this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
         this.virtualItemCount = this.itemCount;
@@ -339,6 +343,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         if (this.enableVirtualization) {
             var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+            this.isKeyBoardAction = false;
             this.scrollBottom(focusedItem);
         }
     };
@@ -456,15 +461,15 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.getForQuery = function (valuecheck, isCheckbox) {
         var predicate;
         var field = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
-        if (this.enableVirtualization) {
+        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];
                     if (i === 0) {
-                        predicate = new Predicate(field, 'equal', value);
+                        predicate = new Predicate(field, 'equal', (value));
                     }
                     else {
-                        predicate = predicate.or(field, 'equal', value);
+                        predicate = predicate.or(field, 'equal', (value));
                     }
                 }
                 return new Query().where(predicate);
@@ -473,10 +478,10 @@ var MultiSelect = /** @class */ (function (_super) {
                 for (var i = 0; i < valuecheck.length; i++) {
                     var value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', valuecheck[i]) : valuecheck[i];
                     if (i === 0) {
-                        predicate = new Predicate(field, 'notequal', value);
+                        predicate = new Predicate(field, 'notequal', (value));
                     }
                     else {
-                        predicate = predicate.and(field, 'notequal', value);
+                        predicate = predicate.and(field, 'notequal', (value));
                     }
                 }
                 return new Query().where(predicate);
@@ -526,7 +531,7 @@ var MultiSelect = /** @class */ (function (_super) {
             valuecheck = this.presentItemValue(this.ulElement);
         }
         if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-            && this.listData != null) {
+            && this.listData != null && !this.enableVirtualization) {
             this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
         }
         else {
@@ -537,6 +542,7 @@ var MultiSelect = /** @class */ (function (_super) {
             query = this.allowFiltering ? query.where(this.fields.text, 'startswith', this.inputElement.value, this.ignoreCase, this.ignoreAccent) : query;
             this.checkForCustomValue(query, this.fields);
             this.isCustomRendered = true;
+            this.remoteCustomValue = this.enableVirtualization ? false : this.remoteCustomValue;
         }
         if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {
             this.removeFocus();
@@ -581,7 +587,9 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {
                 this.initialTextUpdate();
             }
-            this.initialValueUpdate();
+            if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
+                this.initialValueUpdate();
+            }
             this.initialUpdate();
             this.refreshPlaceHolder();
             if (this.mode !== 'CheckBox' && this.changeOnBlur) {
@@ -784,7 +792,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                     filterQuery.where('', this.filterType, this.targetElement(), this.ignoreCase, this.ignoreAccent);
                 }
-                else {
+                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);
                 }
@@ -795,18 +803,9 @@ var MultiSelect = /** @class */ (function (_super) {
             return filterQuery;
         }
         else {
-            if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && !this.virtualSelectAll && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
+            if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && !this.virtualSelectAll) {
                 return this.virtualFilterQuery(filterQuery);
             }
-            else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
-                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
-                    if (filterQuery.queries[queryElements].fn === 'onSkip' || filterQuery.queries[queryElements].fn === 'onTake') {
-                        filterQuery.queries.splice(queryElements, 1);
-                        --queryElements;
-                    }
-                }
-                return filterQuery;
-            }
             return query ? query : this.query ? this.query : new Query();
         }
     };
@@ -970,7 +969,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 var dataItem_1 = {};
                 setValue(field.text, value, dataItem_1);
                 if (typeof getValue((this.fields.value ? this.fields.value : 'value'), customData)
-                    === 'number') {
+                    === 'number' && this.fields.value !== this.fields.text) {
                     setValue(field.value, Math.random(), dataItem_1);
                 }
                 else {
@@ -987,17 +986,19 @@ var MultiSelect = /** @class */ (function (_super) {
                 dataItem_1 = this.allowObjectBinding ? emptyObject_1 : dataItem_1;
                 if (this.enableVirtualization) {
                     this.virtualCustomData = dataItem_1;
-                    var tempData = this.virtualGroupDataSource ? JSON.parse(JSON.stringify(this.virtualGroupDataSource)) : JSON.parse(JSON.stringify(this.dataSource));
+                    var 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);
                     }
                     tempData.splice(0, 0, dataItem_1);
                     this.isCustomDataUpdated = true;
+                    var tempCount = this.totalItemCount;
                     this.viewPortInfo.startIndex = this.virtualItemStartIndex = 0;
                     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;
                 }
                 else {
                     var tempData = JSON.parse(JSON.stringify(this.listData));
@@ -1018,7 +1019,9 @@ var MultiSelect = /** @class */ (function (_super) {
         else if (this.listData && this.mainData && !dataChecks && this.allowCustomValue) {
             if (this.allowFiltering && this.isRemoteSelection && this.remoteCustomValue) {
                 this.isRemoteSelection = false;
-                this.resetList(this.listData, field, query);
+                if (!this.enableVirtualization) {
+                    this.resetList(this.listData, field, query);
+                }
             }
             else if (!this.allowFiltering && this.list) {
                 var liCollections = this.list.querySelectorAll('li.' + dropDownBaseClasses.li + ':not(.e-hide-listitem)');
@@ -1275,21 +1278,25 @@ var MultiSelect = /** @class */ (function (_super) {
             + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
         var previousItem = steps >= 0 ? collection[steps + 1] : collection[0];
         if (this.enableVirtualization && isVirtualKeyAction) {
-            previousItem = steps >= 0 && this.viewPortInfo.startIndex != 0 ? this.liCollections[steps + this.skeletonCount + 1] : 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];
         }
         if (this.enableVirtualization) {
             if (!isNullOrUndefined(previousItem) && !previousItem.classList.contains('e-item-focus')) {
+                this.isKeyBoardAction = true;
                 this.addListFocus(previousItem);
                 this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
             }
             else if (this.viewPortInfo.startIndex == 0) {
+                this.isKeyBoardAction = true;
                 this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
             }
+            this.previousFocusItem = previousItem;
         }
         else {
+            this.isKeyBoardAction = true;
             this.addListFocus(previousItem);
             this.scrollTop(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), this.keyboardEvent.keyCode);
         }
@@ -1306,7 +1313,9 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.enableVirtualization && isVirtualKeyAction) {
             previousItem = steps <= list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
         }
+        this.isKeyBoardAction = true;
         this.addListFocus(previousItem);
+        this.previousFocusItem = previousItem;
         this.scrollBottom(previousItem, this.getIndexByValue(previousItem.getAttribute('data-value')), false, this.keyboardEvent.keyCode);
     };
     MultiSelect.prototype.getItems = function () {
@@ -1495,18 +1504,16 @@ var MultiSelect = /** @class */ (function (_super) {
             case 33:
                 e.preventDefault();
                 if (focusedItem) {
-                    var count = (this.getPageCount() * 2) - 4;
-                    activeIndex = Math.round(count);
-                    activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));
-                    this.pageUpSelection(activeIndex - this.getPageCount(), true);
+                    activeIndex = this.getIndexByValue(this.previousFocusItem.getAttribute('data-value')) - 1;
+                    this.pageUpSelection(activeIndex, true);
                     this.updateAriaAttribute();
                 }
                 break;
             case 34:
                 e.preventDefault();
                 if (focusedItem) {
-                    activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));
-                    this.pageDownSelection(activeIndex + this.getPageCount() + 1, true);
+                    activeIndex = this.getIndexByValue(this.previousFocusItem.getAttribute('data-value'));
+                    this.pageDownSelection(activeIndex, true);
                     this.updateAriaAttribute();
                 }
                 break;
@@ -1542,11 +1549,11 @@ var MultiSelect = /** @class */ (function (_super) {
         else if (this.isPopupOpen()) {
             var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
             var activeIndex = void 0;
-            this.isKeyBoardAction = true;
             switch (e.keyCode) {
                 case 36:
                 case 35:
                     this.isMouseScrollAction = true;
+                    this.isKeyBoardAction = true;
                     this.homeNavigation((e.keyCode === 36) ? true : false);
                     break;
                 case 33:
@@ -1560,19 +1567,22 @@ var MultiSelect = /** @class */ (function (_super) {
                 case 34:
                     e.preventDefault();
                     if (focusedItem) {
-                        this.getIndexByValue(focusedItem.getAttribute('data-value'));
+                        activeIndex = this.getIndexByValue(focusedItem.getAttribute('data-value'));
                         this.pageDownSelection(activeIndex + this.getPageCount());
                         this.updateAriaAttribute();
                     }
                     return;
                 case 38:
+                    this.isKeyBoardAction = true;
                     this.arrowUp(e);
                     break;
                 case 40:
+                    this.isKeyBoardAction = true;
                     this.arrowDown(e);
                     break;
                 case 27:
                     e.preventDefault();
+                    this.isKeyBoardAction = true;
                     this.hidePopup(e);
                     if (this.mode === 'CheckBox') {
                         this.inputElement.focus();
@@ -1580,16 +1590,19 @@ var MultiSelect = /** @class */ (function (_super) {
                     return;
                 case 13:
                     e.preventDefault();
+                    this.isKeyBoardAction = true;
                     if (this.mode !== 'CheckBox') {
                         this.selectByKey(e);
                     }
                     this.checkPlaceholderSize();
                     return;
                 case 32:
+                    this.isKeyBoardAction = true;
                     this.spaceKeySelection(e);
                     return;
                 case 9:
                     e.preventDefault();
+                    this.isKeyBoardAction = true;
                     this.hidePopup(e);
                     this.inputElement.focus();
                     this.overAllWrapper.classList.add(FOCUS);
@@ -1791,7 +1804,6 @@ var MultiSelect = /** @class */ (function (_super) {
                         this.isPreventKeyAction = false;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
-                        nextOffset = nextOffset + (selectedLI.offsetHeight * liCount);
                     }
                     this.list.scrollTop = nextOffset;
                 }
@@ -1823,9 +1835,9 @@ var MultiSelect = /** @class */ (function (_super) {
             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.isKeyBoardAction = false;
                 this.isPreventScrollAction = false;
             }
             else if (this.enableVirtualization && keyCode == 36) {
@@ -1839,7 +1851,6 @@ var MultiSelect = /** @class */ (function (_super) {
                     this.isPreventKeyAction = false;
                     this.isKeyBoardAction = false;
                     this.isPreventScrollAction = false;
-                    nextOffset = nextOffset - (selectedLI.offsetHeight * liCount);
                 }
                 this.list.scrollTop = this.list.scrollTop + nextOffset;
             }
@@ -2040,7 +2051,12 @@ var MultiSelect = /** @class */ (function (_super) {
                             this.addListFocus(elements[temp]);
                         }
                         else {
-                            this.addListFocus(elements[++temp]);
+                            if (this.enableVirtualization && elements[temp + 1].classList.contains('e-virtual-list')) {
+                                this.addListFocus(elements[this.skeletonCount]);
+                            }
+                            else {
+                                this.addListFocus(elements[++temp]);
+                            }
                         }
                         if (temp > -1) {
                             this.updateCheck(elements[temp]);
@@ -2259,6 +2275,9 @@ var MultiSelect = /** @class */ (function (_super) {
                         removeVal = [];
                     }
                     removeVal.splice(index, 1);
+                    if (_this.enableVirtualization && _this.mode === 'CheckBox') {
+                        _this.selectedListData.splice(index, 1);
+                    }
                     _this.setProperties({ value: [].concat([], removeVal) }, true);
                     if (_this.enableVirtualization) {
                         var currentText = index == 0 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index] + _this.delimiterChar, '') : _this.text.replace(_this.delimiterChar + _this.text.split(_this.delimiterChar)[index], '');
@@ -2503,6 +2522,19 @@ var MultiSelect = /** @class */ (function (_super) {
                         _this.listData = list;
                     }
                     value = _this.allowObjectBinding ? _this.getDataByValue(value) : value;
+                    if (_this.enableVirtualization) {
+                        if (isNullOrUndefined(_this.selectedListData)) {
+                            _this.selectedListData = [(_this.getDataByValue(value))];
+                        }
+                        else {
+                            if (Array.isArray(_this.selectedListData)) {
+                                _this.selectedListData.push((_this.getDataByValue(value)));
+                            }
+                            else {
+                                _this.selectedListData = [_this.selectedListData, (_this.getDataByValue(value))];
+                            }
+                        }
+                    }
                     if ((_this.enableVirtualization && value) || !_this.enableVirtualization) {
                         _this.updateListSelectEventCallback(value, element, eve);
                     }
@@ -2694,7 +2726,7 @@ 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.totalItemsCount();
                     }
                     if (!this.list.querySelector('.e-virtual-ddl')) {
                         var virualElement = this.createElement('div', {
@@ -2787,6 +2819,13 @@ 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.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();
+                            }
+                        }
                         if (_this.allowFiltering) {
                             _this.notify('inputFocus', {
                                 module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox', value: 'focus'
@@ -2892,13 +2931,17 @@ var MultiSelect = /** @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: 0,
+            endIndex: this.itemCount,
         };
         this.previousStartIndex = 0;
         this.previousEndIndex = 0;
         if (this.dataSource instanceof DataManager) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.totalItemCount = this.dataCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+            if (this.remoteDataCount >= 0) {
+                this.totalItemCount = this.dataCount = this.remoteDataCount;
+            }
+            else {
+                this.resetList(this.dataSource);
+            }
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -3040,7 +3083,7 @@ var MultiSelect = /** @class */ (function (_super) {
             EventHandler.add(formElement, 'reset', this.resetValueHandler, this);
         }
         EventHandler.add(this.componentWrapper, 'mouseout', this.mouseOut, this);
-        EventHandler.add(this.overAllClear, 'mouseup', this.clearAll, this);
+        EventHandler.add(this.overAllClear, 'mousedown', this.clearAll, this);
         EventHandler.add(this.inputElement, 'paste', this.pasteHandler, this);
     };
     MultiSelect.prototype.onInput = function (e) {
@@ -3084,9 +3127,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (this.allowCustomValue) {
                     this.isRemoteSelection = true;
                 }
-                if (!this.backCommand) {
-                    this.checkAndResetCache();
-                }
+                this.checkAndResetCache();
                 var eventArgs_1 = {
                     preventDefaultAction: false,
                     text: this.targetElement(),
@@ -3115,12 +3156,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 var query = new Query();
                 query = this.allowFiltering && (text !== '') ? query.where(this.fields.text, 'startswith', text, this.ignoreCase, this.ignoreAccent) : query;
                 if (this.enableVirtualization) {
-                    if (this.dataSource instanceof DataManager) {
-                        this.dataUpdater(this.virtualGroupDataSource, query, this.fields);
-                    }
-                    else {
-                        this.dataUpdater(this.dataSource, query, this.fields);
-                    }
+                    this.dataUpdater(this.dataSource, query, this.fields);
                 }
                 else {
                     this.dataUpdater(this.mainData, query, this.fields);
@@ -3279,6 +3315,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             var textValues = this.text != null && this.text != "" ? this.text + ',' + temp : temp;
                             data += temp + delimiterChar + ' ';
                             text.push(textValues);
+                            hiddenElementContent += "<option selected value=\"" + valueItem + "\">" + index + "</option>";
                             break;
                         }
                         else {
@@ -3348,7 +3385,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.unwireListEvents();
         this.wireListEvents();
     };
-    MultiSelect.prototype.initialValueUpdate = function (listItems) {
+    MultiSelect.prototype.initialValueUpdate = function (listItems, isInitialVirtualData) {
         if (this.list) {
             var text = void 0;
             var element = void 0;
@@ -3368,11 +3405,24 @@ var MultiSelect = /** @class */ (function (_super) {
                             for (var i = 0; i < listItems.length; i++) {
                                 if (getValue((this.fields.value ? this.fields.value : 'value'), listItems[i]) === value) {
                                     text = getValue(this.fields.text, listItems[i]);
+                                    if (this.enableVirtualization) {
+                                        if (isNullOrUndefined(this.selectedListData)) {
+                                            this.selectedListData = [listItems[i]];
+                                        }
+                                        else {
+                                            if (Array.isArray(this.selectedListData)) {
+                                                this.selectedListData.push((listItems[i]));
+                                            }
+                                            else {
+                                                this.selectedListData = [this.selectedListData, (listItems[i])];
+                                            }
+                                        }
+                                    }
                                     break;
                                 }
                             }
                         }
-                        if (isNullOrUndefined(text) && this.allowCustomValue) {
+                        if ((isNullOrUndefined(text) && this.allowCustomValue) && ((!(this.dataSource instanceof DataManager)) || (this.dataSource instanceof DataManager && isInitialVirtualData))) {
                             text = this.getTextByValue(value);
                             isCustomData = true;
                         }
@@ -3390,13 +3440,15 @@ var MultiSelect = /** @class */ (function (_super) {
                         this.addChip(text, value);
                         this.addListSelection(element);
                     }
-                    else if (value && this.allowCustomValue) {
+                    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);
                         setValue(this.fields.value, value, newValue);
                         var noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);
-                        this.addItem(newValue, indexItem);
+                        if (!this.enableVirtualization) {
+                            this.addItem(newValue, indexItem);
+                        }
                         if (this.enableVirtualization) {
                             if (this.virtualCustomSelectData && this.virtualCustomSelectData.length >= 0) {
                                 this.virtualCustomSelectData.push(newValue);
@@ -4734,8 +4786,12 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.totalItemsCount = function () {
         var dataSourceCount;
         if (this.dataSource instanceof DataManager) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            dataSourceCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+            if (this.remoteDataCount >= 0) {
+                dataSourceCount = this.totalItemCount = this.dataCount = this.remoteDataCount;
+            }
+            else {
+                this.resetList(this.dataSource);
+            }
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -4745,7 +4801,26 @@ var MultiSelect = /** @class */ (function (_super) {
             this.totalItemCount = dataSourceCount != 0 ? dataSourceCount : this.totalItemCount;
         }
         else {
-            this.totalItemCount = dataSourceCount != 0 ? dataSourceCount - this.value.length : this.totalItemCount;
+            if (this.hideSelectedItem) {
+                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]);
+                            if (value === customValue) {
+                                this.totalItemCount += 1;
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                this.totalItemCount = dataSourceCount != 0 ? dataSourceCount : this.totalItemCount;
+                if (this.allowCustomValue && this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {
+                    this.totalItemCount += this.virtualCustomSelectData.length;
+                }
+            }
         }
     };
     MultiSelect.prototype.presentItemValue = function (ulElement) {
@@ -4784,7 +4859,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 valuecheck = this.presentItemValue(this.ulElement);
             }
             if (prop == 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-                && this.listData != null) {
+                && this.listData != null && !this.enableVirtualization) {
                 this.mainData = null;
                 this.setDynValue = true;
                 this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
@@ -4803,7 +4878,9 @@ var MultiSelect = /** @class */ (function (_super) {
                     var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
                     this.onActionComplete(list, this.mainData);
                 }
-                this.initialValueUpdate();
+                if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
+                    this.initialValueUpdate();
+                }
                 if (this.mode !== 'Box' && !this.inputFocus) {
                     this.updateDelimView();
                 }
@@ -4856,6 +4933,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     _this.beforePopupOpen = false;
                     _this.overAllWrapper.classList.remove(iconAnimation);
+                    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');
@@ -4869,22 +4947,27 @@ 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.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.virtualListInfo = _this.viewPortInfo;
                         _this.previousStartIndex = 0;
                         _this.previousEndIndex = 0;
                     }
                     var dataSourceCount = void 0;
                     if (_this.dataSource instanceof DataManager) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        dataSourceCount = _this.virtualGroupDataSource && _this.virtualGroupDataSource.length ? _this.virtualGroupDataSource.length : 0;
+                        if (_this.remoteDataCount >= 0) {
+                            _this.totalItemCount = _this.dataCount = _this.remoteDataCount;
+                        }
+                        else {
+                            _this.resetList(_this.dataSource);
+                        }
                     }
                     else {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         dataSourceCount = _this.dataSource && _this.dataSource.length ? _this.dataSource.length : 0;
                     }
-                    if (_this.enableVirtualization && (_this.allowFiltering || _this.allowCustomValue) && _this.value != null && _this.targetElement() && _this.totalItemCount !== dataSourceCount) {
+                    if (_this.enableVirtualization && (_this.allowFiltering || _this.allowCustomValue) && (_this.targetElement() || typedValue) && _this.totalItemCount !== dataSourceCount) {
                         _this.updateInitialData();
                         _this.checkAndResetCache();
                     }
@@ -5219,8 +5302,12 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (this.dataSource instanceof DataManager) {
                     this.dataSource.executeQuery(new Query().where(predicate))
                         .then(function (e) {
-                        if (e.result.result.length > 0) {
-                            listItems_2 = e.result.result;
+                        if (e.result.length > 0) {
+                            listItems_2 = e.result;
+                            _this.initStatus = false;
+                            _this.initialValueUpdate(listItems_2, true);
+                            _this.initialUpdate();
+                            _this.initStatus = true;
                         }
                     });
                 }
@@ -5235,7 +5322,9 @@ var MultiSelect = /** @class */ (function (_super) {
             else {
                 this.setInitialValue = function () {
                     _this.initStatus = false;
-                    _this.initialValueUpdate(listItems_2);
+                    if (!_this.enableVirtualization || (_this.enableVirtualization && (!(_this.dataSource instanceof DataManager)))) {
+                        _this.initialValueUpdate(listItems_2);
+                    }
                     _this.initialUpdate();
                     _this.setInitialValue = null;
                     _this.initStatus = true;