@syncfusion/ej2-dropdowns 32.2.9 → 33.1.46

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

@@ -319,7 +319,8 @@ class VirtualScroll {
         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);
     }
     getModuleName() {
         return 'VirtualScroll';
@@ -448,17 +449,18 @@ class VirtualScroll {
                     query = query.skip(0).take(this.parent.itemCount - (this.parent.value.length - this.parent.viewPortInfo.startIndex));
                     this.parent.appendUncheckList = true;
                     this.parent.setCurrentView = false;
-                    const oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
+                    let oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
                     if (oldUlElement) {
                         this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
                     }
                     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 {
-                const reOrderList = this.parent.list.querySelectorAll('.e-reorder')[0];
+                let reOrderList = this.parent.list.querySelectorAll('.e-reorder')[0];
                 if (this.parent.list.querySelector('.e-virtual-ddl-content') && reOrderList) {
                     this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);
                 }
@@ -470,21 +472,23 @@ class VirtualScroll {
                 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;
             }
             for (let i = this.parent.viewPortInfo.startIndex; i < endIndex; i++) {
                 const index = i;
                 if (this.component === 'multiselect' && this.parent.mode === 'CheckBox') {
-                    const oldUlElement = this.parent.list.querySelector('.e-list-parent' + '.e-reorder');
+                    let oldUlElement = this.parent.list.querySelector('.e-list-parent' + '.e-reorder');
                     if (oldUlElement) {
                         this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
                     }
+                    oldUlElement = null;
                 }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const alreadyAddedData = this.parent.generatedDataObject[index];
@@ -808,6 +812,18 @@ class VirtualScroll {
         };
     }
     destroy() {
+        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();
     }
 }
@@ -1098,7 +1114,7 @@ let DropDownBase = class DropDownBase extends Component {
         return checkTemplate;
     }
     l10nUpdate(actionFailure) {
-        const ele = this.getModuleName() === 'listbox' ? this.ulElement : this.list;
+        let ele = this.getModuleName() === 'listbox' ? this.ulElement : this.list;
         if ((!isNullOrUndefined(this.noRecordsTemplate) && this.noRecordsTemplate !== 'No records found') || this.actionFailureTemplate !== 'Request failed') {
             const template = actionFailure ? this.actionFailureTemplate : this.noRecordsTemplate;
             let compiledString;
@@ -1169,6 +1185,7 @@ let DropDownBase = class DropDownBase extends Component {
                 }
             }
         }
+        ele = null;
     }
     checkAndResetCache() {
         if (this.isVirtualizationEnabled) {
@@ -1265,12 +1282,21 @@ let DropDownBase = class DropDownBase extends Component {
         translateY = translateY - (this.skeletonCount * this.listItemHeight);
         translateY = ((this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0) ||
             this.skeletonCount === 0) ? 0 : translateY;
+        const virtualElement = this.list.getElementsByClassName('e-virtual-ddl')[0];
+        const style = virtualElement && virtualElement.style && virtualElement.style.height;
+        if (this.getModuleName() === 'multiselect' && !isNullOrUndefined(style) && style === '' &&
+            this.dataSource instanceof DataManager) {
+            translateY = 0;
+        }
         const styleText = `transform: translate(0px, ${translateY}px);`;
         return styleText;
     }
     UpdateSkeleton(isSkeletonCountChange, skeletonCount) {
         const isContainSkeleton = this.list.querySelector('.e-virtual-ddl-content');
         const isContainVirtualList = this.list.querySelector('.e-virtual-list');
+        if (!this.skeletonInstances) {
+            this.skeletonInstances = [];
+        }
         if (isContainSkeleton && (!isContainVirtualList || isSkeletonCountChange) && this.isVirtualizationEnabled) {
             const totalSkeletonCount = isSkeletonCountChange ? skeletonCount : this.skeletonCount;
             for (let i = 0; i < totalSkeletonCount; i++) {
@@ -1284,6 +1310,7 @@ let DropDownBase = class DropDownBase extends Component {
                     width: '95%',
                     cssClass: 'e-skeleton-text'
                 });
+                this.skeletonInstances.push(skeleton);
                 skeleton.appendTo(this.createElement('div'));
                 liElement.appendChild(skeleton.element);
                 if (isContainSkeleton.firstChild) {
@@ -1316,6 +1343,16 @@ let DropDownBase = class DropDownBase extends Component {
             }
         }
     }
+    destroySkeletons() {
+        if (this.skeletonInstances && this.skeletonInstances.length > 0) {
+            this.skeletonInstances.forEach((skeleton) => {
+                if (skeleton && !skeleton.isDestroyed) {
+                    skeleton.destroy();
+                }
+            });
+            this.skeletonInstances = [];
+        }
+    }
     getLocaleName() {
         return 'drop-down-base';
     }
@@ -1422,8 +1459,8 @@ let DropDownBase = class DropDownBase extends Component {
         this.setProperties({ htmlAttributes: attr }, true);
     }
     renderItemsBySelect() {
-        const element = this.element;
-        const group = element.querySelectorAll('select>optgroup');
+        let element = this.element;
+        let group = element.querySelectorAll('select>optgroup');
         let fields;
         const isSelectGroupCheck = this.getModuleName() === 'multiselect' && this.isGroupChecking && group.length > 0;
         fields = isSelectGroupCheck ? { value: 'value', text: 'text', groupBy: 'categeory' } : fields = { value: 'value', text: 'text' };
@@ -1449,6 +1486,8 @@ let DropDownBase = class DropDownBase extends Component {
         }
         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;
     }
     updateFields(text, value, groupBy, htmlAttributes, iconCss, disabled) {
         const field = {
@@ -1981,6 +2020,12 @@ let DropDownBase = class DropDownBase extends Component {
                 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) {
             const popupHolder = this.list;
@@ -2208,7 +2253,7 @@ let DropDownBase = class DropDownBase extends Component {
         }
     }
     updateFixedGroupTemplateHader(element) {
-        const groupData = element.cloneNode ? element.cloneNode(true) : element;
+        let groupData = element.cloneNode ? element.cloneNode(true) : element;
         let isGroupDataUpdated = false;
         if (this.groupHeaderItems && this.groupHeaderItems.length > 0) {
             for (let i = 0; i < this.groupHeaderItems.length; i++) {
@@ -2229,6 +2274,7 @@ let DropDownBase = class DropDownBase extends Component {
         }
         this.fixedHeaderElement.innerHTML = groupData.innerHTML;
         this.renderGroupTemplate(this.fixedHeaderElement);
+        groupData = null;
     }
     updateGroupFixedHeader(element, target) {
         if (this.fixedHeaderElement && this.list && this.list.parentElement) {
@@ -2327,7 +2373,7 @@ let DropDownBase = class DropDownBase extends Component {
             }
             if (this.isVirtualizationEnabled) {
                 let oldUlElement = this.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
-                const virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
+                let virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
                 const isRemovedUlelement = false;
                 if ((!oldUlElement && this.list.querySelector('.e-list-parent' + '.e-reorder')) || (oldUlElement && this.isVirtualReorder && this.list.querySelector('.e-list-parent' + '.e-reorder'))) {
                     oldUlElement = this.list.querySelector('.e-list-parent' + '.e-reorder');
@@ -2349,6 +2395,8 @@ let DropDownBase = class DropDownBase extends Component {
                     this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
                     this.updateListElements(listData);
                 }
+                oldUlElement = null;
+                virtualUlElement = null;
             }
         }
         return ulElement;
@@ -2761,7 +2809,7 @@ let DropDownBase = class DropDownBase extends Component {
         if (items && fields.groupBy) {
             items = ListBase.groupDataSource(items, fields.properties);
         }
-        const liCollections = [];
+        let liCollections = [];
         for (let i = 0; i < items.length; i++) {
             const item = items[i];
             const isHeader = item.isHeader;
@@ -2878,6 +2926,7 @@ let DropDownBase = class DropDownBase extends Component {
             this.updateSelection();
         }
         this.addedNewItem = true;
+        liCollections = null;
     }
     /**
      * Checks if the given HTML element is disabled.
@@ -2993,13 +3042,28 @@ let DropDownBase = class DropDownBase extends Component {
                 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.destroy();
     }
 };
@@ -3233,13 +3297,14 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     floatLabelChange() {
         if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {
-            const floatElement = this.inputWrapper.container.querySelector('.e-float-text');
+            let floatElement = this.inputWrapper.container.querySelector('.e-float-text');
             if (floatElement && this.inputElement.value !== '' || this.isInteracted) {
                 classList(floatElement, ['e-label-top'], ['e-label-bottom']);
             }
             else if (floatElement) {
                 classList(floatElement, ['e-label-bottom'], ['e-label-top']);
             }
+            floatElement = null;
         }
     }
     resetHandler(e) {
@@ -3510,7 +3575,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.setSelection(this.getElementByValue(value), null);
         }
         else if (this.text && isNullOrUndefined(this.value)) {
-            const element = this.getElementByText(this.text);
+            let element = this.getElementByText(this.text);
             if (isNullOrUndefined(element)) {
                 this.setProperties({ text: null });
                 return;
@@ -3518,6 +3583,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             else {
                 this.setSelection(element, null);
             }
+            element = null;
         }
         else {
             this.setSelection(this.liCollections[this.activeIndex], null);
@@ -3566,6 +3632,11 @@ let DropDownList = class DropDownList extends DropDownBase {
             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;
     }
     focusOutAction(e) {
@@ -3674,7 +3745,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (formElement) {
             EventHandler.remove(formElement, 'reset', this.resetValueHandler);
         }
-        if (!Browser.isDevice) {
+        if (!Browser.isDevice && !isNullOrUndefined(this.keyboardModule)) {
             this.keyboardModule.destroy();
         }
         if (this.showClearButton) {
@@ -3783,7 +3854,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     onMouseClick(e) {
         const target = e.target;
         this.keyboardEvent = null;
-        const li = closest(target, '.' + dropDownBaseClasses.li);
+        let li = closest(target, '.' + dropDownBaseClasses.li);
         if (!this.isValidLI(li) || this.isDisabledElement(li)) {
             return;
         }
@@ -3795,10 +3866,12 @@ let DropDownList = class DropDownList extends DropDownBase {
             const delay = 100;
             this.closePopup(delay, e);
         }
+        li = null;
     }
     onMouseOver(e) {
-        const currentLi = closest(e.target, '.' + dropDownBaseClasses.li);
+        let currentLi = closest(e.target, '.' + dropDownBaseClasses.li);
         this.setHover(currentLi);
+        currentLi = null;
     }
     setHover(li) {
         if (this.enabled && this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.hover)) {
@@ -3936,6 +4009,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
                     this.list.scrollTop = 0;
                 }
+                li = null;
             }
             else {
                 let li;
@@ -3950,6 +4024,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.setSelection(li, e);
                     this.setScrollPosition();
                 }
+                li = null;
             }
         }
     }
@@ -4088,7 +4163,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.activeIndex = filterIndex;
             }
         }
-        const focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
+        let focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
         if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
             this.setSelection(focusEle, e);
             if (this.enableVirtualization) {
@@ -4183,6 +4258,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.ulElement = this.list.querySelector('ul');
                 this.handleVirtualKeyboardActions(e, this.pageCount);
             }
+            nextItem = null;
         }
         if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
             const value = this.getItemData().value;
@@ -4219,6 +4295,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.updateUpDownAction(e);
         }
         e.preventDefault();
+        focusEle = null;
     }
     updateHomeEndAction(e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
@@ -4325,7 +4402,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     selectCurrentItem(e) {
         if (this.isPopupOpen) {
-            const li = this.list.querySelector('.' + dropDownListClasses.focus);
+            let li = this.list.querySelector('.' + dropDownListClasses.focus);
             if (this.isDisabledElement(li)) {
                 return;
             }
@@ -4339,6 +4416,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
             this.hidePopup(e);
             this.focusDropDown(e);
+            li = null;
         }
         else {
             this.showPopup();
@@ -4536,6 +4614,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 ulElement = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
                 this.actionCompleteData.ulElement = ulElement;
             }
+            ulElement = null;
         }
     }
     updateSelectedItem(li, e, preventSelect, isSelection) {
@@ -4573,6 +4652,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.setSelectOptions(li, e);
             }
         }
+        li = null;
     }
     selectEventCallback(li, e, preventSelect, selectedData, value) {
         this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
@@ -4582,7 +4662,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         this.item = li;
         this.itemData = selectedData;
-        const focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
+        let focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
         if (focusedItem) {
             removeClass([focusedItem], dropDownBaseClasses.focus);
         }
@@ -4607,6 +4687,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
             this.activeIndex = this.getIndexByValue(value);
         }
+        focusedItem = null;
     }
     activeItem(li) {
         if (this.isValidLI(li) && !li.classList.contains(dropDownBaseClasses.selected)) {
@@ -5264,7 +5345,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     setSearchBox(popupElement) {
         if (this.isFiltering()) {
-            const parentElement = popupElement.querySelector('.' + dropDownListClasses.filterParent) ?
+            let parentElement = popupElement.querySelector('.' + dropDownListClasses.filterParent) ?
                 popupElement.querySelector('.' + dropDownListClasses.filterParent) : this.createElement('span', {
                 className: dropDownListClasses.filterParent
             });
@@ -5324,6 +5405,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             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 {
@@ -5483,8 +5565,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             else if (this.enableVirtualization && this.getModuleName() !== 'autocomplete' && !this.isFiltering()) {
                 const value = this.getItemData().value;
                 this.activeIndex = this.getIndexByValue(value);
-                const element = this.findListElement(this.list, 'li', 'data-value', value);
+                let 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;
@@ -5650,15 +5733,16 @@ let DropDownList = class DropDownList extends DropDownBase {
         const value = this.getItemData().value;
         this.activeIndex = ((this.enableVirtualization && !isNullOrUndefined(value)) || !this.enableVirtualization) ?
             this.getIndexByValue(value) : this.activeIndex;
-        const element = this.findListElement(this.list, 'li', 'data-value', value);
+        let element = this.findListElement(this.list, 'li', 'data-value', value);
         this.selectedLI = element;
         this.activeItem(element);
         if (!(this.enableVirtualization && isNullOrUndefined(element))) {
             this.removeFocus();
         }
+        element = null;
     }
     updateSelection() {
-        const selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);
+        let selectedItem = this.list.querySelector('.' + dropDownBaseClasses.selected);
         if (selectedItem) {
             this.setProperties({ 'index': this.getIndexByValue(selectedItem.getAttribute('data-value')) });
             this.activeIndex = this.index;
@@ -5674,6 +5758,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
             this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);
         }
+        selectedItem = null;
     }
     updateSelectionList() {
         const selectedItem = this.list && this.list.querySelector('.' + 'e-active');
@@ -5810,12 +5895,13 @@ let DropDownList = class DropDownList extends DropDownBase {
                 if (Browser.isDevice && this.isDeviceFullScreen && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||
                     (this.isDropDownClick && this.getModuleName() === 'combobox')))) {
                     offsetValue = this.getOffsetValue(popupEle);
-                    const firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
+                    let firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
                     if (!isNullOrUndefined(this.inputElement)) {
                         left = -(parseInt(getComputedStyle(firstItem).textIndent, 10) -
                             parseInt(getComputedStyle(this.inputElement).paddingLeft, 10) +
                             parseInt(getComputedStyle(this.inputElement.parentElement).borderLeftWidth, 10));
                     }
+                    firstItem = null;
                 }
                 this.createPopup(popupEle, offsetValue, left);
                 this.popupContentElement = this.popupObj.element.querySelector('.e-content');
@@ -6044,9 +6130,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             open: () => {
                 EventHandler.add(document, 'mousedown', this.onDocumentClick, this);
                 this.isPopupOpen = true;
-                const actionList = this.actionCompleteData && this.actionCompleteData.ulElement &&
+                let actionList = this.actionCompleteData && this.actionCompleteData.ulElement &&
                     this.actionCompleteData.ulElement.querySelector('li');
-                const ulElement = this.list.querySelector('ul li');
+                let ulElement = this.list.querySelector('ul li');
                 if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
                     attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
                 }
@@ -6067,6 +6153,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                 }
                 this.activeStateChange();
+                actionList = null;
+                ulElement = null;
             },
             targetExitViewport: () => {
                 if (!Browser.isDevice) {
@@ -6103,16 +6191,17 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.popupObj.element.style.width = '100%';
         this.list.style.maxHeight = (window.innerHeight - searchBoxHeight) + 'px';
         this.list.style.height = (window.innerHeight - searchBoxHeight) + 'px';
-        const clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);
+        let clearElement = this.filterInput.parentElement.querySelector('.' + dropDownListClasses.clearIcon);
         detach(this.filterInput);
         clearElement.parentElement.insertBefore(this.filterInput, clearElement);
+        clearElement = null;
     }
     setPopupPosition(border) {
         let offsetValue;
         const popupOffset = border;
-        const selectedLI = this.list.querySelector('.' + dropDownListClasses.focus) || this.selectedLI;
-        const firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
-        const lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];
+        let selectedLI = this.list.querySelector('.' + dropDownListClasses.focus) || this.selectedLI;
+        let firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
+        let lastItem = this.isEmptyList() ? this.list : this.liCollections[this.getItems().length - 1];
         const liHeight = firstItem.getBoundingClientRect().height;
         this.listItemHeight = liHeight + parseInt(window.getComputedStyle(firstItem).marginBottom, 10);
         const listHeight = this.list.offsetHeight / 2;
@@ -6134,6 +6223,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         const inputHeight = this.inputWrapper.container.offsetHeight;
         offsetValue = offsetValue + liHeight + popupOffset - ((liHeight - inputHeight) / 2);
+        selectedLI = null;
+        firstItem = null;
+        lastItem = null;
         return -offsetValue;
     }
     setWidth() {
@@ -6144,10 +6236,11 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         if (Browser.isDevice && (width.indexOf('px') > -1) && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||
             (this.isDropDownClick && this.getModuleName() === 'combobox')))) {
-            const firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
+            let firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
             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;
     }
@@ -6396,7 +6489,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 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');
@@ -6404,7 +6497,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 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);
                 const attrs = Array.prototype.slice.call(this.filterInput.attributes);
                 for (let n = 0; n < attrs.length; n++) {
@@ -6503,7 +6596,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (isNullOrUndefined(currentData)) {
             return;
         }
-        const ulElement = this.renderItems(currentData, this.fields);
+        let ulElement = this.renderItems(currentData, this.fields);
         this.list.scrollTop = 0;
         this.virtualListInfo = {
             currentPageNumber: null,
@@ -6555,6 +6648,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
         }
+        ulElement = null;
     }
     destroyPopup() {
         this.isPopupOpen = false;
@@ -6593,6 +6687,12 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         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
+                const 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';
             }
@@ -6656,6 +6756,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         const 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')) {
@@ -6746,10 +6849,10 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.viewPortInfo.endIndex : this.itemCount;
     }
     getListHeight() {
-        const listParent = this.createElement('div', {
+        let listParent = this.createElement('div', {
             className: 'e-dropdownbase'
         });
-        const item = this.createElement('li', {
+        let item = this.createElement('li', {
             className: 'e-list-item'
         });
         const listParentHeight = formatUnit(this.popupHeight);
@@ -6761,6 +6864,8 @@ let DropDownList = class DropDownList extends DropDownBase {
         const listItemHeight = Math.ceil(item.getBoundingClientRect().height) +
             parseInt(window.getComputedStyle(item).marginBottom, 10);
         listParent.remove();
+        listParent = null;
+        item = null;
         return listItemHeight;
     }
     setFooterTemplate(popupEle) {
@@ -6812,8 +6917,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (headerCompTemp && headerCompTemp.length) {
             append(headerCompTemp, this.header);
         }
-        const contentEle = popupEle.querySelector('div.e-content');
+        let contentEle = popupEle.querySelector('div.e-content');
         popupEle.insertBefore(this.header, contentEle);
+        contentEle = null;
     }
     /**
      * Sets the enabled state to DropDownBase.
@@ -6878,6 +6984,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             ((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) {
@@ -7029,9 +7136,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                         return;
                     }
                     if (this.enableVirtualization) {
+                        const isOfflineMode = this.dataSource instanceof DataManager &&
+                            this.dataSource.dataSource.offline === true;
                         if (newProp.value && this.dataSource instanceof DataManager) {
-                            const isOfflineMode = this.dataSource instanceof DataManager &&
-                                this.dataSource.dataSource.offline === true;
                             const checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
                             const value = this.allowObjectBinding && !isNullOrUndefined(newProp.value) ?
                                 getValue(checkField, newProp.value) : newProp.value;
@@ -7104,7 +7211,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                         this.renderList();
                     }
                     if (!this.initialRemoteRender && this.liCollections) {
-                        const element = this.liCollections[newProp.index];
+                        let element = this.liCollections[newProp.index];
                         if (!this.checkValidLi(element)) {
                             if (this.liCollections && this.liCollections.length === 100 &&
                                 this.getModuleName() === 'autocomplete' && this.listData.length > 100) {
@@ -7115,6 +7222,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                             }
                         }
                         this.updateInputFields();
+                        element = null;
                     }
                     break;
                 case 'footerTemplate':
@@ -7198,6 +7306,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
             }
         };
+        li = null;
     }
     updatePopupState() {
         if (this.beforePopupOpen) {
@@ -7362,7 +7471,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.isEscapeKey = false;
             if (!isNullOrUndefined(this.index)) {
                 const value = this.allowObjectBinding ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
-                const element = this.findListElement(this.ulElement, 'li', 'data-value', value);
+                let element = this.findListElement(this.ulElement, 'li', 'data-value', value);
                 this.selectedLI = this.liCollections[this.index] || element;
                 if (this.selectedLI) {
                     this.updateSelectedItem(this.selectedLI, null, true);
@@ -7370,6 +7479,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                         this.setValueTemplate();
                     }
                 }
+                element = null;
             }
             else {
                 this.resetSelection();
@@ -7481,7 +7591,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
                 const isValidIndex = itemIndex < this.liCollections.length && itemIndex > -1;
                 if (isValidIndex && !(JSON.parse(JSON.stringify(this.listData[itemIndex]))[this.fields.disabled])) {
-                    const li = this.liCollections[itemIndex];
+                    let li = this.liCollections[itemIndex];
                     if (li) {
                         this.disableListItem(li);
                         const parsedData = JSON.parse(JSON.stringify(this.listData[itemIndex]));
@@ -7495,6 +7605,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                             this.clear();
                         }
                     }
+                    li = null;
                 }
             }
         }
@@ -7530,7 +7641,8 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.inputElement) {
             const 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 (let i = 0; i < attrArray.length; i++) {
                 this.inputElement.removeAttribute(attrArray[i]);
             }
@@ -7611,6 +7723,43 @@ let DropDownList = class DropDownList extends DropDownBase {
             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;
@@ -7624,20 +7773,19 @@ let DropDownList = class DropDownList extends DropDownBase {
         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,
@@ -12156,6 +12304,9 @@ let ComboBox = class ComboBox extends DropDownList {
                     break;
                 case 'allowCustom':
                     break;
+                case 'placeholder':
+                    Input.setPlaceholder(newProp.placeholder, this.inputElement, this.getModuleName());
+                    break;
                 default: {
                     // eslint-disable-next-line max-len
                     const comboProps = this.getPropObject(prop, newProp, oldProp);
@@ -12997,9 +13148,15 @@ function createFloatLabel(overAllWrapper, searchWrapper, element, inputElement,
     const floatLabelElement = createElement('label', { className: FLOATTEXT });
     const id = element.getAttribute('id') ? element.getAttribute('id') : getUniqueID('ej2_multiselect');
     element.id = id;
+    let 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);
+        const 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 !== '') {
@@ -14527,7 +14684,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     setPlaceholderSize(downIconWidth) {
         if (isNullOrUndefined(this.value) || this.value.length === 0) {
             if (this.dropIcon.offsetWidth !== 0) {
-                this.searchWrapper.style.width = ('calc(100% - ' + (downIconWidth + 10)) + 'px';
+                let totalIconWidth = downIconWidth + 10;
+                if (this.showClearButton && this.overAllClear) {
+                    const display = this.overAllClear.style.display;
+                    this.overAllClear.style.display = 'block';
+                    const 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);
@@ -15600,6 +15765,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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();
@@ -15611,6 +15779,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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');
+                }
             }
             const chipClose = element.querySelector('span.' + CHIP_CLOSE$1.split(' ')[0]);
             if (chipClose) {
@@ -15909,10 +16080,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             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)) {
@@ -15950,7 +16123,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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') {
                 const currentText = [];
@@ -17402,6 +17577,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.updateData(delimChar, e, isInitialVirtualData);
     }
     onMouseClick(e) {
+        this.isSelectAllClicked = false;
         if (!this.isClearAllItem) {
             this.keyCode = null;
             this.scrollFocusStatus = false;
@@ -17480,7 +17656,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     }
                     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);
                         }
                     }
@@ -17818,6 +17994,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             const remainCompildTemp = remainContent.replace('${count}', this.value.length.toString());
             raminElement.innerText = remainCompildTemp;
             this.viewWrapper.appendChild(raminElement);
+            if (this.isSelectAllClicked) {
+                this.showOverAllClear();
+            }
             this.renderReactTemplates();
             const remainSize = raminElement.offsetWidth;
             remove(raminElement);
@@ -18103,9 +18282,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             firstItems.forEach((node) => {
                 fragment.appendChild(node.cloneNode(true));
             });
-            li.forEach((node) => {
-                fragment.appendChild(node.cloneNode(true));
-            });
+            if ((this.totalItemCount >= (this.itemCount * 2) && this.dataSource instanceof DataManager)) {
+                li.forEach((node) => {
+                    fragment.appendChild(node.cloneNode(true));
+                });
+            }
             const concatenatedNodeList = fragment.childNodes;
             if (this.virtualSelectAllData instanceof Array) {
                 while (index < length && index <= 50 && index < count) {
@@ -18138,9 +18319,22 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     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((el) => el && (el.style.opacity = '0.5'));
+                        this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                        this.filterParent.style.cursor = 'progress';
+                    }
                     setTimeout(() => {
-                        if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {
-                            this.virtualSelectAllData.map((obj) => {
+                        const dataArray = this.virtualSelectAllData;
+                        const batchSize = 500;
+                        let currentIndex = 0;
+                        const processBatch = () => {
+                            const endIndex = Math.min(currentIndex + batchSize, dataArray.length);
+                            const batch = dataArray.slice(currentIndex, endIndex);
+                            // Use map on the batch
+                            batch.map((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)))) {
@@ -18149,21 +18343,34 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                                     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')) {
-                            const 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')) {
+                                    const 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((el) => 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) {
@@ -18177,25 +18384,60 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         else {
             if (this.virtualSelectAllData && this.virtualSelectAllData.length > 0) {
-                this.virtualSelectAllData.map((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'
-                });
+                const dataArray = this.virtualSelectAllData;
+                const batchSize = 500;
+                let currentIndex = 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((el) => el && (el.style.opacity = '0.5'));
+                    this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                    this.filterParent.style.cursor = 'progress';
+                }
+                const processBatch = () => {
+                    const endIndex = Math.min(currentIndex + batchSize, dataArray.length);
+                    const batch = dataArray.slice(currentIndex, endIndex);
+                    // Use map on the batch
+                    batch.map((obj) => {
+                        this.virtualSelectAll = true;
+                        // eslint-disable-next-line security/detect-object-injection
+                        this.removeValue(this.value[index], event, this.value.length - index);
+                    });
+                    currentIndex = endIndex;
+                    if (currentIndex < dataArray.length) {
+                        requestAnimationFrame(processBatch);
+                    }
+                    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((el) => 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();
             }
         }
         this.checkSelectAll();
@@ -18253,28 +18495,59 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         index++;
                     }
                     if (length > 50) {
-                        setTimeout(() => {
-                            while (index < length && index < count) {
-                                this.isSelectAllTarget = (length === index + 1);
-                                this.updateListSelection(li[index], event, length - index);
-                                if (this.enableGroupCheckBox) {
-                                    this.findGroupStart(li[index]);
+                        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((el) => el && (el.style.opacity = '0.5'));
+                            this.filterParent.querySelector('.e-input').setAttribute('readonly', 'true');
+                            this.filterParent.style.cursor = 'progress';
+                        }
+                        this.isProcessingVirtualSelectAll = !this.isSelectAllClicked;
+                        let indexLocal = index; // preserve original index value
+                        const maxIndex = Math.min(length, count);
+                        // Use two-frame yield to ensure spinner paints before heavy work starts
+                        const CHUNK_SIZE = 6;
+                        requestAnimationFrame(() => {
+                            requestAnimationFrame(function processFrame() {
+                                if (!this.list) {
+                                    return;
                                 }
-                                index++;
-                            }
-                            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].classList.contains('e-item-focus')) {
-                                const selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-                                if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
-                                    li[index - 1].classList.remove('e-item-focus');
+                                if (indexLocal >= maxIndex) {
+                                    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] && li[indexLocal - 1].classList.contains('e-item-focus')) {
+                                        const selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+                                        if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                                            li[indexLocal - 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((el) => 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
+                                let processed = 0;
+                                while (processed < CHUNK_SIZE && indexLocal < maxIndex) {
+                                    this.isSelectAllTarget = (length === indexLocal + 1);
+                                    this.updateListSelection(li[indexLocal], event, length - indexLocal);
+                                    if (this.enableGroupCheckBox) {
+                                        this.findGroupStart(li[indexLocal]);
+                                    }
+                                    indexLocal++;
+                                    processed++;
+                                }
+                                requestAnimationFrame(processFrame.bind(this));
+                            }.bind(this));
+                        });
                     }
                 }
             }
@@ -18323,7 +18596,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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) {
@@ -18414,6 +18690,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.renderPopup();
     }
     selectAllItems(state, event) {
+        this.isSelectAllClicked = state;
         if (isNullOrUndefined(this.list)) {
             this.selectAllAction = () => {
                 if (this.mode === 'CheckBox' && this.showSelectAll) {
@@ -18903,7 +19180,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         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;
                 }
             });
         }
@@ -19117,7 +19395,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         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') {
@@ -19688,6 +19966,50 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         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;
+            const attrs = Array.prototype.slice.call(this.hiddenElement.attributes);
+            for (let n = 0; n < attrs.length; n++) {
+                this.hiddenElement.removeAttribute(attrs[n].name);
+            }
+            const children = this.hiddenElement.children;
+            for (let i = 0; i < children.length; i++) {
+                const child = children[i];
+                child.onclick = null;
+                child.onchange = null;
+                child.textContent = '';
+                const attr = Array.prototype.slice.call(child.attributes);
+                for (let n = 0; n < attr.length; n++) {
+                    child.removeAttribute(attr[n].name);
+                }
+            }
+            let 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) {
+                const attr = Array.prototype.slice.call(this.hiddenElement.attributes);
+                for (let 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
         const selectElement = this.overAllWrapper.querySelector('select.e-multi-hidden');
         if (selectElement && selectElement.parentElement) {
@@ -19707,7 +20029,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             const 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 (let i = 0; i < attrArray.length; i++) {
                 this.inputElement.removeAttribute(attrArray[i]);
             }
@@ -23494,8 +23816,10 @@ let Mention = class Mention extends DropDownBase {
             return;
         }
         this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
-        const isRteImage = document.activeElement.parentElement && document.activeElement.parentElement.querySelector('.e-rte-image') ? true : false;
-        if (document.activeElement !== this.inputElement && !isRteImage) {
+        const activeParent = document.activeElement && document.activeElement.parentElement;
+        const isRteImage = activeParent && !!activeParent.querySelector('.e-rte-image');
+        const 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)) {
@@ -23520,7 +23844,7 @@ let Mention = class Mention extends DropDownBase {
             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;
             }
         }
@@ -24049,7 +24373,9 @@ let Mention = class Mention extends DropDownBase {
     }
     setHeight(popupEle) {
         if (this.popupHeight !== 'auto' && this.list) {
-            this.list.style.maxHeight = (parseInt(this.listHeight, 10) - 2).toString() + 'px'; // due to box-sizing property
+            const parentStyle = getComputedStyle(this.list.parentElement);
+            const 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 {