@syncfusion/ej2-dropdowns 32.2.9 → 33.1.46

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

@@ -364,7 +364,8 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         this.touchModule = new Touch(this.parent.popupContentElement, {
             scroll: this.popupScrollHandler.bind(this)
         });
-        EventHandler.add(this.parent.popupContentElement, 'scroll', this.virtualScrollHandler(callback), this);
+        this.scrollHandler = this.virtualScrollHandler(callback);
+        EventHandler.add(this.parent.popupContentElement, 'scroll', this.scrollHandler, this);
     };
     VirtualScroll.prototype.getModuleName = function () {
         return 'VirtualScroll';
@@ -503,6 +504,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                     this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                     isListUpdated = false;
                     this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;
+                    oldUlElement = null;
                 }
             }
             else {
@@ -518,11 +520,12 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 this.parent.setCurrentView = false;
                 this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                 isListUpdated = false;
+                reOrderList = null;
             }
             this.parent.totalItemsCount();
         }
         if (isListUpdated) {
-            if (this.component === 'multiselect' && this.parent.itemCount * 2 > this.parent.totalItemCount) {
+            if (this.component === 'multiselect' && this.parent.itemCount * 2 > this.parent.totalItemCount && !(this.parent.dataSource instanceof DataManager)) {
                 this.parent.viewPortInfo.endIndex = endIndex = this.parent.totalItemCount;
                 this.parent.isVirtualTrackHeight = true;
             }
@@ -533,6 +536,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                     if (oldUlElement) {
                         this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
                     }
+                    oldUlElement = null;
                 }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var alreadyAddedData = this.parent.generatedDataObject[index];
@@ -866,6 +870,18 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         };
     };
     VirtualScroll.prototype.destroy = function () {
+        if (this.parent.popupContentElement) {
+            EventHandler.remove(this.parent.popupContentElement, 'wheel mousedown', this.popupScrollHandler);
+            EventHandler.remove(this.parent.popupContentElement, 'scroll', this.scrollHandler);
+        }
+        // Destroy touch module
+        if (this.touchModule) {
+            this.touchModule.destroy();
+            this.touchModule = null;
+        }
+        // Clear references
+        this.containerElementRect = null;
+        this.scrollHandler = null;
         this.removeEventListener();
     };
     return VirtualScroll;
@@ -1250,6 +1266,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         }
+        ele = null;
     };
     DropDownBase.prototype.checkAndResetCache = function () {
         if (this.isVirtualizationEnabled) {
@@ -1346,12 +1363,21 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         translateY = translateY - (this.skeletonCount * this.listItemHeight);
         translateY = ((this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0) ||
             this.skeletonCount === 0) ? 0 : translateY;
+        var virtualElement = this.list.getElementsByClassName('e-virtual-ddl')[0];
+        var style = virtualElement && virtualElement.style && virtualElement.style.height;
+        if (this.getModuleName() === 'multiselect' && !isNullOrUndefined(style) && style === '' &&
+            this.dataSource instanceof DataManager) {
+            translateY = 0;
+        }
         var styleText = "transform: translate(0px, " + translateY + "px);";
         return styleText;
     };
     DropDownBase.prototype.UpdateSkeleton = function (isSkeletonCountChange, skeletonCount) {
         var isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
         var isContainVirtualList = this.list.querySelector('.e-virtual-list');
+        if (!this.skeletonInstances) {
+            this.skeletonInstances = [];
+        }
         if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.isVirtualizationEnabled) {
             var totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
             for (var i = 0; i < totalSkeletonCount; i++) {
@@ -1365,6 +1391,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                     width: '95%',
                     cssClass: 'e-skeleton-text'
                 });
+                this.skeletonInstances.push(skeleton);
                 skeleton.appendTo(this.createElement('div'));
                 liElement.appendChild(skeleton.element);
                 if (isContainSkeleton.firstChild) {
@@ -1397,6 +1424,16 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    DropDownBase.prototype.destroySkeletons = function () {
+        if (this.skeletonInstances && this.skeletonInstances.length > 0) {
+            this.skeletonInstances.forEach(function (skeleton) {
+                if (skeleton && !skeleton.isDestroyed) {
+                    skeleton.destroy();
+                }
+            });
+            this.skeletonInstances = [];
+        }
+    };
     DropDownBase.prototype.getLocaleName = function () {
         return 'drop-down-base';
     };
@@ -1530,6 +1567,8 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         }
         this.updateFields(fields.text, fields.value, isSelectGroupCheck ? fields.groupBy : this.fields.groupBy, this.fields.htmlAttributes, this.fields.iconCss, this.fields.disabled);
         this.resetList(jsonElement, fields);
+        element = null;
+        group = null;
     };
     DropDownBase.prototype.updateFields = function (text, value, groupBy, htmlAttributes, iconCss, disabled) {
         var field = {
@@ -2068,6 +2107,12 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 this.ulElement = this.list.querySelector('ul');
                 this.postRender(this.list, list, this.bindEvent);
             }
+            else if (this.getModuleName() === 'dropdownlist' && this.isVirtualizationEnabled) {
+                this.list.innerHTML = '';
+                this.createVirtualContent();
+                this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
+                this.updateListElements(this.listData);
+            }
         }
         if (this.getModuleName() === 'multiselect' && this.isAngular && this.ngEle) {
             var popupHolder_1 = this.list;
@@ -2317,6 +2362,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         }
         this.fixedHeaderElement.innerHTML = groupData.innerHTML;
         this.renderGroupTemplate(this.fixedHeaderElement);
+        groupData = null;
     };
     DropDownBase.prototype.updateGroupFixedHeader = function (element, target) {
         if (this.fixedHeaderElement && this.list && this.list.parentElement) {
@@ -2437,6 +2483,8 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                     this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
                     this.updateListElements(listData);
                 }
+                oldUlElement = null;
+                virtualUlElement = null;
             }
         }
         return ulElement;
@@ -2967,6 +3015,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             this.updateSelection();
         }
         this.addedNewItem = true;
+        liCollections = null;
     };
     /**
      * Checks if the given HTML element is disabled.
@@ -3084,13 +3133,28 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 detach(this.list);
             }
         }
+        if (this.generatedDataObject) {
+            this.generatedDataObject = {};
+        }
+        this.destroySkeletons();
         this.liCollections = null;
+        this.incrementalLiCollections = null;
+        this.incrementalUlElement = null;
         this.ulElement = null;
+        this.fixedHeaderElement = null;
         this.list = null;
+        this.item = null;
         this.enableRtlElements = null;
         this.groupHeaderItems = null;
         this.fiteredGroupHeaderItems = null;
         this.rippleFun = null;
+        this.popupContentElement = null;
+        this.virtualListInfo = null;
+        this.viewPortInfo = null;
+        this.selectedValueInfo = null;
+        this.virtualGroupDataSource = null;
+        this.virtualSelectAllData = null;
+        this.incrementalListData = null;
         _super.prototype.destroy.call(this);
     };
     __decorate([
@@ -3347,6 +3411,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             else if (floatElement) {
                 classList(floatElement, ['e-label-bottom'], ['e-label-top']);
             }
+            floatElement = null;
         }
     };
     DropDownList.prototype.resetHandler = function (e) {
@@ -3627,6 +3692,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             else {
                 this.setSelection(element, null);
             }
+            element = null;
         }
         else {
             this.setSelection(this.liCollections[this.activeIndex], null);
@@ -3675,6 +3741,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.isActive = false;
             this.beforePopupOpen = false;
         }
+        // Cancel any pending debounced filtering when focus leaves the component.
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = null;
+        }
         this.isFocused = false;
     };
     DropDownList.prototype.focusOutAction = function (e) {
@@ -3783,7 +3854,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (formElement) {
             EventHandler.remove(formElement, 'reset', this.resetValueHandler);
         }
-        if (!Browser.isDevice) {
+        if (!Browser.isDevice && !isNullOrUndefined(this.keyboardModule)) {
             this.keyboardModule.destroy();
         }
         if (this.showClearButton) {
@@ -3904,10 +3975,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             var delay = 100;
             this.closePopup(delay, e);
         }
+        li = null;
     };
     DropDownList.prototype.onMouseOver = function (e) {
         var currentLi = closest(e.target, '.' + dropDownBaseClasses.li);
         this.setHover(currentLi);
+        currentLi = null;
     };
     DropDownList.prototype.setHover = function (li) {
         if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {
@@ -4045,6 +4118,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
                     this.list.scrollTop = 0;
                 }
+                li = null;
             }
             else {
                 var li = void 0;
@@ -4059,6 +4133,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     this.setSelection(li, e);
                     this.setScrollPosition();
                 }
+                li = null;
             }
         }
     };
@@ -4292,6 +4367,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.ulElement = this.list.querySelector('ul');
                 this.handleVirtualKeyboardActions(e, this.pageCount);
             }
+            nextItem = null;
         }
         if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
             var value = this.getItemData().value;
@@ -4328,6 +4404,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             this.updateUpDownAction(e);
         }
         e.preventDefault();
+        focusEle = null;
     };
     DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
@@ -4448,6 +4525,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
             this.hidePopup(e);
             this.focusDropDown(e);
+            li = null;
         }
         else {
             this.showPopup();
@@ -4645,6 +4723,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 ulElement = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
                 this.actionCompleteData.ulElement = ulElement;
             }
+            ulElement = null;
         }
     };
     DropDownList.prototype.updateSelectedItem = function (li, e, preventSelect, isSelection) {
@@ -4683,6 +4762,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.setSelectOptions(li, e);
             }
         }
+        li = null;
     };
     DropDownList.prototype.selectEventCallback = function (li, e, preventSelect, selectedData, value) {
         this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
@@ -4717,6 +4797,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
             this.activeIndex = this.getIndexByValue(value);
         }
+        focusedItem = null;
     };
     DropDownList.prototype.activeItem = function (li) {
         if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {
@@ -5439,6 +5520,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             EventHandler.add(this.filterInput, 'keydown', this.onFilterDown, this);
             EventHandler.add(this.filterInput, 'blur', this.onBlurHandler, this);
             EventHandler.add(this.filterInput, 'paste', this.pasteHandler, this);
+            parentElement = null;
             return this.filterInputObj;
         }
         else {
@@ -5602,6 +5684,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.activeIndex = this.getIndexByValue(value);
                 var element = this.findListElement(this.list, 'li', 'data-value', value);
                 this.selectedLI = element;
+                element = null;
             }
             else if (this.enableVirtualization && this.getModuleName() === 'autocomplete') {
                 this.activeIndex = this.skeletonCount;
@@ -5782,6 +5865,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (!(this.enableVirtualization && isNullOrUndefined(element))) {
             this.removeFocus();
         }
+        element = null;
     };
     DropDownList.prototype.updateSelection = function () {
         var selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);
@@ -5800,6 +5884,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
             this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);
         }
+        selectedItem = null;
     };
     DropDownList.prototype.updateSelectionList = function () {
         var selectedItem = this.list && this.list.querySelector('.' + 'e-active');
@@ -5943,6 +6028,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                             parseInt(getComputedStyle(_this.inputElement).paddingLeft, 10) +
                             parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));
                     }
+                    firstItem = null;
                 }
                 _this.createPopup(popupEle_1, offsetValue, left);
                 _this.popupContentElement = _this.popupObj.element.querySelector('.e-content');
@@ -6196,6 +6282,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 _this.activeStateChange();
+                actionList = null;
+                ulElement = null;
             },
             targetExitViewport: function () {
                 if (!Browser.isDevice) {
@@ -6235,6 +6323,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);
         detach(this.filterInput);
         clearElement.parentElement.insertBefore(this.filterInput, clearElement);
+        clearElement = null;
     };
     DropDownList.prototype.setPopupPosition = function (border) {
         var offsetValue;
@@ -6263,6 +6352,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         var inputHeight = this.inputWrapper.container.offsetHeight;
         offsetValue = offsetValue + liHeight + popupOffset - ((liHeight - inputHeight) / 2);
+        selectedLI = null;
+        firstItem = null;
+        lastItem = null;
         return -offsetValue;
     };
     DropDownList.prototype.setWidth = function () {
@@ -6277,6 +6369,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -
                 parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +
                 parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10)) * 2) + 'px';
+            firstItem = null;
         }
         return width;
     };
@@ -6531,7 +6624,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 EventHandler.remove(this.filterInput, 'blur', this.onBlurHandler);
                 EventHandler.remove(this.filterInput, 'paste', this.pasteHandler);
             }
-            if (this.allowFiltering && this.getModuleName() === 'dropdownlist') {
+            if (this.allowFiltering && !isNullOrUndefined(this.filterInput) && this.getModuleName() === 'dropdownlist') {
                 this.filterInput.removeAttribute('aria-activedescendant');
                 this.filterInput.removeAttribute('aria-disabled');
                 this.filterInput.removeAttribute('role');
@@ -6539,7 +6632,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.filterInput.removeAttribute('autocapitalize');
                 this.filterInput.removeAttribute('spellcheck');
             }
-            if (this.filterInput.parentNode) {
+            if (!isNullOrUndefined(this.filterInput) && this.filterInput.parentNode) {
                 this.filterInput.parentNode.removeChild(this.filterInput);
                 var attrs = Array.prototype.slice.call(this.filterInput.attributes);
                 for (var n = 0; n < attrs.length; n++) {
@@ -6690,6 +6783,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
         }
+        ulElement = null;
     };
     DropDownList.prototype.destroyPopup = function () {
         this.isPopupOpen = false;
@@ -6728,6 +6822,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             this.inputElement = this.createElement('input', { attrs: { role: 'combobox', type: 'text' } });
+            if (this.element.tagName === this.getNgDirective()) {
+                // Pre-populate id so Input.createInput/createFloatingInput can wire label.for correctly
+                var ngId = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');
+                this.element.id = ngId;
+                this.inputElement.id = ngId + '_input';
+            }
             if (this.element.tagName !== this.getNgDirective()) {
                 this.element.style.display = 'none';
             }
@@ -6791,6 +6891,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var id = this.element.getAttribute('id') ? this.element.getAttribute('id') : getUniqueID('ej2_dropdownlist');
         this.element.id = id;
         this.hiddenElement.id = id + '_hidden';
+        if (this.element.tagName === this.getNgDirective() && !this.inputElement.id) {
+            this.inputElement.id = id + '_input';
+        }
         this.targetElement().setAttribute('tabindex', this.tabIndex);
         if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'combobox') && !this.readonly) {
             if (!this.inputElement.hasAttribute('aria-label')) {
@@ -6896,6 +6999,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var listItemHeight = Math.ceil(item.getBoundingClientRect().height) +
             parseInt(window.getComputedStyle(item).marginBottom, 10);
         listParent.remove();
+        listParent = null;
+        item = null;
         return listItemHeight;
     };
     DropDownList.prototype.setFooterTemplate = function (popupEle) {
@@ -6949,6 +7054,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         var contentEle = popupEle.querySelector('div.e-content');
         popupEle.insertBefore(this.header, contentEle);
+        contentEle = null;
     };
     /**
      * Sets the enabled state to DropDownBase.
@@ -7013,6 +7119,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             ((props.dataSource instanceof DataManager) || (!isNullOrUndefined(props) && Array.isArray(props.dataSource) &&
                 !isNullOrUndefined(oldProps) && Array.isArray(oldProps.dataSource) && props.dataSource.length !== oldProps.dataSource.length))) {
             this.typedString = '';
+            this.selectData = null;
             this.resetList(this.dataSource);
         }
         if (!this.isCustomFilter && !this.isFilterFocus && document.activeElement !== this.filterInput) {
@@ -7165,9 +7272,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         return { value: void 0 };
                     }
                     if (this_1.enableVirtualization) {
+                        var isOfflineMode = this_1.dataSource instanceof DataManager &&
+                            this_1.dataSource.dataSource.offline === true;
                         if (newProp.value && this_1.dataSource instanceof DataManager) {
-                            var isOfflineMode = this_1.dataSource instanceof DataManager &&
-                                this_1.dataSource.dataSource.offline === true;
                             var checkField = isNullOrUndefined(this_1.fields.value) ? this_1.fields.text : this_1.fields.value;
                             var value = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ?
                                 getValue(checkField, newProp.value) : newProp.value;
@@ -7251,6 +7358,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                             }
                         }
                         this_1.updateInputFields();
+                        element = null;
                     }
                     break;
                 case 'footerTemplate':
@@ -7342,6 +7450,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 }
             }
         };
+        li = null;
     };
     DropDownList.prototype.updatePopupState = function () {
         if (this.beforePopupOpen) {
@@ -7514,6 +7623,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         this.setValueTemplate();
                     }
                 }
+                element = null;
             }
             else {
                 this.resetSelection();
@@ -7639,6 +7749,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                             this.clear();
                         }
                     }
+                    li = null;
                 }
             }
         }
@@ -7674,7 +7785,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (this.inputElement) {
             var attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
                 'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
-                'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label'];
+                'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-describedby', 'aria-label',
+                'role', 'value', 'style', 'type'];
             for (var i = 0; i < attrArray.length; i++) {
                 this.inputElement.removeAttribute(attrArray[i]);
             }
@@ -7755,6 +7867,43 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             detach(this.popupObj.element);
             this.popupObj.element = null;
         }
+        if (this.list) {
+            while (this.list.firstChild) {
+                this.list.removeChild(this.list.firstChild);
+            }
+            if (this.list.parentNode) {
+                this.list.parentNode.removeChild(this.list);
+            }
+            detach(this.list);
+        }
+        if (this.ulElement) {
+            while (this.ulElement.firstChild) {
+                this.ulElement.removeChild(this.ulElement.firstChild);
+            }
+            if (this.ulElement.parentNode) {
+                this.ulElement.parentNode.removeChild(this.ulElement);
+            }
+            detach(this.ulElement);
+        }
+        if (this.actionData && this.actionData.ulElement) {
+            while (this.actionData.ulElement.firstChild) {
+                this.actionData.ulElement.removeChild(this.actionData.ulElement.firstChild);
+            }
+            detach(this.actionData.ulElement);
+            this.actionData.ulElement = null;
+            this.actionData.list = null;
+            this.actionData = null;
+        }
+        if (this.actionCompleteData && this.actionCompleteData.ulElement) {
+            while (this.actionCompleteData.ulElement.firstChild) {
+                this.actionCompleteData.ulElement.removeChild(this.actionCompleteData.ulElement.firstChild);
+            }
+            detach(this.actionCompleteData.ulElement);
+            this.actionCompleteData.ulElement = null;
+            this.actionCompleteData.list = null;
+            this.actionCompleteData = null;
+        }
+        this.listData = null;
         this.ulElement = null;
         this.list = null;
         this.clearIconElement = null;
@@ -7768,20 +7917,19 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.header = null;
         this.previousSelectedLI = null;
         this.valueTempElement = null;
-        if (this.actionData.ulElement) {
-            detach(this.actionData.ulElement);
-        }
-        this.actionData.ulElement = null;
-        if (this.actionCompleteData.ulElement) {
-            detach(this.actionCompleteData.ulElement);
-        }
-        this.actionCompleteData.ulElement = null;
+        this.resizer = null;
         if (this.inputElement && !isNullOrUndefined(this.inputElement.onchange)) {
             this.inputElement.onchange = null;
         }
         if (this.inputElement && !isNullOrUndefined(this.inputElement.onselect)) {
             this.inputElement.onselect = null;
         }
+        if (this.enableVirtualization) {
+            this.notify('destroy', { module: 'VirtualScroll' });
+            this.virtualGroupDataSource = null;
+            this.viewPortInfo = null;
+            this.selectedValueInfo = null;
+        }
         Input.destroy({
             element: this.inputElement,
             floatLabelType: this.floatLabelType,
@@ -12377,6 +12525,9 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
                     break;
                 case 'allowCustom':
                     break;
+                case 'placeholder':
+                    Input.setPlaceholder(newProp.placeholder, this.inputElement, this.getModuleName());
+                    break;
                 default: {
                     // eslint-disable-next-line max-len
                     var comboProps = this.getPropObject(prop, newProp, oldProp);
@@ -13238,9 +13389,15 @@ function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement,
     var floatLabelElement = createElement('label', { className: FLOATTEXT });
     var id = element.getAttribute('id') ? element.getAttribute('id') : getUniqueID('ej2_multiselect');
     element.id = id;
+    var isAngularComponent = false;
+    if (element.tagName && element.tagName.indexOf('EJS-') === 0 && inputElement.id === '' && element !== inputElement) {
+        inputElement.id = id + '_input';
+        isAngularComponent = true;
+    }
     if (!isNullOrUndefined(element.id) && element.id !== '') {
-        floatLabelElement.id = 'label_' + element.id.replace(/ /g, '_');
-        floatLabelElement.setAttribute('for', element.id);
+        var labelTarget = isAngularComponent ? inputElement.id || element.id : element.id;
+        floatLabelElement.id = 'label_' + labelTarget.replace(/ /g, '_');
+        floatLabelElement.setAttribute('for', labelTarget);
         attributes(inputElement, { 'aria-labelledby': floatLabelElement.id });
     }
     if (!isNullOrUndefined(inputElement.placeholder) && inputElement.placeholder !== '') {
@@ -14786,7 +14943,15 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.setPlaceholderSize = function (downIconWidth) {
         if (isNullOrUndefined(this.value) || this.value.length === 0) {
             if (this.dropIcon.offsetWidth !== 0) {
-                this.searchWrapper.style.width = ('calc(100% - ' + (downIconWidth + 10)) + 'px';
+                var totalIconWidth = downIconWidth + 10;
+                if (this.showClearButton && this.overAllClear) {
+                    var display = this.overAllClear.style.display;
+                    this.overAllClear.style.display = 'block';
+                    var clearWidth = this.overAllClear.offsetWidth;
+                    totalIconWidth += clearWidth;
+                    this.overAllClear.style.display = display;
+                }
+                this.searchWrapper.style.width = 'calc(100% - ' + totalIconWidth + 'px)';
             }
             else {
                 addClass([this.searchWrapper], CUSTOM_WIDTH);
@@ -15865,6 +16030,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 selectedChips[0].removeAttribute('id');
                 if (!isNullOrUndefined(this.inputElement) && this.inputElement.hasAttribute('aria-activedescendant')) {
                     this.inputElement.removeAttribute('aria-activedescendant');
+                    if (!this.inputElement.hasAttribute('aria-describedby') && this.chipCollectionWrapper.id) {
+                        this.inputElement.setAttribute('aria-describedby', this.chipCollectionWrapper.id);
+                    }
                 }
             }
             this.removeChipFocus();
@@ -15876,6 +16044,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             element.setAttribute('id', this.element.id + '_chip_item');
             if (!isNullOrUndefined(this.inputElement) && element.id) {
                 this.inputElement.setAttribute('aria-activedescendant', element.id);
+                if (this.inputElement.hasAttribute('aria-describedby')) {
+                    this.inputElement.removeAttribute('aria-describedby');
+                }
             }
             var chipClose = element.querySelector('span.' + CHIP_CLOSE$1.split(' ')[0]);
             if (chipClose) {
@@ -16177,10 +16348,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             if (!isNullOrUndefined(this.chipCollectionWrapper)) {
                 (this.chipCollectionWrapper.style.display = '');
             }
-            if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {
+            if (this.mode === 'Delimiter' || (this.mode === 'CheckBox' && !this.isSelectAllClicked)) {
                 this.showDelimWrapper();
             }
-            this.showOverAllClear();
+            if (!this.isSelectAllClicked) {
+                this.showOverAllClear();
+            }
         }
         else {
             if (!isNullOrUndefined(this.chipCollectionWrapper)) {
@@ -16223,7 +16396,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 temp = this.getOverflowVal(this.value.length - 1);
                 data += temp;
                 temp = this.viewWrapper.innerHTML;
-                this.updateWrapperText(this.viewWrapper, data);
+                if (!this.isSelectAllClicked) {
+                    this.updateWrapperText(this.viewWrapper, data);
+                }
             }
             if (this.enableVirtualization && this.mode === 'CheckBox') {
                 var currentText = [];
@@ -17691,6 +17866,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.onMouseClick = function (e) {
         var _this = this;
+        this.isSelectAllClicked = false;
         if (!this.isClearAllItem) {
             this.keyCode = null;
             this.scrollFocusStatus = false;
@@ -17769,7 +17945,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     }
                     else {
                         e.preventDefault();
-                        if (this.value.length === this.listData.length && this.isPopupOpen()) {
+                        if (this.mode !== 'CheckBox' && this.hideSelectedItem && this.value.length === this.listData.length && this.isPopupOpen()) {
                             this.hidePopup(e);
                         }
                     }
@@ -18107,6 +18283,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             var remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());
             raminElement.innerText = remainCompildTemp;
             this.viewWrapper.appendChild(raminElement);
+            if (this.isSelectAllClicked) {
+                this.showOverAllClear();
+            }
             this.renderReactTemplates();
             var remainSize = raminElement.offsetWidth;
             remove(raminElement);
@@ -18393,9 +18572,11 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             firstItems.forEach(function (node) {
                 fragment_1.appendChild(node.cloneNode(true));
             });
-            li.forEach(function (node) {
-                fragment_1.appendChild(node.cloneNode(true));
-            });
+            if ((this.totalItemCount >= (this.itemCount * 2) && this.dataSource instanceof DataManager)) {
+                li.forEach(function (node) {
+                    fragment_1.appendChild(node.cloneNode(true));
+                });
+            }
             var concatenatedNodeList = fragment_1.childNodes;
             if (this.virtualSelectAllData instanceof Array) {
                 while (index < length && index <= 50 && index < count) {
@@ -18428,9 +18609,22 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     index++;
                 }
                 if (length > 50) {
+                    createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                    showSpinner(this.filterParent);
+                    if (this.popupObj && this.filterParent) {
+                        [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = '0.5'); });
+                        this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                        this.filterParent.style.cursor = 'progress';
+                    }
                     setTimeout(function () {
-                        if (_this.virtualSelectAllData && _this.virtualSelectAllData.length > 0) {
-                            _this.virtualSelectAllData.map(function (obj) {
+                        var dataArray = _this.virtualSelectAllData;
+                        var batchSize = 500;
+                        var currentIndex = 0;
+                        var processBatch = function () {
+                            var endIndex = Math.min(currentIndex + batchSize, dataArray.length);
+                            var batch = dataArray.slice(currentIndex, endIndex);
+                            // Use map on the batch
+                            batch.map(function (obj) {
                                 if (_this.value && obj[_this.fields.value] != null && Array.isArray(_this.value) &&
                                     ((!_this.allowObjectBinding && _this.value.indexOf(obj[_this.fields.value]) < 0) ||
                                         (_this.allowObjectBinding && !_this.isObjectInArray(obj[_this.fields.value], _this.value)))) {
@@ -18439,21 +18633,34 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                                     _this.dispatchSelect(value, event, null, false, length, obj, text);
                                 }
                             });
-                        }
-                        _this.updatedataValueItems(event);
-                        _this.isSelectAllLoop = false;
-                        if (!_this.changeOnBlur) {
-                            _this.updateValueState(event, _this.value, _this.tempValues);
-                            _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
-                        }
-                        _this.updateHiddenElement(true);
-                        if (_this.popupWrapper && li[index - 1] && li[index - 1].classList.contains('e-item-focus')) {
-                            var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-                            if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
-                                li[index - 1].classList.remove('e-item-focus');
+                            currentIndex = endIndex;
+                            if (currentIndex < dataArray.length) {
+                                requestAnimationFrame(processBatch);
                             }
-                        }
-                        _this.checkSelectAll();
+                            else {
+                                _this.updatedataValueItems(event);
+                                _this.isSelectAllLoop = false;
+                                if (!_this.changeOnBlur) {
+                                    _this.updateValueState(event, _this.value, _this.tempValues);
+                                    _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
+                                }
+                                _this.updateHiddenElement(true);
+                                if (_this.popupWrapper && li[index - 1] && li[index - 1].classList.contains('e-item-focus')) {
+                                    var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+                                    if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                                        li[index - 1].classList.remove('e-item-focus');
+                                    }
+                                }
+                                _this.checkSelectAll();
+                                hideSpinner(_this.filterParent);
+                                if (_this.popupObj && _this.filterParent) {
+                                    [_this.popupObj.element.querySelector('.e-content'), _this.popupObj.element.querySelector('.e-selectall-parent'), _this.filterParent].forEach(function (el) { return el && (el.style.opacity = ''); });
+                                    _this.filterParent.style.cursor = '';
+                                    _this.filterParent.querySelector('.e-input').removeAttribute('readonly');
+                                }
+                            }
+                        };
+                        processBatch();
                     }, 0);
                 }
                 else if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {
@@ -18467,25 +18674,60 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {
-                this.virtualSelectAllData.map(function (obj) {
-                    _this.virtualSelectAll = true;
-                    _this.removeValue(_this.value[index], event, _this.value.length - index);
-                });
-            }
-            this.updatedataValueItems(event);
-            if (!this.changeOnBlur) {
-                this.updateValueState(event, this.value, this.tempValues);
-                this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
-            }
-            this.updateHiddenElement();
-            this.setProperties({ value: [] }, true);
-            this.selectedListData = [];
-            this.virtualSelectAll = false;
-            if (!isNullOrUndefined(this.viewPortInfo.startIndex) && !isNullOrUndefined(this.viewPortInfo.endIndex)) {
-                this.notify('setCurrentViewDataAsync', {
-                    component: this.getModuleName(),
-                    module: 'VirtualScroll'
-                });
+                var dataArray_1 = this.virtualSelectAllData;
+                var batchSize_1 = 500;
+                var currentIndex_1 = 0;
+                this.isProcessingVirtualSelectAll = true;
+                createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                showSpinner(this.filterParent);
+                if (this.popupObj && this.filterParent) {
+                    [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = '0.5'); });
+                    this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                    this.filterParent.style.cursor = 'progress';
+                }
+                var processBatch_1 = function () {
+                    var endIndex = Math.min(currentIndex_1 + batchSize_1, dataArray_1.length);
+                    var batch = dataArray_1.slice(currentIndex_1, endIndex);
+                    // Use map on the batch
+                    batch.map(function (obj) {
+                        _this.virtualSelectAll = true;
+                        // eslint-disable-next-line security/detect-object-injection
+                        _this.removeValue(_this.value[index], event, _this.value.length - index);
+                    });
+                    currentIndex_1 = endIndex;
+                    if (currentIndex_1 < dataArray_1.length) {
+                        requestAnimationFrame(processBatch_1);
+                    }
+                    else {
+                        // All batches completed
+                        _this.isProcessingVirtualSelectAll = false;
+                        hideSpinner(_this.filterParent);
+                        if (_this.popupObj && _this.filterParent) {
+                            [_this.popupObj.element.querySelector('.e-content'), _this.popupObj.element.querySelector('.e-selectall-parent'), _this.filterParent].forEach(function (el) { return el && (el.style.opacity = ''); });
+                            _this.filterParent.querySelector('.e-input').removeAttribute('readonly');
+                            _this.filterParent.style.cursor = '';
+                        }
+                        if (!_this.isSelectAllClicked) {
+                            _this.showOverAllClear();
+                        }
+                        _this.updatedataValueItems(event);
+                        if (!_this.changeOnBlur) {
+                            _this.updateValueState(event, _this.value, _this.tempValues);
+                            _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
+                        }
+                        _this.updateHiddenElement();
+                        _this.setProperties({ value: [] }, true);
+                        _this.selectedListData = [];
+                        _this.virtualSelectAll = false;
+                        if (!isNullOrUndefined(_this.viewPortInfo.startIndex) && !isNullOrUndefined(_this.viewPortInfo.endIndex)) {
+                            _this.notify('setCurrentViewDataAsync', {
+                                component: _this.getModuleName(),
+                                module: 'VirtualScroll'
+                            });
+                        }
+                    }
+                };
+                processBatch_1();
             }
         }
         this.checkSelectAll();
@@ -18514,13 +18756,13 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         };
         this.trigger('beforeSelectAll', beforeSelectArgs);
         if ((li && li.length) || (this.enableVirtualization && !state)) {
-            var index_1 = 0;
-            var count_1 = 0;
+            var index = 0;
+            var count = 0;
             if (this.enableGroupCheckBox) {
-                count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;
+                count = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : li.length;
             }
             else {
-                count_1 = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;
+                count = state ? this.maximumSelectionLength - (this.value ? this.value.length : 0) : this.maximumSelectionLength;
             }
             if (!beforeSelectArgs.preventSelectEvent) {
                 if (this.enableVirtualization) {
@@ -18535,42 +18777,73 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 else {
-                    while (index_1 < length && index_1 <= 50 && index_1 < count_1) {
-                        this.isSelectAllTarget = (length === index_1 + 1);
-                        this.updateListSelection(li[index_1], event, length - index_1);
+                    while (index < length && index <= 50 && index < count) {
+                        this.isSelectAllTarget = (length === index + 1);
+                        this.updateListSelection(li[index], event, length - index);
                         if (this.enableGroupCheckBox) {
-                            this.findGroupStart(li[index_1]);
+                            this.findGroupStart(li[index]);
                         }
-                        index_1++;
+                        index++;
                     }
                     if (length > 50) {
-                        setTimeout(function () {
-                            while (index_1 < length && index_1 < count_1) {
-                                _this.isSelectAllTarget = (length === index_1 + 1);
-                                _this.updateListSelection(li[index_1], event, length - index_1);
-                                if (_this.enableGroupCheckBox) {
-                                    _this.findGroupStart(li[index_1]);
+                        createSpinner({ target: this.filterParent, width: Browser.isDevice ? '16px' : '14px' }, this.createElement);
+                        showSpinner(this.filterParent);
+                        if (this.popupObj && this.filterParent) {
+                            [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = '0.5'); });
+                            this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                            this.filterParent.style.cursor = 'progress';
+                        }
+                        this.isProcessingVirtualSelectAll = !this.isSelectAllClicked;
+                        var indexLocal_1 = index; // preserve original index value
+                        var maxIndex_1 = Math.min(length, count);
+                        // Use two-frame yield to ensure spinner paints before heavy work starts
+                        var CHUNK_SIZE_1 = 6;
+                        requestAnimationFrame(function () {
+                            requestAnimationFrame(function processFrame() {
+                                if (!this.list) {
+                                    return;
                                 }
-                                index_1++;
-                            }
-                            _this.updatedataValueItems(event);
-                            if (!_this.changeOnBlur) {
-                                _this.updateValueState(event, _this.value, _this.tempValues);
-                                _this.isSelectAll = _this.isSelectAll ? !_this.isSelectAll : _this.isSelectAll;
-                            }
-                            _this.updateHiddenElement();
-                            if (_this.popupWrapper && li[index_1 - 1].classList.contains('e-item-focus')) {
-                                var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-                                if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
-                                    li[index_1 - 1].classList.remove('e-item-focus');
+                                if (indexLocal_1 >= maxIndex_1) {
+                                    this.isProcessingVirtualSelectAll = !this.isProcessingVirtualSelectAll;
+                                    this.updatedataValueItems(event);
+                                    if (!this.changeOnBlur) {
+                                        this.updateValueState(event, this.value, this.tempValues);
+                                        this.isSelectAll = this.isSelectAll ? !this.isSelectAll : this.isSelectAll;
+                                    }
+                                    this.updateHiddenElement();
+                                    if (this.popupWrapper && li[indexLocal_1 - 1] && li[indexLocal_1 - 1].classList.contains('e-item-focus')) {
+                                        var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+                                        if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                                            li[indexLocal_1 - 1].classList.remove('e-item-focus');
+                                        }
+                                    }
+                                    hideSpinner(this.filterParent);
+                                    if (this.popupObj && this.filterParent) {
+                                        [this.popupObj.element.querySelector('.e-content'), this.popupObj.element.querySelector('.e-selectall-parent'), this.filterParent].forEach(function (el) { return el && (el.style.opacity = ''); });
+                                        this.filterParent.querySelector('.e-input').removeAttribute('readonly');
+                                        this.filterParent.style.cursor = '';
+                                    }
+                                    return;
                                 }
-                            }
-                        }, 0);
+                                // process up to CHUNK_SIZE items this frame
+                                var processed = 0;
+                                while (processed < CHUNK_SIZE_1 && indexLocal_1 < maxIndex_1) {
+                                    this.isSelectAllTarget = (length === indexLocal_1 + 1);
+                                    this.updateListSelection(li[indexLocal_1], event, length - indexLocal_1);
+                                    if (this.enableGroupCheckBox) {
+                                        this.findGroupStart(li[indexLocal_1]);
+                                    }
+                                    indexLocal_1++;
+                                    processed++;
+                                }
+                                requestAnimationFrame(processFrame.bind(this));
+                            }.bind(_this));
+                        });
                     }
                 }
             }
             else {
-                for (var i = 0; i < li.length && i < count_1; i++) {
+                for (var i = 0; i < li.length && i < count; i++) {
                     this.removeHover();
                     var customVal = li[i].getAttribute('data-value');
                     var value = this.getFormattedValue(customVal);
@@ -18614,7 +18887,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 this.trigger('selectedAll', args);
             }
         }
-        this.updatedataValueItems(event);
+        if (!this.isProcessingVirtualSelectAll &&
+            ((!this.isSelectAllClicked) || (this.isSelectAllClicked && (this.enableVirtualization ? length > 30 : length <= 50)))) {
+            this.updatedataValueItems(event);
+        }
         this.checkPlaceholderSize();
         if (length <= 50 && !beforeSelectArgs.preventSelectEvent) {
             if (!this.changeOnBlur) {
@@ -18707,6 +18983,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.selectAllItems = function (state, event) {
         var _this = this;
+        this.isSelectAllClicked = state;
         if (isNullOrUndefined(this.list)) {
             this.selectAllAction = function () {
                 if (_this.mode === 'CheckBox' && _this.showSelectAll) {
@@ -19200,7 +19477,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         _this.renderItems(_this.mainData, _this.fields);
                     }
                     _this.virtualCustomData = null;
-                    _this.isVirtualTrackHeight = _this.totalItemCount >= (_this.itemCount * 2) ? false : true;
+                    _this.isVirtualTrackHeight = (_this.totalItemCount >= (_this.itemCount * 2) ||
+                        _this.dataSource instanceof DataManager) ? false : true;
                 }
             });
         }
@@ -19417,7 +19695,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             this.chipCollectionWrapper = this.createElement('span', {
-                className: CHIP_WRAPPER$1, attrs: { role: 'listbox' }
+                className: CHIP_WRAPPER$1
             });
             this.chipCollectionWrapper.style.display = 'none';
             if (this.mode === 'Default') {
@@ -19991,6 +20269,50 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (this.delimiterWrapper && this.delimiterWrapper.parentElement) {
             this.delimiterWrapper.parentElement.remove();
         }
+        if (this.hiddenElement) {
+            if (this.hiddenElement.onchange) {
+                this.hiddenElement.onchange = null;
+            }
+            this.hiddenElement.onchange = null;
+            this.hiddenElement.onclick = null;
+            this.hiddenElement.oninput = null;
+            var attrs = Array.prototype.slice.call(this.hiddenElement.attributes);
+            for (var n = 0; n < attrs.length; n++) {
+                this.hiddenElement.removeAttribute(attrs[n].name);
+            }
+            var children = this.hiddenElement.children;
+            for (var i = 0; i < children.length; i++) {
+                var child = children[i];
+                child.onclick = null;
+                child.onchange = null;
+                child.textContent = '';
+                var attr = Array.prototype.slice.call(child.attributes);
+                for (var n = 0; n < attr.length; n++) {
+                    child.removeAttribute(attr[n].name);
+                }
+            }
+            var selectedElement = this.hiddenElement.querySelector('option');
+            if (selectedElement) {
+                selectedElement.removeAttribute('value');
+                selectedElement.removeAttribute('selected');
+                selectedElement.text = '';
+                selectedElement.innerHTML = '';
+                selectedElement = null;
+            }
+            while (this.hiddenElement.firstChild) {
+                this.hiddenElement.removeChild(this.hiddenElement.firstChild);
+            }
+            if (this.hiddenElement.attributes) {
+                var attr = Array.prototype.slice.call(this.hiddenElement.attributes);
+                for (var n = 0; n < attr.length; n++) {
+                    this.hiddenElement.removeAttribute(attr[n].name);
+                }
+            }
+            if (this.hiddenElement.parentNode) {
+                this.hiddenElement.parentNode.removeChild(this.hiddenElement);
+            }
+            this.hiddenElement.innerHTML = '';
+        }
         // Remove the select element if it exists
         var selectElement = this.overAllWrapper.querySelector('select.e-multi-hidden');
         if (selectElement && selectElement.parentElement) {
@@ -20010,7 +20332,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             var attrArray = ['readonly', 'aria-disabled', 'placeholder', 'aria-labelledby',
                 'aria-expanded', 'autocomplete', 'aria-readonly', 'autocapitalize',
                 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-label', 'aria-hidden', 'tabindex', 'aria-controls',
-                'aria-describedby', 'size', 'role', 'type', 'class'];
+                'aria-describedby', 'size', 'role', 'type', 'class', 'aria-activedescendant'];
             for (var i = 0; i < attrArray.length; i++) {
                 this.inputElement.removeAttribute(attrArray[i]);
             }
@@ -23884,8 +24206,10 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             return;
         }
         this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
-        var isRteImage = document.activeElement.parentElement && document.activeElement.parentElement.querySelector('.e-rte-image') ? true : false;
-        if (document.activeElement !== this.inputElement && !isRteImage) {
+        var activeParent = document.activeElement && document.activeElement.parentElement;
+        var isRteImage = activeParent && !!activeParent.querySelector('.e-rte-image');
+        var isBECodeDropdownFocused = activeParent && !!activeParent.querySelector('.e-blockeditor .e-code-block-container .e-input-group.e-input-focus');
+        if (document.activeElement !== this.inputElement && !isRteImage && !isBECodeDropdownFocused) {
             this.inputElement.focus();
         }
         if (this.isContentEditable(this.inputElement)) {
@@ -23910,7 +24234,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             if (!this.requireLeadingSpace && lastWordRange && lastWordRange.includes(this.mentionChar)) {
                 lastWordRange = this.mentionChar + lastWordRange.split(this.mentionChar).pop();
             }
-            if (lastWordRange.includes(' ')) {
+            if (/\s|\u00A0/.test(lastWordRange)) {
                 return;
             }
         }
@@ -24444,7 +24768,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
     };
     Mention.prototype.setHeight = function (popupEle) {
         if (this.popupHeight !== 'auto' && this.list) {
-            this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
+            var parentStyle = getComputedStyle(this.list.parentElement);
+            var paddingY = parseInt(parentStyle.paddingTop || '0', 10) + parseInt(parentStyle.paddingBottom || '0', 10);
+            this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2 - paddingY).toString() + 'px'; // due to box-sizing property
             popupEle.style.maxHeight = formatUnit(this.popupHeight);
         }
         else {