@syncfusion/ej2-dropdowns 35.1.39 → 35.1.41

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

@@ -3262,6 +3262,9 @@ let DropDownList = class DropDownList extends DropDownBase {
      */
     constructor(options, element) {
         super(options, element);
+        this.filterGeneration = null;
+        this.pendingFilterRequests = 0;
+        this.isStaleFilter = false;
         this.isListSearched = false;
         this.preventChange = false;
         this.isTouched = false;
@@ -3313,6 +3316,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         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',
@@ -3367,7 +3373,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     floatLabelChange() {
         if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {
             let 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) {
@@ -4726,6 +4732,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         li = null;
     }
     selectEventCallback(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' &&
@@ -4772,7 +4782,11 @@ let DropDownList = class DropDownList extends DropDownBase {
     setValue(e, autofill) {
         const 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 {
@@ -4817,6 +4831,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     setSelection(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);
@@ -5384,7 +5402,21 @@ let DropDownList = class DropDownList extends DropDownBase {
                     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');
@@ -5511,6 +5543,14 @@ let DropDownList = class DropDownList extends DropDownBase {
         });
     }
     onActionFailure(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.onActionFailure(e);
         if (this.beforePopupOpen) {
             this.renderPopup();
@@ -5521,6 +5561,26 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActionComplete(ulElement, list, e, isUpdated) {
+        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;
@@ -5780,7 +5840,16 @@ let DropDownList = class DropDownList extends DropDownBase {
                 return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value) ||
                     (getValue(this.fields.value, data) === value));
             });
-            if (!isExist) {
+            const isRemoteFilteredDropDownList = this.getModuleName() === 'dropdownlist' && this.allowFiltering &&
+                this.dataSource instanceof DataManager;
+            const isExistInCachedList = Boolean(isRemoteFilteredDropDownList && this.actionCompleteData.list &&
+                this.actionCompleteData.list.some((data) => {
+                    return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value) ||
+                        (getValue(this.fields.value, data) === value));
+                }));
+            const isExistInCachedElement = Boolean(isRemoteFilteredDropDownList && this.actionCompleteData.ulElement &&
+                Array.prototype.some.call(this.actionCompleteData.ulElement.querySelectorAll('li[data-value]'), (item) => item.getAttribute('data-value') === String(value)));
+            if (!isExist && (!isRemoteFilteredDropDownList || (!isExistInCachedList && !isExistInCachedElement))) {
                 this.addItem(this.itemData);
             }
         }
@@ -7128,6 +7197,47 @@ let DropDownList = class DropDownList extends DropDownBase {
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this.inputElement);
+                    if (this.getModuleName() === 'dropdownlist') {
+                        if (!newProp.placeholder || newProp.placeholder.trim() === '') {
+                            const label = this.inputWrapper.container.querySelector('.e-float-text');
+                            if (label) {
+                                label.remove();
+                            }
+                            this.inputElement.removeAttribute('aria-labelledby');
+                        }
+                        else if (this.floatLabelType !== 'Never' && !this.value) {
+                            let floatLabel = this.inputWrapper.container
+                                .querySelector('.e-float-text');
+                            if (!floatLabel) {
+                                floatLabel = this.createElement('label');
+                                floatLabel.classList.add('e-float-text');
+                                if (this.floatLabelType === 'Auto') {
+                                    floatLabel.classList.add('e-label-bottom');
+                                }
+                                else if (this.floatLabelType === 'Always') {
+                                    floatLabel.classList.add('e-label-top');
+                                }
+                                floatLabel.id = 'label_' + this.inputElement.id;
+                                floatLabel.setAttribute('for', this.inputElement.id);
+                                const floatLine = this.inputWrapper.container
+                                    .querySelector('.e-float-line');
+                                const icon = this.inputWrapper.container
+                                    .querySelector('.e-input-group-icon');
+                                if (floatLine) {
+                                    floatLine.insertAdjacentElement('afterend', floatLabel);
+                                }
+                                else if (icon) {
+                                    this.inputWrapper.container.insertBefore(floatLabel, icon);
+                                }
+                                else {
+                                    this.inputWrapper.container.appendChild(floatLabel);
+                                }
+                            }
+                            floatLabel.style.width = this.inputElement.offsetWidth + 'px';
+                            floatLabel.textContent = newProp.placeholder;
+                            this.inputElement.setAttribute('aria-labelledby', floatLabel.id);
+                        }
+                    }
                     break;
                 case 'filterBarPlaceholder':
                     if (this.filterInput) {
@@ -7444,6 +7554,10 @@ let DropDownList = class DropDownList extends DropDownBase {
                 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.
@@ -7708,6 +7822,9 @@ let DropDownList = class DropDownList extends DropDownBase {
      */
     destroy() {
         this.isActive = false;
+        this.isStaleFilter = false;
+        this.filterGeneration = null;
+        this.pendingFilterRequests = 0;
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }
@@ -8175,6 +8292,7 @@ let DropDownTree = class DropDownTree extends Component {
         this.isFromFilterChange = false;
         this.fallbackValue = [];
         this.uncheckedNodeId = null;
+        this.isTotalCountClicked = false;
     }
     /**
      * Get the properties to be maintained in the persisted state.
@@ -8314,7 +8432,7 @@ let DropDownTree = class DropDownTree extends Component {
         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);
@@ -8403,6 +8521,11 @@ let DropDownTree = class DropDownTree extends Component {
                             this.hidePopup();
                         }
                         break;
+                    case 'tab':
+                        if (this.isPopupOpen && !isNullOrUndefined(this.popupDiv) && this.popupDiv.classList.contains('e-no-data')) {
+                            this.hidePopup();
+                        }
+                        break;
                     case 'shiftTab':
                         addClass([this.inputWrapper], [INPUTFOCUS]);
                         break;
@@ -9787,7 +9910,7 @@ let DropDownTree = class DropDownTree extends Component {
                     });
                     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 {
@@ -9878,6 +10001,16 @@ let DropDownTree = class DropDownTree extends Component {
             }
         });
     }
+    getAppendToElement() {
+        if (this.isAngular) {
+            const cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            const popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     checkCollision(popupEle) {
         const collision = isCollide(popupEle);
         if (collision.length > 0) {
@@ -10000,6 +10133,12 @@ let DropDownTree = class DropDownTree extends Component {
         const isScroller = target.classList.contains(DROPDOWN) ? true :
             (matches$1(target, '.e-ddt .e-popup') || matches$1(target, '.e-ddt .e-treeview'));
         const 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 && ((!isNullOrUndefined(this.inputWrapper) &&
             this.inputWrapper.contains(target)) || isTree || isScroller || isHeader || isFooter || isSelectAllArea)) ||
             ((this.allowMultiSelection || this.showCheckBox) && (this.isPopupOpen && target.classList.contains(CHIP_CLOSE) ||
@@ -11037,7 +11176,8 @@ let DropDownTree = class DropDownTree extends Component {
         }
     }
     removeChip(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) {
@@ -13593,7 +13733,7 @@ function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement,
     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);
@@ -13606,9 +13746,13 @@ function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement,
  *
  * @param {string[] | number[] | boolean[]} value - Value of the MultiSelect.
  * @param {HTMLElement} label - Float label element.
+ * @param {FloatLabelType} floatlabeltype - specify the float label type.
  */
-function updateFloatLabelState(value, label) {
-    if (value && value.length > 0) {
+function updateFloatLabelState(value, label, floatlabeltype) {
+    const floatElement = label.closest('.e-float-input');
+    const 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);
     }
@@ -13926,7 +14070,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     onPopupShown(e) {
-        this.sanitizeData();
         if (Browser.isDevice && (this.mode === 'CheckBox' && this.allowFiltering)) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
@@ -15500,6 +15643,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
     }
     showDelimWrapper() {
+        if (!this.value || !this.value.length) {
+            return;
+        }
         if (this.mode === 'CheckBox') {
             this.viewWrapper.style.display = '';
         }
@@ -16628,14 +16774,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         this.selectedListData.splice(index, 1);
                     }
                     this.setProperties({ value: [].concat([], removeVal) }, true);
-                    if (this.enableVirtualization) {
-                        const 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)) {
+                        const textItems = this.text.split(this.delimiterChar);
+                        const 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 !== null) {
                         const currentValue = this.allowObjectBinding ? getValue(((this.fields.value) ?
@@ -17748,7 +17892,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.preventSetCurrentData = false;
         this.initializeData();
-        this.sanitizeData();
         this.updateDataAttribute(this.htmlAttributes);
         super.preRender();
     }
@@ -17779,56 +17922,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             endIndex: this.itemCount
         };
     }
-    sanitizeData() {
-        if (this.enableVirtualization && this.mode === 'CheckBox') {
-            if (this.dataSource && Array.isArray(this.dataSource) && !(this.dataSource instanceof DataManager)) {
-                const cleanedDataSource = [];
-                for (let i = 0; i < this.dataSource.length; i++) {
-                    const item = this.dataSource[i];
-                    if (item !== null && item !== undefined && item !== '') {
-                        if (typeof item === 'object') {
-                            const 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) {
-                const cleanedValue = [];
-                for (let i = 0; i < this.value.length; i++) {
-                    const 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;
-        }
-    }
     updateData(delimiterChar, e, isInitialVirtualData) {
         let data = '';
         const delim = this.mode === 'Delimiter' || this.mode === 'CheckBox';
@@ -17867,7 +17960,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                             const value = this.allowObjectBinding ?
                                 getValue(((this.fields.value) ? this.fields.value : ''), this.value[this.value.length - 1]) :
                                 this.value[this.value.length - 1];
-                            if (this.isRemoveSelection) {
+                            if (this.isRemoveSelection && this.text) {
                                 data = this.text.replace(/,/g, delimiterChar + ' ') + delimiterChar + ' ';
                                 text = this.text.split(delimiterChar);
                             }
@@ -17971,7 +18064,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             || this.list.querySelector('.e-ul') && this.list.querySelector('.e-ul').childElementCount === 0)) {
             isEmptyData = true;
         }
-        this.sanitizeData();
         super.render(null, isEmptyData);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
@@ -19234,7 +19326,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                                     : (this.fields.value ? obj[this.fields.value] : obj);
                                 const 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)))) {
@@ -19894,7 +19987,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             switch (prop) {
                 case 'query':
                 case 'dataSource':
-                    this.sanitizeData();
                     if (this.mode === 'CheckBox' && this.showSelectAll) {
                         if (!isNullOrUndefined(this.popupObj) && !this.isDimColumnWithCustomStyle()) {
                             this.popupObj.destroy();
@@ -19928,7 +20020,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     this.updateVal(this.value, this.value, 'text');
                     break;
                 case 'value':
-                    this.sanitizeData();
                     if (this.fields.disabled) {
                         this.removeDisabledItemsValue(this.value);
                     }
@@ -20366,8 +20457,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         const args = { cancel: false };
-        const oldValue = extend([], this.value, [], true);
-        const oldData = extend([], this.dataSource, [], true);
         this.trigger('beforeOpen', args, (args) => {
             if (!args.cancel) {
                 if (!this.ulElement) {
@@ -20379,50 +20468,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     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();
-                                const totalCount = this.dataSource instanceof DataManager ? 0 :
-                                    this.dataSource.length;
-                                const selectedCount = this.value ? this.value.length : 0;
-                                if (selectedCount === totalCount) {
-                                    let 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')) {
-                                const 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) {
@@ -20578,7 +20623,6 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             // eslint-disable-next-line
             this.value = [...this.value];
         }
-        this.sanitizeData();
         this.setDynValue = this.initStatus = false;
         this.isSelectAll = false;
         this.selectAllEventEle = [];
@@ -21781,12 +21825,14 @@ class CheckBoxSelection {
         let target;
         if (!isNullOrUndefined(args.e)) {
             const 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];
+            const 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 {
             const checkboxWrapper = args.li.querySelector('.e-checkbox-wrapper');