@syncfusion/ej2-dropdowns 32.2.8 → 33.1.44

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,6 +472,7 @@ class VirtualScroll {
                 this.parent.setCurrentView = false;
                 this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                 isListUpdated = false;
+                reOrderList = null;
             }
             this.parent.totalItemsCount();
         }
@@ -481,10 +484,11 @@ class VirtualScroll {
             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) {
@@ -1271,6 +1288,9 @@ let DropDownBase = class DropDownBase extends Component {
     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 +1304,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 +1337,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 +1453,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 +1480,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 +2014,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 +2247,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 +2268,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 +2367,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 +2389,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 +2803,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 +2920,7 @@ let DropDownBase = class DropDownBase extends Component {
             this.updateSelection();
         }
         this.addedNewItem = true;
+        liCollections = null;
     }
     /**
      * Checks if the given HTML element is disabled.
@@ -2993,13 +3036,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 +3291,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 +3569,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 +3577,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             else {
                 this.setSelection(element, null);
             }
+            element = null;
         }
         else {
             this.setSelection(this.liCollections[this.activeIndex], null);
@@ -3674,7 +3734,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 +3843,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 +3855,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 +3998,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 +4013,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     this.setSelection(li, e);
                     this.setScrollPosition();
                 }
+                li = null;
             }
         }
     }
@@ -4088,7 +4152,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 +4247,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 +4284,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.updateUpDownAction(e);
         }
         e.preventDefault();
+        focusEle = null;
     }
     updateHomeEndAction(e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
@@ -4325,7 +4391,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 +4405,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
             this.hidePopup(e);
             this.focusDropDown(e);
+            li = null;
         }
         else {
             this.showPopup();
@@ -4536,6 +4603,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 +4641,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 +4651,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 +4676,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 +5334,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 +5394,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 +5554,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;
@@ -5530,7 +5602,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         });
         return checkField;
     }
-    checkAndFetchItemData(list, value, checkField) {
+    checkAndFetchItemData(list, value, checkField, isOffline = false) {
         const fieldValue = this.fields.value.split('.');
         let checkVal = list.some((x) => isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
             this.checkFieldValue(x, fieldValue) === value : x[checkField] === value);
@@ -5539,27 +5611,66 @@ let DropDownList = class DropDownList extends DropDownBase {
                 this.checkFieldValue(x, fieldValue) === value : x[checkField] === value);
         }
         if (!checkVal && this.dataSource instanceof DataManager) {
-            (this.dataSource).executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', value)))
-                .then((e) => {
-                if (e.result.length > 0) {
-                    if (!this.enableVirtualization) {
-                        this.addItem(e.result, list.length);
+            if (isOffline) {
+                this.searchOfflineData(value, checkField);
+            }
+            else {
+                (this.dataSource).executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', value)))
+                    .then((e) => {
+                    if (e.result.length > 0) {
+                        if (!this.enableVirtualization) {
+                            this.addItem(e.result, list.length);
+                        }
+                        else {
+                            this.itemData = e.result[0];
+                            const dataItem = this.getItemData();
+                            if ((this.value === dataItem.value && this.text !== dataItem.text) ||
+                                (this.value !== dataItem.value && this.text === dataItem.text)) {
+                                this.setProperties({ text: dataItem.text.toString() });
+                                Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+                            }
+                        }
+                        this.updateValues();
                     }
                     else {
-                        this.itemData = e.result[0];
-                        const dataItem = this.getItemData();
-                        if ((this.value === dataItem.value && this.text !== dataItem.text) ||
-                            (this.value !== dataItem.value && this.text === dataItem.text)) {
-                            this.setProperties({ text: dataItem.text.toString() });
-                            Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
-                        }
+                        this.updateValues();
                     }
-                    this.updateValues();
-                }
-                else {
-                    this.updateValues();
+                });
+            }
+        }
+        else {
+            this.updateValues();
+        }
+    }
+    searchOfflineData(value, checkField) {
+        if (!(this.dataSource instanceof DataManager)) {
+            this.updateValues();
+            return;
+        }
+        const dataManager = this.dataSource;
+        const fullData = dataManager.dataSource.json || [];
+        if (fullData && fullData.length > 0) {
+            const foundItem = fullData.find((item) => {
+                if (this.fields.value && this.fields.value.includes('.')) {
+                    const fieldValueArray = this.fields.value.split('.');
+                    const fieldVal = this.checkFieldValue(item, fieldValueArray);
+                    return fieldVal === value;
                 }
+                return item[checkField] === value;
             });
+            if (foundItem) {
+                this.itemData = foundItem;
+                const dataItem = this.getItemData();
+                if ((this.value === dataItem.value && this.text !== dataItem.text) ||
+                    (this.value !== dataItem.value && this.text === dataItem.text)) {
+                    this.setProperties({ text: dataItem.text.toString() });
+                    Input.setValue(this.text, this.inputElement, this.floatLabelType, this.showClearButton);
+                }
+                this.updateValues();
+            }
+            else {
+                this.updateValues();
+            }
         }
         else {
             this.updateValues();
@@ -5611,15 +5722,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;
@@ -5635,6 +5747,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');
@@ -5771,12 +5884,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');
@@ -6005,9 +6119,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 });
                 }
@@ -6028,6 +6142,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                 }
                 this.activeStateChange();
+                actionList = null;
+                ulElement = null;
             },
             targetExitViewport: () => {
                 if (!Browser.isDevice) {
@@ -6064,16 +6180,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;
@@ -6095,6 +6212,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() {
@@ -6105,10 +6225,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;
     }
@@ -6357,7 +6478,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');
@@ -6365,7 +6486,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++) {
@@ -6464,7 +6585,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,
@@ -6516,6 +6637,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;
@@ -6707,10 +6829,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);
@@ -6722,6 +6844,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) {
@@ -6773,8 +6897,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.
@@ -6839,6 +6964,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) {
@@ -6990,11 +7116,13 @@ 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 checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
                             const value = this.allowObjectBinding && !isNullOrUndefined(newProp.value) ?
                                 getValue(checkField, newProp.value) : newProp.value;
-                            this.checkAndFetchItemData(this.listData, value, checkField);
+                            this.checkAndFetchItemData(this.listData, value, checkField, isOfflineMode);
                         }
                         this.updateValues();
                         this.updateInputFields();
@@ -7063,7 +7191,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) {
@@ -7074,6 +7202,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                             }
                         }
                         this.updateInputFields();
+                        element = null;
                     }
                     break;
                 case 'footerTemplate':
@@ -7157,6 +7286,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 }
             }
         };
+        li = null;
     }
     updatePopupState() {
         if (this.beforePopupOpen) {
@@ -7321,7 +7451,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);
@@ -7329,6 +7459,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                         this.setValueTemplate();
                     }
                 }
+                element = null;
             }
             else {
                 this.resetSelection();
@@ -7440,7 +7571,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]));
@@ -7454,6 +7585,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                             this.clear();
                         }
                     }
+                    li = null;
                 }
             }
         }
@@ -7489,7 +7621,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]);
             }
@@ -7570,6 +7703,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;
@@ -7583,20 +7753,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,
@@ -12115,6 +12284,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);
@@ -14486,7 +14658,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);
@@ -15334,7 +15514,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
             }
             else {
-                this.onActionComplete(list, this.mainData);
+                const listUl = this.list && this.list.querySelector('ul');
+                const isFullList = this.isReact && this.itemTemplate && listUl != null &&
+                    listUl.querySelectorAll('.e-list-item').length === this.mainData.length;
+                this.onActionComplete(isFullList ? listUl : list, this.mainData);
             }
             this.focusAtLastListItem(data);
             if (this.value && this.value.length) {
@@ -15565,9 +15748,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         addClass([element], CHIP_SELECTED);
         if (element) {
             element.setAttribute('id', this.element.id + '_chip_item');
-            if (!isNullOrUndefined(this.inputElement) && element.id && !this.inputElement.hasAttribute('aria-activedescendant')) {
+            if (!isNullOrUndefined(this.inputElement) && element.id) {
                 this.inputElement.setAttribute('aria-activedescendant', element.id);
             }
+            const chipClose = element.querySelector('span.' + CHIP_CLOSE$1.split(' ')[0]);
+            if (chipClose) {
+                chipClose.removeAttribute('aria-hidden');
+            }
         }
         this.trigger('chipSelection', e);
     }
@@ -15861,10 +16048,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)) {
@@ -15902,7 +16091,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 = [];
@@ -15962,6 +16153,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     dispatchSelect(value, eve, element, isNotTrigger, length, dataValue, text) {
         const list = this.listData;
         if (this.initStatus && !isNotTrigger && (!this.allowObjectBinding || (this.allowObjectBinding && value))) {
+            let selectAllArgsLocal = null;
             value = this.allowObjectBinding ? getValue(((this.fields.value) ? this.fields.value : ''), value) : value;
             const val = dataValue ? dataValue : this.getDataByValue(value);
             const eventArgs = {
@@ -15978,15 +16170,13 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         this.selectAllEventEle.push(element);
                     }
                     if (length === 1) {
-                        const args = {
+                        selectAllArgsLocal = {
                             event: eve,
                             items: this.selectAllEventEle,
                             itemData: this.selectAllEventData,
                             isInteracted: eve ? true : false,
                             isChecked: true
                         };
-                        this.trigger('selectedAll', args);
-                        this.selectAllEventData = [];
                     }
                     if (this.allowCustomValue && this.isServerRendered && this.listData !== list) {
                         this.listData = list;
@@ -16023,6 +16213,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     if (this.hideSelectedItem && this.fixedHeaderElement && this.fields.groupBy && this.mode !== 'CheckBox') {
                         super.scrollStop();
                     }
+                    if (selectAllArgsLocal) {
+                        this.trigger('selectedAll', selectAllArgsLocal);
+                        this.selectAllEventData = [];
+                    }
                 }
             });
         }
@@ -16035,12 +16229,18 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     removeChipFocus() {
         const elements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP$1 + '.' + CHIP_SELECTED);
         removeClass(elements, CHIP_SELECTED);
+        const closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE$1.split(' ')[0]);
         if (Browser.isDevice) {
-            const closeElements = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP_CLOSE$1.split(' ')[0]);
             for (let index = 0; index < closeElements.length; index++) {
+                closeElements[index].setAttribute('aria-hidden', 'true');
                 closeElements[index].style.display = 'none';
             }
         }
+        else {
+            for (let index = 0; index < closeElements.length; index++) {
+                closeElements[index].setAttribute('aria-hidden', 'true');
+            }
+        }
     }
     onMobileChipInteraction(e) {
         const chipElem = closest(e.target, '.' + CHIP$1);
@@ -16080,7 +16280,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         });
         let compiledString;
         const chipContent = this.createElement('span', { className: CHIP_CONTENT$1 });
-        const chipClose = this.createElement('span', { className: CHIP_CLOSE$1 });
+        const chipClose = this.createElement('span', { className: CHIP_CLOSE$1, attrs: { 'aria-label': 'delete', 'aria-hidden': 'true', 'tabindex': '-1' } });
         if (this.mainData) {
             itemData = this.getDataByValue(value);
         }
@@ -17345,6 +17545,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;
@@ -17423,6 +17624,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     }
                     else {
                         e.preventDefault();
+                        if (this.mode !== 'CheckBox' && this.hideSelectedItem && this.value.length === this.listData.length && this.isPopupOpen()) {
+                            this.hidePopup(e);
+                        }
                     }
                     const isFilterData = this.targetElement().trim() !== '' ? true : false;
                     this.makeTextBoxEmpty();
@@ -17758,6 +17962,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);
@@ -18078,9 +18285,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)))) {
@@ -18089,21 +18309,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) {
@@ -18117,25 +18350,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();
@@ -18193,28 +18461,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));
+                        });
                     }
                 }
             }
@@ -18263,7 +18562,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) {
@@ -18354,6 +18656,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) {
@@ -19057,7 +19360,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         else {
             this.chipCollectionWrapper = this.createElement('span', {
-                className: CHIP_WRAPPER$1
+                className: CHIP_WRAPPER$1, attrs: { role: 'listbox' }
             });
             this.chipCollectionWrapper.style.display = 'none';
             if (this.mode === 'Default') {
@@ -19628,6 +19931,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) {
@@ -19647,7 +19994,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]);
             }
@@ -23434,8 +23781,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)) {
@@ -23460,7 +23809,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;
             }
         }
@@ -23989,7 +24338,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 {