@syncfusion/ej2-dropdowns 29.2.8 → 29.2.11-81740

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

@@ -136,7 +136,7 @@ function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, typ
     const listItems = items;
     ignoreCase = ignoreCase !== undefined && ignoreCase !== null ? ignoreCase : true;
     const itemData = { item: null, index: null };
-    if (inputVal && inputVal.length) {
+    if (inputVal && inputVal.length && items) {
         const strLength = inputVal.length;
         let queryStr = ignoreCase ? inputVal.toLocaleLowerCase() : inputVal;
         queryStr = escapeCharRegExp(queryStr);
@@ -255,14 +255,14 @@ function revertHighlightSearch(content) {
     }
 }
 
-var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 class VirtualScroll {
     constructor(parent) {
         this.sentinelInfo = {
@@ -803,12 +803,12 @@ class VirtualScroll {
     }
 }
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 class FieldSettings extends ChildProperty {
 }
 __decorate([
@@ -1275,7 +1275,7 @@ let DropDownBase = class DropDownBase extends Component {
                     isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
                 }
             }
-            if (this.getModuleName() === 'multiselect') {
+            if (this.getModuleName() === 'multiselect' && !this.isVirtualReorder && !isContainSkeleton.firstChild.classList.contains('e-reorder')) {
                 for (let i = 0; i < totalSkeletonCount && this.totalItemCount !== this.viewPortInfo.endIndex; i++) {
                     const liElement = this.createElement('li', { className: `${dropDownBaseClasses.virtualList} e-virtual-list-end`, styles: 'overflow: inherit' });
                     if (this.isVirtualizationEnabled && this.itemTemplate) {
@@ -2869,12 +2869,12 @@ DropDownBase = __decorate([
     NotifyPropertyChanges
 ], DropDownBase);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 // don't use space in classnames
 const dropDownListClasses = {
     root: 'e-dropdownlist',
@@ -7346,12 +7346,12 @@ DropDownList = __decorate$1([
     NotifyPropertyChanges
 ], DropDownList);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 const RTL = 'e-rtl';
 const DROPDOWNTREE = 'e-ddt';
 const HIDDENELEMENT = 'e-ddt-hidden';
@@ -7806,6 +7806,11 @@ let DropDownTree = class DropDownTree extends Component {
                     }
                 }
                 this.treeObj.fields = this.getTreeFields(fields);
+                if ((this.previousFilterText && this.previousFilterText !== '' && args.text !== '' && this.previousFilterText.indexOf(args.text) !== -1) ||
+                    (args.text && args.text !== '' && this.previousFilterText !== '' && args.text.indexOf(this.previousFilterText) !== -1)) {
+                    this.isFilterRestore = true;
+                }
+                this.previousFilterText = args.text;
                 this.treeObj.dataBind();
                 if (this.popupObj) {
                     this.popupObj.refreshPosition();
@@ -10857,12 +10862,12 @@ DropDownTree = __decorate$2([
     NotifyPropertyChanges
 ], DropDownTree);
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 const SPINNER_CLASS = 'e-atc-spinner-icon';
 dropDownListClasses.root = 'e-combobox';
 const inputObject$1 = {
@@ -11919,12 +11924,12 @@ ComboBox = __decorate$3([
     NotifyPropertyChanges
 ], ComboBox);
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 dropDownListClasses.root = 'e-autocomplete';
 dropDownListClasses.icon = 'e-input-group-icon e-ddl-icon e-search-icon';
 /**
@@ -12628,12 +12633,12 @@ function encodePlaceholder(placeholder) {
 }
 /* eslint-enable valid-jsdoc */
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 const FOCUS = 'e-input-focus';
 const DISABLED$1 = 'e-disabled';
 const OVER_ALL_WRAPPER = 'e-multiselect e-input-group e-control-wrapper';
@@ -12908,8 +12913,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         else {
             this.resetList(this.dataSource, this.fields, query);
         }
-        this.isVirtualReorder = false;
         this.UpdateSkeleton();
+        this.isVirtualReorder = false;
         this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
         this.virtualItemCount = this.itemCount;
         if (this.mode !== 'CheckBox') {
@@ -13087,7 +13092,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!isNullOrUndefined(this.value)) {
             this.tempValues = this.allowObjectBinding ? this.value.slice() : this.value.slice();
         }
-        let customValue = this.allowObjectBinding ?
+        let customValue = this.allowObjectBinding ? this.enableVirtualization ?
+            this.getVirtualDataByValue(this.getFormattedValue(value)) :
             this.getDataByValue(this.getFormattedValue(value)) : this.getFormattedValue(value);
         if (this.allowCustomValue && (value !== 'false' && customValue === false || (!isNullOrUndefined(customValue) &&
             customValue.toString() === 'NaN'))) {
@@ -13211,8 +13217,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (!isNullOrUndefined(this.value)) {
             valuecheck = this.presentItemValue(this.ulElement);
         }
+        const isContainsValue = valuecheck.some((item) => item !== null);
         if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-            && this.listData != null && !(valuecheck.length === 1 && valuecheck[0] == null)) {
+            && this.listData != null && isContainsValue) {
             this.isaddNonPresentItems = true;
             this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
             this.isaddNonPresentItems = false;
@@ -13278,7 +13285,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
                 this.initialValueUpdate();
             }
-            else if (!this.isRemoveSelection) {
+            else if (!this.isRemoveSelection && (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager))))) {
                 this.initialValueUpdate(this.listData, true);
             }
             this.initialUpdate();
@@ -13496,9 +13503,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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.skip(0).take(this.maximumSelectionLength).requiresCount() : this.query ?
+                    this.query.skip(0).take(this.maximumSelectionLength).requiresCount() :
+                    new Query().skip(0).take(this.maximumSelectionLength).requiresCount();
             }
             return filterQuery;
         }
@@ -13507,9 +13514,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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.skip(0).take(this.maximumSelectionLength).requiresCount() : this.query ?
+                    this.query.skip(0).take(this.maximumSelectionLength).requiresCount() :
+                    new Query().skip(0).take(this.maximumSelectionLength).requiresCount();
             }
             return query ? query : this.query ? this.query : new Query();
         }
@@ -14485,6 +14492,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         const focuseElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);
         this.focusFirstListItem = !isNullOrUndefined(this.liCollections[0]) ? this.liCollections[0].classList.contains('e-item-focus') :
             false;
+        if (this.list && this.list.querySelector('.e-list-parent.e-ul.e-reorder')) {
+            const elements = this.list.querySelectorAll('li.'
+                + dropDownBaseClasses.li
+                + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list-end)');
+            if (elements.length > 0) {
+                this.focusFirstListItem = !isNullOrUndefined(elements[0]) ? elements[0].classList.contains('e-item-focus') :
+                    false;
+            }
+        }
         const index = Array.prototype.slice.call(list).indexOf(focuseElem);
         if (index <= 0 && (this.mode === 'CheckBox' && this.allowFiltering)) {
             this.keyAction = false;
@@ -14903,10 +14919,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
             else if (elements.length) {
                 if (this.mode === 'CheckBox' && this.showSelectAll && !isNullOrUndefined(selectAllParent && position === -1)) {
-                    if (!this.focusFirstListItem && selectAllParent.classList.contains('e-item-focus')) {
+                    if ((!this.focusFirstListItem || position === 1) && selectAllParent.classList.contains('e-item-focus')) {
                         selectAllParent.classList.remove('e-item-focus');
                     }
-                    else if (this.focusFirstListItem && !selectAllParent.classList.contains('e-item-focus')) {
+                    else if (this.focusFirstListItem && !selectAllParent.classList.contains('e-item-focus') && !(position === 1 && this.list.querySelector('.e-item-focus'))) {
                         selectAllParent.classList.add('e-item-focus');
                     }
                 }
@@ -15043,6 +15059,26 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         addClass([element], CHIP_SELECTED);
         this.trigger('chipSelection', e);
     }
+    getVirtualDataByValue(value) {
+        if (!isNullOrUndefined(this.selectedListData)) {
+            const type = this.typeOfData(this.selectedListData).typeof;
+            if (type === 'string' || type === 'number' || type === 'boolean') {
+                for (const item of this.selectedListData) {
+                    if (!isNullOrUndefined(item) && item === value) {
+                        return item;
+                    }
+                }
+            }
+            else {
+                for (const item of this.selectedListData) {
+                    if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {
+                        return item;
+                    }
+                }
+            }
+        }
+        return null;
+    }
     onChipRemove(e) {
         if (e.which === 3 || e.button === 2) {
             return;
@@ -15050,7 +15086,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.enabled && !this.readonly) {
             const element = e.target.parentElement;
             const customVal = element.getAttribute('data-value');
-            let value = this.allowObjectBinding ?
+            let value = this.allowObjectBinding ? this.enableVirtualization ?
+                this.getVirtualDataByValue(this.getFormattedValue(customVal)) :
                 this.getDataByValue(this.getFormattedValue(customVal)) : this.getFormattedValue(customVal);
             if (this.allowCustomValue && ((customVal !== 'false' && value === false) ||
                 (!isNullOrUndefined(value) && value.toString() === 'NaN'))) {
@@ -15167,7 +15204,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.virtualSelectAll = false;
                     const removeVal = this.value.slice(0);
                     removeVal.splice(index, 1);
-                    if (this.enableVirtualization && this.mode === 'CheckBox') {
+                    if (this.enableVirtualization && this.selectedListData) {
                         this.selectedListData.splice(index, 1);
                     }
                     this.setProperties({ value: [].concat([], removeVal) }, true);
@@ -15393,7 +15430,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     dispatchSelect(value, eve, element, isNotTrigger, length, dataValue, text) {
         const list = this.listData;
-        if (this.initStatus && !isNotTrigger) {
+        if (this.initStatus && !isNotTrigger && (!this.allowObjectBinding || (this.allowObjectBinding && value))) {
             value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
             const val = dataValue ? dataValue : this.getDataByValue(value);
             const eventArgs = {
@@ -15426,7 +15463,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     value = this.allowObjectBinding ? this.getDataByValue(value) : value;
                     if (this.enableVirtualization) {
                         if (isNullOrUndefined(this.selectedListData)) {
-                            this.selectedListData = [(this.getDataByValue(value))];
+                            this.selectedListData = this.allowObjectBinding ? [value] : [(this.getDataByValue(value))];
                         }
                         else {
                             if (dataValue) {
@@ -15439,10 +15476,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             }
                             else {
                                 if (Array.isArray(this.selectedListData)) {
-                                    this.selectedListData.push((this.getDataByValue(value)));
+                                    this.selectedListData.push(this.allowObjectBinding ? value :
+                                        (this.getDataByValue(value)));
                                 }
                                 else {
-                                    this.selectedListData = [this.selectedListData, (this.getDataByValue(value))];
+                                    this.selectedListData = [this.selectedListData, this.allowObjectBinding ? value :
+                                            (this.getDataByValue(value))];
                                 }
                             }
                         }
@@ -16296,7 +16335,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 else {
                     if (this.listData) {
                         if (this.enableVirtualization) {
-                            if (delim && !this.isDynamicRemoteVirtualData) {
+                            if (delim && !this.isDynamicRemoteVirtualData && !isInitialVirtualData) {
                                 data = this.delimiterWrapper && this.delimiterWrapper.innerHTML === '' ? data :
                                     this.delimiterWrapper.innerHTML;
                             }
@@ -16308,7 +16347,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                                 text = this.text.split(delimiterChar);
                             }
                             else {
-                                temp = isInitialVirtualData && delim ? this.text : this.getTextByValue(value);
+                                temp = isInitialVirtualData && delim ? this.text.replace(/,/g, delimiterChar + ' ') : this.getTextByValue(value);
                                 const textValues = this.isDynamicRemoteVirtualData && value != null && value !== '' && !isInitialVirtualData ?
                                     this.getTextByValue(value) : isInitialVirtualData ? this.text : (this.text && this.text !== '' ? this.text + this.delimiterChar + temp : temp);
                                 data += temp + delimiterChar + ' ';
@@ -16443,11 +16482,14 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                                             this.selectedListData = [listItems[i]];
                                         }
                                         else {
-                                            if (Array.isArray(this.selectedListData)) {
-                                                this.selectedListData.push((listItems[i]));
-                                            }
-                                            else {
-                                                this.selectedListData = [this.selectedListData, (listItems[i])];
+                                            if ((this.allowObjectBinding && !this.isObjectInArray(listItems[i], this.selectedListData)) ||
+                                                !this.allowObjectBinding) {
+                                                if (Array.isArray(this.selectedListData)) {
+                                                    this.selectedListData.push((listItems[i]));
+                                                }
+                                                else {
+                                                    this.selectedListData = [this.selectedListData, (listItems[i])];
+                                                }
                                             }
                                         }
                                     }
@@ -16461,6 +16503,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             text = this.getTextByValue(value);
                             isCustomData = true;
                         }
+                        else if ((isNullOrUndefined(text) && !this.allowCustomValue) &&
+                            ((!(this.dataSource instanceof DataManager)) ||
+                                (this.dataSource instanceof DataManager && isInitialVirtualData))) {
+                            this.value.splice(index, 1);
+                            index -= 1;
+                        }
                     }
                     else {
                         text = this.getTextByValue(value);
@@ -17513,6 +17561,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
             this.updateHiddenElement();
             this.setProperties({ value: [] }, true);
+            this.selectedListData = [];
             this.virtualSelectAll = false;
             if (!isNullOrUndefined(this.viewPortInfo.startIndex) && !isNullOrUndefined(this.viewPortInfo.endIndex)) {
                 this.notify('setCurrentViewDataAsync', {
@@ -18021,6 +18070,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     updateVal(newProp, oldProp, prop) {
         if (!this.list) {
             this.onLoadSelect();
+            if (this.enableVirtualization) {
+                this.setProperties({ text: '' }, true);
+                this.selectedListData = [];
+                this.checkInitialValue();
+            }
         }
         else if ((this.dataSource instanceof DataManager) && (!this.listData || !(this.mainList && this.mainData))) {
             this.onLoadSelect();
@@ -18030,8 +18084,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
                 valuecheck = this.presentItemValue(this.ulElement);
             }
+            const isContainsValue = valuecheck.some((item) => item !== null);
             if (prop === 'value' && valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-                && this.listData != null) {
+                && this.listData != null && isContainsValue) {
                 this.mainData = null;
                 this.setDynValue = true;
                 this.isaddNonPresentItems = true;
@@ -18039,6 +18094,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 this.isaddNonPresentItems = false;
             }
             else {
+                this.selectedListData = [];
                 if (prop === 'text') {
                     this.initialTextUpdate();
                     newProp = this.value;
@@ -18059,10 +18115,43 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.initialValueUpdate(this.dataSource, true);
                 }
                 else if (!this.isInitRemoteVirtualData) {
-                    this.isDynamicRemoteVirtualData = true;
-                    this.initialValueUpdate(this.listData, true);
-                    this.isDynamicRemoteVirtualData = false;
-                    this.initialUpdate();
+                    if (this.allowObjectBinding && !isContainsValue && this.value && this.value.length) {
+                        const fields = !this.isPrimitiveData ? this.fields.value : '';
+                        let predicate;
+                        for (let i = 0; i < this.value.length; i++) {
+                            const value = this.allowObjectBinding ?
+                                getValue((this.fields.value) ? this.fields.value : '', this.value[i]) :
+                                this.value[i];
+                            if (i === 0) {
+                                predicate = new Predicate(fields, 'equal', value);
+                            }
+                            else {
+                                predicate = predicate.or(fields, 'equal', value);
+                            }
+                        }
+                        if (this.dataSource instanceof DataManager) {
+                            this.dataSource.executeQuery(new Query().where(predicate))
+                                .then((e) => {
+                                if (e.result.length > 0) {
+                                    const listItems = e.result;
+                                    this.isDynamicRemoteVirtualData = true;
+                                    setTimeout(() => {
+                                        this.initialValueUpdate(listItems, true);
+                                        this.isDynamicRemoteVirtualData = false;
+                                        if (!this.inputFocus || (this.inputFocus && this.mode !== 'Default')) {
+                                            this.initialUpdate();
+                                        }
+                                    }, 100);
+                                }
+                            });
+                        }
+                    }
+                    else {
+                        this.isDynamicRemoteVirtualData = true;
+                        this.initialValueUpdate(this.listData, true);
+                        this.isDynamicRemoteVirtualData = false;
+                        this.initialUpdate();
+                    }
                 }
                 if (this.mode !== 'Box' && !this.inputFocus) {
                     this.updateDelimView();
@@ -19711,12 +19800,12 @@ class CheckBoxSelection {
     }
 }
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var ListBox_1;
 /**
  * Defines the Selection settings of List Box.
@@ -22321,12 +22410,12 @@ const listBoxClasses = {
     clearIcon: 'e-clear-icon'
 };
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * The Mention component is used to list someone or something based on user input in textarea, input,
  * or any other editable element from which the user can select.
@@ -22670,12 +22759,14 @@ let Mention = class Mention extends DropDownBase {
         const isValid = currentRange && mentionRegex.test(currentRange) ? false : true;
         let lastWordRange = this.getLastLetter(currentRange);
         const previousChar = currentRange ? currentRange.charAt(Math.max(0, currentRange.indexOf(this.mentionChar) - 1)) : '';
-        if (isValid && this.allowSpaces && currentRange && currentRange.includes(this.mentionChar) && currentRange.split(this.mentionChar).pop() !== ''
-            && (!this.requireLeadingSpace || (this.requireLeadingSpace && (previousChar === ' ' || currentRange.indexOf(this.mentionChar) === 0)))) {
-            lastWordRange = this.mentionChar + currentRange.split(this.mentionChar).pop();
-        }
-        if (!this.requireLeadingSpace && lastWordRange && lastWordRange.includes(this.mentionChar)) {
-            lastWordRange = this.mentionChar + lastWordRange.split(this.mentionChar).pop();
+        if (!this.allowSpaces) {
+            if (isValid && currentRange && currentRange.includes(this.mentionChar) && currentRange.split(this.mentionChar).pop() !== ''
+                && (!this.requireLeadingSpace || (this.requireLeadingSpace && (previousChar === ' ' || currentRange.indexOf(this.mentionChar) === 0)))) {
+                lastWordRange = this.mentionChar + currentRange.split(this.mentionChar).pop();
+            }
+            if (!this.requireLeadingSpace && lastWordRange && lastWordRange.includes(this.mentionChar)) {
+                lastWordRange = this.mentionChar + lastWordRange.split(this.mentionChar).pop();
+            }
         }
         const lastTwoLetters = this.mentionChar.toString() + this.mentionChar.toString();
         // eslint-disable-next-line security/detect-non-literal-regexp
@@ -22688,7 +22779,7 @@ let Mention = class Mention extends DropDownBase {
             this.hidePopup();
             return;
         }
-        if (((!currentRange || !lastWordRange) || (!lastWordRange.includes(this.mentionChar) && !this.requireLeadingSpace)) || e.code === 'Enter' || e.keyCode === 27 ||
+        if (((!currentRange || !lastWordRange) || (!lastWordRange.includes(this.mentionChar) && !this.requireLeadingSpace && !this.allowSpaces)) || e.code === 'Enter' || e.keyCode === 27 ||
             (lastWordRange.match(Regex) && lastWordRange.match(Regex).length > 1) ||
             (this.isContentEditable(this.inputElement) && this.range.startContainer &&
                 this.range.startContainer.previousElementSibling && this.range.startContainer.previousElementSibling.tagName !== 'BR' && this.range.startContainer.textContent.split('').length > 0 &&