@syncfusion/ej2-dropdowns 35.1.39 → 35.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 35.1.39
+*  version : 35.1.41
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "35.1.39",
+  "version": "35.1.41",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -10,9 +10,9 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~35.1.37",
     "@syncfusion/ej2-data": "~35.1.37",
-    "@syncfusion/ej2-inputs": "~35.1.37",
+    "@syncfusion/ej2-inputs": "~35.1.41",
     "@syncfusion/ej2-lists": "~35.1.37",
-    "@syncfusion/ej2-navigations": "~35.1.39",
+    "@syncfusion/ej2-navigations": "~35.1.40",
     "@syncfusion/ej2-notifications": "~35.1.37",
     "@syncfusion/ej2-popups": "~35.1.39"
   },

package/src/drop-down-list/drop-down-list.d.ts

@@ -113,6 +113,9 @@ export declare class DropDownList extends DropDownBase implements IInput {
     };
     protected isCustomFilter: boolean;
     private isSecondClick;
+    private filterGeneration;
+    private pendingFilterRequests;
+    private isStaleFilter;
     protected isListSearched: boolean;
     protected preventChange: boolean;
     protected selectedElementID: string;

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

@@ -86,6 +86,9 @@ var DropDownList = /** @class */ (function (_super) {
      */
     function DropDownList(options, element) {
         var _this = _super.call(this, options, element) || this;
+        _this.filterGeneration = null;
+        _this.pendingFilterRequests = 0;
+        _this.isStaleFilter = false;
         _this.isListSearched = false;
         _this.preventChange = false;
         _this.isTouched = false;
@@ -138,6 +141,9 @@ var DropDownList = /** @class */ (function (_super) {
         this.preventAltUp = false;
         this.isCustomFilter = false;
         this.isSecondClick = false;
+        this.filterGeneration = null;
+        this.pendingFilterRequests = 0;
+        this.isStaleFilter = false;
         this.previousValue = null;
         this.keyConfigure = {
             tab: 'tab',
@@ -192,7 +198,7 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.floatLabelChange = function () {
         if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {
             var floatElement = this.inputWrapper.container.querySelector('.e-float-text');
-            if (floatElement && this.inputElement.value !== '' || this.isInteracted) {
+            if (floatElement && (this.inputElement.value !== '' || this.isInteracted)) {
                 classList(floatElement, ['e-label-top'], ['e-label-bottom']);
             }
             else if (floatElement) {
@@ -1554,6 +1560,10 @@ var DropDownList = /** @class */ (function (_super) {
         li = null;
     };
     DropDownList.prototype.selectEventCallback = function (li, e, preventSelect, selectedData, value) {
+        if (this.getModuleName() === 'dropdownlist' && this.allowFiltering &&
+            this.dataSource instanceof DataManager && this.filterGeneration) {
+            this.isStaleFilter = true;
+        }
         this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
         if (this.itemData !== selectedData) {
             this.previousValue = (!isNullOrUndefined(this.itemData)) ? typeof this.itemData == 'object' &&
@@ -1600,7 +1610,11 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.setValue = function (e, autofill) {
         var dataItem = this.getItemData();
         this.isTouched = !isNullOrUndefined(e);
-        if (dataItem.value === null) {
+        if (dataItem.value === null && !isNullOrUndefined(this.item) &&
+            this.item.getAttribute('data-value') === 'null') {
+            Input.setValue('null', this.inputElement, this.floatLabelType, this.showClearButton);
+        }
+        else if (dataItem.value === null) {
             Input.setValue(null, this.inputElement, this.floatLabelType, this.showClearButton);
         }
         else {
@@ -1645,6 +1659,10 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.setSelection = function (li, e) {
+        if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.dataSource instanceof DataManager &&
+            this.pendingFilterRequests > 0 && this.isValidLI(li)) {
+            this.isStaleFilter = true;
+        }
         if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected
             && li.classList.contains(dropDownBaseClasses.selected)))) {
             this.updateSelectedItem(li, e, false, true);
@@ -2217,7 +2235,21 @@ var DropDownList = /** @class */ (function (_super) {
                     this.previousStartIndex = 0;
                     this.virtualListInfo = null;
                 }
+                if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && dataSource instanceof DataManager) {
+                    this.filterGeneration = {
+                        value: this.value
+                    };
+                    this.pendingFilterRequests++;
+                }
                 this.resetList(dataSource, fields, query);
+                if (this.getModuleName() === 'dropdownlist' && this.allowFiltering &&
+                    dataSource instanceof DataManager && !this.isRequesting) {
+                    this.pendingFilterRequests--;
+                    if (this.pendingFilterRequests === 0) {
+                        this.filterGeneration = null;
+                        this.isStaleFilter = false;
+                    }
+                }
                 if (this.getModuleName() === 'dropdownlist' && this.list.classList.contains(dropDownBaseClasses.noData)) {
                     this.popupContentElement.setAttribute('role', 'status');
                     this.popupContentElement.setAttribute('id', 'no-record');
@@ -2345,6 +2377,14 @@ var DropDownList = /** @class */ (function (_super) {
         });
     };
     DropDownList.prototype.onActionFailure = function (e) {
+        if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.dataSource instanceof DataManager &&
+            this.pendingFilterRequests > 0) {
+            this.pendingFilterRequests--;
+            if (this.pendingFilterRequests === 0) {
+                this.filterGeneration = null;
+                this.isStaleFilter = false;
+            }
+        }
         _super.prototype.onActionFailure.call(this, e);
         if (this.beforePopupOpen) {
             this.renderPopup();
@@ -2356,6 +2396,26 @@ var DropDownList = /** @class */ (function (_super) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
         var _this = this;
+        if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.dataSource instanceof DataManager &&
+            !isNullOrUndefined(e) && this.pendingFilterRequests > 0) {
+            this.pendingFilterRequests--;
+            if (this.filterGeneration && (this.isStaleFilter || this.filterGeneration.value !== this.value)) {
+                if (this.actionCompleteData.ulElement && this.actionCompleteData.list) {
+                    ulElement = this.actionCompleteData.ulElement.cloneNode(true);
+                    list = this.actionCompleteData.list;
+                    e = null;
+                    this.typedString = '';
+                    this.isTyped = false;
+                    if (this.filterInput) {
+                        this.filterInput.value = '';
+                    }
+                }
+            }
+            if (this.pendingFilterRequests === 0) {
+                this.filterGeneration = null;
+                this.isStaleFilter = false;
+            }
+        }
         if (this.dataSource instanceof DataManager && !isNullOrUndefined(e) && !this.virtualGroupDataSource) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.totalItemCount = e.count;
@@ -2623,7 +2683,16 @@ var DropDownList = /** @class */ (function (_super) {
                 return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value_1) ||
                     (getValue(_this.fields.value, data) === value_1));
             });
-            if (!isExist) {
+            var isRemoteFilteredDropDownList = this.getModuleName() === 'dropdownlist' && this.allowFiltering &&
+                this.dataSource instanceof DataManager;
+            var isExistInCachedList = Boolean(isRemoteFilteredDropDownList && this.actionCompleteData.list &&
+                this.actionCompleteData.list.some(function (data) {
+                    return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value_1) ||
+                        (getValue(_this.fields.value, data) === value_1));
+                }));
+            var isExistInCachedElement = Boolean(isRemoteFilteredDropDownList && this.actionCompleteData.ulElement &&
+                Array.prototype.some.call(this.actionCompleteData.ulElement.querySelectorAll('li[data-value]'), function (item) { return item.getAttribute('data-value') === String(value_1); }));
+            if (!isExist && (!isRemoteFilteredDropDownList || (!isExistInCachedList && !isExistInCachedElement))) {
                 this.addItem(this.itemData);
             }
         }
@@ -3984,6 +4053,47 @@ var DropDownList = /** @class */ (function (_super) {
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this_1.inputElement);
+                    if (this_1.getModuleName() === 'dropdownlist') {
+                        if (!newProp.placeholder || newProp.placeholder.trim() === '') {
+                            var label = this_1.inputWrapper.container.querySelector('.e-float-text');
+                            if (label) {
+                                label.remove();
+                            }
+                            this_1.inputElement.removeAttribute('aria-labelledby');
+                        }
+                        else if (this_1.floatLabelType !== 'Never' && !this_1.value) {
+                            var floatLabel = this_1.inputWrapper.container
+                                .querySelector('.e-float-text');
+                            if (!floatLabel) {
+                                floatLabel = this_1.createElement('label');
+                                floatLabel.classList.add('e-float-text');
+                                if (this_1.floatLabelType === 'Auto') {
+                                    floatLabel.classList.add('e-label-bottom');
+                                }
+                                else if (this_1.floatLabelType === 'Always') {
+                                    floatLabel.classList.add('e-label-top');
+                                }
+                                floatLabel.id = 'label_' + this_1.inputElement.id;
+                                floatLabel.setAttribute('for', this_1.inputElement.id);
+                                var floatLine = this_1.inputWrapper.container
+                                    .querySelector('.e-float-line');
+                                var icon = this_1.inputWrapper.container
+                                    .querySelector('.e-input-group-icon');
+                                if (floatLine) {
+                                    floatLine.insertAdjacentElement('afterend', floatLabel);
+                                }
+                                else if (icon) {
+                                    this_1.inputWrapper.container.insertBefore(floatLabel, icon);
+                                }
+                                else {
+                                    this_1.inputWrapper.container.appendChild(floatLabel);
+                                }
+                            }
+                            floatLabel.style.width = this_1.inputElement.offsetWidth + 'px';
+                            floatLabel.textContent = newProp.placeholder;
+                            this_1.inputElement.setAttribute('aria-labelledby', floatLabel.id);
+                        }
+                    }
                     break;
                 case 'filterBarPlaceholder':
                     if (this_1.filterInput) {
@@ -4308,6 +4418,10 @@ var DropDownList = /** @class */ (function (_super) {
                 label.style.width = calculateWidth + 'px';
             }
         }
+        if (label && this.getModuleName() === 'dropdownlist' && (!this.placeholder || this.placeholder.trim() === '')) {
+            label.remove();
+            this.inputElement.removeAttribute('aria-labelledby');
+        }
     };
     /**
      * Return the module name of this component.
@@ -4572,6 +4686,9 @@ var DropDownList = /** @class */ (function (_super) {
      */
     DropDownList.prototype.destroy = function () {
         this.isActive = false;
+        this.isStaleFilter = false;
+        this.filterGeneration = null;
+        this.pendingFilterRequests = 0;
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }

package/src/drop-down-tree/drop-down-tree.d.ts

@@ -345,6 +345,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private previousFilterText;
     private fallbackValue;
     private uncheckedNodeId;
+    private isTotalCountClicked;
     /**
      * Specifies the template that renders to the popup list content of the
      * Dropdown Tree component when the data fetch request from the remote server fails.
@@ -849,6 +850,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private renderTree;
     private updateIndeterminateNodes;
     private renderPopup;
+    protected getAppendToElement(): HTMLElement;
     private checkCollision;
     private removeFocus;
     private updateFocus;

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

@@ -179,6 +179,7 @@ var DropDownTree = /** @class */ (function (_super) {
         _this.isFromFilterChange = false;
         _this.fallbackValue = [];
         _this.uncheckedNodeId = null;
+        _this.isTotalCountClicked = false;
         return _this;
     }
     /**
@@ -319,7 +320,7 @@ var DropDownTree = /** @class */ (function (_super) {
         this.tree = this.createElement('div', { id: this.element.id + '_tree' });
         this.popupDiv.appendChild(this.tree);
         if (!this.destroyPopupOnHide) {
-            document.body.appendChild(this.popupDiv);
+            this.getAppendToElement().appendChild(this.popupDiv);
         }
         this.wireTreeEvents();
         addClass([this.popupDiv], DDTHIDEICON);
@@ -409,6 +410,11 @@ var DropDownTree = /** @class */ (function (_super) {
                             _this.hidePopup();
                         }
                         break;
+                    case 'tab':
+                        if (_this.isPopupOpen && !isNOU(_this.popupDiv) && _this.popupDiv.classList.contains('e-no-data')) {
+                            _this.hidePopup();
+                        }
+                        break;
                     case 'shiftTab':
                         addClass([_this.inputWrapper], [INPUTFOCUS]);
                         break;
@@ -1829,7 +1835,7 @@ var DropDownTree = /** @class */ (function (_super) {
                     });
                     _this.popupEle.setAttribute('role', 'region');
                     _this.popupEle.setAttribute('aria-label', _this.element.id);
-                    document.body.appendChild(_this.popupEle);
+                    _this.getAppendToElement().appendChild(_this.popupEle);
                     _this.createPopup(_this.popupEle);
                 }
                 else {
@@ -1922,6 +1928,16 @@ var DropDownTree = /** @class */ (function (_super) {
             }
         });
     };
+    DropDownTree.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            var popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     DropDownTree.prototype.checkCollision = function (popupEle) {
         var collision = isCollide(popupEle);
         if (collision.length > 0) {
@@ -2045,6 +2061,12 @@ var DropDownTree = /** @class */ (function (_super) {
         var isScroller = target.classList.contains(DROPDOWN) ? true :
             (matches(target, '.e-ddt .e-popup') || matches(target, '.e-ddt .e-treeview'));
         var isSelectAllArea = target.classList.contains('e-ripple-container');
+        if (this.overFlowWrapper && !this.overFlowWrapper.classList.contains(HIDEICON) && !this.isPopupOpen) {
+            this.isTotalCountClicked = true;
+        }
+        else {
+            this.isTotalCountClicked = false;
+        }
         if ((this.isPopupOpen && ((!isNOU(this.inputWrapper) &&
             this.inputWrapper.contains(target)) || isTree || isScroller || isHeader || isFooter || isSelectAllArea)) ||
             ((this.allowMultiSelection || this.showCheckBox) && (this.isPopupOpen && target.classList.contains(CHIP_CLOSE) ||
@@ -3092,7 +3114,8 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.removeChip = function (e) {
-        if (!this.enabled || this.readonly) {
+        if (!this.enabled || this.readonly || this.isTotalCountClicked) {
+            this.isTotalCountClicked = false;
             return;
         }
         if (e.target.classList.contains('e-chips-close') && !this.isPopupOpen) {

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

@@ -175,12 +175,14 @@ var CheckBoxSelection = /** @class */ (function () {
         var target;
         if (!isNullOrUndefined(args.e)) {
             var frameElm = args.li.querySelector('.e-checkbox-wrapper .e-frame');
-            target = !isNullOrUndefined(args.e.target) ?
-                (args.e.target.classList.contains('e-frame')
-                    && (!this.parent.showSelectAll
-                        || (this.checkAllParent && !this.checkAllParent.contains(args.e.target)))) ?
-                    args.e.target : args.li.querySelector('.e-checkbox-wrapper').childNodes[1]
-                : args.li.querySelector('.e-checkbox-wrapper').childNodes[1];
+            var checkboxWrapper = args.li.querySelector('.e-checkbox-wrapper');
+            target = !isNullOrUndefined(args.e.target)
+                ? (args.e.target.classList.contains('e-frame') &&
+                    (!this.parent.showSelectAll ||
+                        (this.checkAllParent && !this.checkAllParent.contains(args.e.target))))
+                    ? args.e.target
+                    : (checkboxWrapper ? checkboxWrapper.childNodes[1] : null)
+                : (checkboxWrapper ? checkboxWrapper.childNodes[1] : null);
         }
         else {
             var checkboxWrapper = args.li.querySelector('.e-checkbox-wrapper');

package/src/multi-select/float-label.d.ts

@@ -16,8 +16,9 @@ export declare function createFloatLabel(overAllWrapper: HTMLDivElement, searchW
  *
  * @param {string[] | number[] | boolean[]} value - Value of the MultiSelect.
  * @param {HTMLElement} label - Float label element.
+ * @param {FloatLabelType} floatlabeltype - specify the float label type.
  */
-export declare function updateFloatLabelState(value: string[] | number[] | boolean[] | object[], label: HTMLElement): void;
+export declare function updateFloatLabelState(value: string[] | number[] | boolean[] | object[], label: HTMLElement, floatlabeltype?: FloatLabelType): void;
 /**
  * Function to remove Float Label element.
  *

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

@@ -44,7 +44,7 @@ export function createFloatLabel(overAllWrapper, searchWrapper, element, inputEl
     searchWrapper.appendChild(floatLinelement);
     searchWrapper.appendChild(floatLabelElement);
     overAllWrapper.classList.add('e-float-input');
-    updateFloatLabelState(value, floatLabelElement);
+    updateFloatLabelState(value, floatLabelElement, floatLabelType);
     if (floatLabelType === 'Always') {
         if (floatLabelElement.classList.contains(LABELBOTTOM)) {
             removeClass([floatLabelElement], LABELBOTTOM);
@@ -57,9 +57,13 @@ export function createFloatLabel(overAllWrapper, searchWrapper, element, inputEl
  *
  * @param {string[] | number[] | boolean[]} value - Value of the MultiSelect.
  * @param {HTMLElement} label - Float label element.
+ * @param {FloatLabelType} floatlabeltype - specify the float label type.
  */
-export function updateFloatLabelState(value, label) {
-    if (value && value.length > 0) {
+export function updateFloatLabelState(value, label, floatlabeltype) {
+    var floatElement = label.closest('.e-float-input');
+    var isFocused = floatElement &&
+        floatElement.classList.contains('e-input-focus');
+    if ((value && value.length > 0) || (isFocused && floatElement.closest('.e-multiselect') && floatlabeltype === 'Auto')) {
         addClass([label], LABELTOP);
         removeClass([label], LABELBOTTOM);
     }

package/src/multi-select/multi-select.d.ts

@@ -851,7 +851,6 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     protected preRender(): void;
     protected getLocaleName(): string;
     private initializeData;
-    private sanitizeData;
     private updateData;
     private initialTextUpdate;
     protected renderList(isEmptyData?: boolean): void;

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

@@ -246,7 +246,6 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.onPopupShown = function (e) {
         var _this = this;
-        this.sanitizeData();
         if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_1 = this;
@@ -1825,6 +1824,9 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.showDelimWrapper = function () {
+        if (!this.value || !this.value.length) {
+            return;
+        }
         if (this.mode === 'CheckBox') {
             this.viewWrapper.style.display = '';
         }
@@ -2964,14 +2966,12 @@ var MultiSelect = /** @class */ (function (_super) {
                         _this.selectedListData.splice(index, 1);
                     }
                     _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], '');
-                        _this.setProperties({ text: currentText.toString() }, true);
+                    if (_this.enableVirtualization && !isNullOrUndefined(_this.text)) {
+                        var textItems = _this.text.split(_this.delimiterChar);
+                        var currentText = index === 0 && textItems.length === 1
+                            ? _this.text.replace(textItems[index], '') : index === 0 ? _this.text.replace(textItems[index]
+                            + _this.delimiterChar, '') : _this.text.replace(_this.delimiterChar + textItems[index], '');
+                        _this.setProperties({ text: currentText }, true);
                     }
                     if (element_1 !== null) {
                         var currentValue_1 = _this.allowObjectBinding ? getValue(((_this.fields.value) ?
@@ -4094,7 +4094,6 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.preventSetCurrentData = false;
         this.initializeData();
-        this.sanitizeData();
         this.updateDataAttribute(this.htmlAttributes);
         _super.prototype.preRender.call(this);
     };
@@ -4125,56 +4124,6 @@ var MultiSelect = /** @class */ (function (_super) {
             endIndex: this.itemCount
         };
     };
-    MultiSelect.prototype.sanitizeData = function () {
-        if (this.enableVirtualization && this.mode === 'CheckBox') {
-            if (this.dataSource && Array.isArray(this.dataSource) && !(this.dataSource instanceof DataManager)) {
-                var cleanedDataSource = [];
-                for (var i = 0; i < this.dataSource.length; i++) {
-                    var item = this.dataSource[i];
-                    if (item !== null && item !== undefined && item !== '') {
-                        if (typeof item === 'object') {
-                            var itemValue = getValue((this.fields.value ? this.fields.value : 'value'), item);
-                            if (this.fields.value !== null) {
-                                if (itemValue !== null && itemValue !== undefined && itemValue !== '') {
-                                    cleanedDataSource.push(item);
-                                }
-                            }
-                            else {
-                                cleanedDataSource.push(item);
-                            }
-                        }
-                        else if (typeof item === 'string') {
-                            if (item !== null && item !== undefined && item.trim() !== '') {
-                                cleanedDataSource.push(item);
-                            }
-                        }
-                        else {
-                            cleanedDataSource.push(item);
-                        }
-                    }
-                }
-                if (cleanedDataSource.length !== this.dataSource.length) {
-                    this.setProperties({ dataSource: cleanedDataSource }, true);
-                }
-            }
-            if (this.value && Array.isArray(this.value) && this.value.length > 0) {
-                var cleanedValue = [];
-                for (var i = 0; i < this.value.length; i++) {
-                    var val = this.value[i];
-                    if (val !== null && val !== undefined && val !== '') {
-                        cleanedValue.push(val);
-                    }
-                }
-                if (cleanedValue.length !== this.value.length) {
-                    this.setProperties({ value: cleanedValue }, true);
-                }
-            }
-            return true;
-        }
-        else {
-            return false;
-        }
-    };
     MultiSelect.prototype.updateData = function (delimiterChar, e, isInitialVirtualData) {
         var data = '';
         var delim = this.mode === 'Delimiter' || this.mode === 'CheckBox';
@@ -4213,7 +4162,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             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) {
+                            if (this_1.isRemoveSelection && this_1.text) {
                                 data = this_1.text.replace(/,/g, delimiterChar + ' ') + delimiterChar + ' ';
                                 text = this_1.text.split(delimiterChar);
                             }
@@ -4325,7 +4274,6 @@ var MultiSelect = /** @class */ (function (_super) {
             || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {
             isEmptyData = true;
         }
-        this.sanitizeData();
         _super.prototype.render.call(this, null, isEmptyData);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
@@ -5592,7 +5540,8 @@ var MultiSelect = /** @class */ (function (_super) {
                                     : (_this.fields.value ? obj[_this.fields.value] : obj);
                                 var text = isPlainValue
                                     ? String(obj)
-                                    : (_this.fields.text ? (obj[_this.fields.text]).toString() : String(obj));
+                                    : (_this.fields.text && obj[_this.fields.text] != null ? (obj[_this.fields.text]).toString()
+                                        : String(obj));
                                 if (_this.value && value != null && Array.isArray(_this.value) &&
                                     ((!_this.allowObjectBinding && _this.value.indexOf(value) < 0) ||
                                         (_this.allowObjectBinding && !_this.isObjectInArray(value, _this.value)))) {
@@ -6256,7 +6205,6 @@ var MultiSelect = /** @class */ (function (_super) {
             switch (prop) {
                 case 'query':
                 case 'dataSource':
-                    this.sanitizeData();
                     if (this.mode === 'CheckBox' && this.showSelectAll) {
                         if (!isNullOrUndefined(this.popupObj) && !this.isDimColumnWithCustomStyle()) {
                             this.popupObj.destroy();
@@ -6290,7 +6238,6 @@ var MultiSelect = /** @class */ (function (_super) {
                     this.updateVal(this.value, this.value, 'text');
                     break;
                 case 'value':
-                    this.sanitizeData();
                     if (this.fields.disabled) {
                         this.removeDisabledItemsValue(this.value);
                     }
@@ -6733,8 +6680,6 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         var args = { cancel: false };
-        var oldValue = extend([], this.value, [], true);
-        var oldData = extend([], this.dataSource, [], true);
         this.trigger('beforeOpen', args, function (args) {
             if (!args.cancel) {
                 if (!_this.ulElement) {
@@ -6746,50 +6691,6 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (_this.inputElement && _this.mode !== 'CheckBox') {
                         _this.focusIn();
                     }
-                    if (_this.enableVirtualization && _this.mode === 'CheckBox') {
-                        if (JSON.stringify(oldData) !== JSON.stringify(_this.dataSource) && _this.sanitizeData() && _this.showSelectAll) {
-                            _this.renderPopup();
-                        }
-                        if (!isNullOrUndefined(oldValue) && !isNullOrUndefined(_this.value) &&
-                            JSON.stringify(oldValue) !== JSON.stringify(_this.value) && _this.sanitizeData()) {
-                            if (_this.fields.disabled) {
-                                _this.removeDisabledItemsValue(_this.value);
-                            }
-                            if (!_this.validateValues(_this.value, oldValue)) {
-                                return;
-                            }
-                            if (_this.isVue && !_this.changeOnBlur && !_this.validateValues(_this.value, oldValue)) {
-                                return;
-                            }
-                            _this.updateVal(_this.value, oldValue, 'value', _this.enableVirtualization);
-                            _this.addValidInputClass();
-                            if (_this.showSelectAll) {
-                                _this.renderPopup();
-                                var totalCount = _this.dataSource instanceof DataManager ? 0 :
-                                    _this.dataSource.length;
-                                var selectedCount = _this.value ? _this.value.length : 0;
-                                if (selectedCount === totalCount) {
-                                    var frame = null;
-                                    if (_this.popupObj) {
-                                        frame = _this.popupObj.element.querySelector('.e-selectall-parent .e-frame');
-                                    }
-                                    if (frame) {
-                                        frame.classList.add('e-check');
-                                        frame.classList.remove('e-uncheck');
-                                        frame.classList.remove('e-stop');
-                                    }
-                                }
-                            }
-                            if (!_this.closePopupOnSelect && _this.isPopupOpen()) {
-                                _this.refreshPopup();
-                            }
-                            if (_this.isPopupOpen() && _this.list && _this.list.querySelector('.e-active.e-disable')) {
-                                var activeItems = _this.list.querySelectorAll('li.' + dropDownBaseClasses.li + '.e-active' + '.e-disable');
-                                removeClass(activeItems, 'e-disable');
-                            }
-                            _this.preventChange = _this.isAngular && _this.preventChange ? !_this.preventChange : _this.preventChange;
-                        }
-                    }
                     return;
                 }
                 if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering && _this.isDeviceFullScreen) {
@@ -6947,7 +6848,6 @@ var MultiSelect = /** @class */ (function (_super) {
             // eslint-disable-next-line
             this.value = this.value.slice();
         }
-        this.sanitizeData();
         this.setDynValue = this.initStatus = false;
         this.isSelectAll = false;
         this.selectAllEventEle = [];