@syncfusion/ej2-dropdowns 33.2.15 → 34.1.30

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

@@ -266,6 +266,7 @@ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _argume
 };
 class VirtualScroll {
     constructor(parent) {
+        this.previousScrollTop = 0;
         this.sentinelInfo = {
             'up': {
                 check: (rect, info) => {
@@ -325,9 +326,14 @@ class VirtualScroll {
     getModuleName() {
         return 'VirtualScroll';
     }
+    isFilterScrollScenario() {
+        return this.component === 'dropdownlist' && this.parent.allowFiltering;
+    }
     popupScrollHandler() {
         this.parent.isMouseScrollAction = true;
-        this.parent.isPreventScrollAction = false;
+        if (!(this.isFilterScrollScenario() && this.parent.isVirtualScrolling)) {
+            this.parent.isPreventScrollAction = false;
+        }
     }
     getPageQuery(query, virtualStartIndex, virtualEndIndex) {
         if (virtualEndIndex !== 0 && !this.parent.allowFiltering && this.component !== 'autocomplete') {
@@ -685,7 +691,8 @@ class VirtualScroll {
         });
     }
     scrollListener(scrollArgs) {
-        if (!this.parent.isPreventScrollAction && !this.parent.isVirtualTrackHeight) {
+        const preventReentrant = this.isFilterScrollScenario() && this.parent.isVirtualScrolling;
+        if (!this.parent.isPreventScrollAction && !this.parent.isVirtualTrackHeight && !preventReentrant) {
             this.parent.preventSetCurrentData = false;
             const info = scrollArgs.sentinel;
             const pStartIndex = this.parent.previousStartIndex;
@@ -697,6 +704,8 @@ class VirtualScroll {
                 this.parent.virtualListInfo = Object.assign({}, this.parent.viewPortInfo);
                 this.parent.isPreventKeyAction = true;
                 this.parent.isVirtualScrolling = true;
+                const savedScrollTop = this.parent.popupContentElement ?
+                    this.parent.popupContentElement.scrollTop : 0;
                 setTimeout(() => {
                     this.parent.pageCount = this.parent.getPageCount();
                     this.parent.isRequesting = false;
@@ -706,9 +715,16 @@ class VirtualScroll {
                             this.parent.updateSelectionList();
                             this.parent.liCollections = this.parent.getItems();
                         }
+                        if (this.isFilterScrollScenario()) {
+                            const scrollContainer = this.parent.popupContentElement || this.parent.list;
+                            if (scrollContainer && scrollContainer.scrollTop < savedScrollTop) {
+                                scrollContainer.scrollTop = savedScrollTop;
+                            }
+                            this.previousScrollTop = scrollContainer ? scrollContainer.scrollTop : savedScrollTop;
+                        }
                         this.parent.isKeyBoardAction = false;
-                        this.parent.isVirtualScrolling = false;
                         this.parent.isPreventKeyAction = false;
+                        this.parent.isVirtualScrolling = false;
                     });
                 }, 5);
             }
@@ -781,14 +797,17 @@ class VirtualScroll {
     }
     virtualScrollHandler(callback) {
         const delay = Browser.info.name === 'chrome' ? 200 : 100;
-        let prevTop = 0;
         const debounced100 = debounce(callback, delay);
         const debounced50 = debounce(callback, 50);
         return (e) => {
             const top = e.target.scrollTop;
             const left = e.target.scrollLeft;
-            const direction = prevTop < top && !this.parent.isUpwardScrolling ? 'down' : 'up';
-            prevTop = top;
+            if (this.isFilterScrollScenario() && (this.parent.isVirtualScrolling || this.parent.isPreventScrollAction)) {
+                this.previousScrollTop = top;
+                return;
+            }
+            const direction = this.previousScrollTop < top && !this.parent.isUpwardScrolling ? 'down' : 'up';
+            this.previousScrollTop = top;
             const current = this.sentinelInfo[direction];
             const pstartIndex = this.parent.scrollPreStartIndex;
             const scrollOffsetargs = {
@@ -3050,6 +3069,9 @@ let DropDownBase = class DropDownBase extends Component {
      * @returns {void}
      */
     destroy() {
+        if (this.keyboardModule) {
+            this.keyboardModule.destroy();
+        }
         if (document) {
             if (this.fields && this.fields.groupBy) {
                 const elements = this.getScrollableParent();
@@ -3089,6 +3111,7 @@ let DropDownBase = class DropDownBase extends Component {
         this.virtualSelectAllData = null;
         this.incrementalListData = null;
         super.destroy();
+        this.keyboardModule = null;
     }
 };
 __decorate([
@@ -4722,7 +4745,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    setValue(e) {
+    setValue(e, autofill) {
         const dataItem = this.getItemData();
         this.isTouched = !isNullOrUndefined(e);
         if (dataItem.value === null) {
@@ -4754,7 +4777,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             (this.previousValue != null && this.isObjectInArray(this.previousValue, [this.allowCustom &&
                     this.isObjectCustomValue ? this.value ? this.value : dataItem : dataItem.value ?
                     this.getDataByValue(dataItem.value) : dataItem])))) {
-            if (this.getModuleName() === 'combobox' && this.autoFill && e && (e.type === 'click' || e.action === 'enter')) {
+            if (this.getModuleName() === 'combobox' && autofill && e && (e.type === 'click' || e.action === 'enter')) {
                 return false;
             }
             this.isSelected = false;
@@ -8590,12 +8613,13 @@ let DropDownTree = class DropDownTree extends Component {
         EventHandler.add(this.inputWrapper, 'mousemove', this.mouseIn, this);
         EventHandler.add(this.inputWrapper, 'mouseout', this.onMouseLeave, this);
         EventHandler.add(this.overAllClear, 'mousedown', this.clearAll, this);
-        EventHandler.add(window, 'resize', this.windowResizeContext);
+        this.windowResizeHandler = this.windowResize.bind(this);
+        EventHandler.add(window, 'resize', this.windowResizeHandler, this);
         const formElement = closest(this.inputWrapper, 'form');
         if (formElement) {
             EventHandler.add(formElement, 'reset', this.resetValueHandler, this);
         }
-        this.keyboardModule = new KeyboardEvents(this.inputWrapper, {
+        this.treeKeyboardModule = new KeyboardEvents(this.inputWrapper, {
             keyAction: this.keyActionHandler.bind(this),
             keyConfigs: this.keyConfigs,
             eventName: 'keydown'
@@ -8609,7 +8633,7 @@ let DropDownTree = class DropDownTree extends Component {
         });
     }
     wireCheckAllWrapperEvents() {
-        this.keyboardModule = new KeyboardEvents(this.checkAllParent, {
+        this.checkAllKeyboardModule = new KeyboardEvents(this.checkAllParent, {
             keyAction: this.checkAllAction.bind(this),
             keyConfigs: this.keyConfigs,
             eventName: 'keydown'
@@ -8626,12 +8650,20 @@ let DropDownTree = class DropDownTree extends Component {
         EventHandler.remove(this.inputWrapper, 'mousemove', this.mouseIn);
         EventHandler.remove(this.inputWrapper, 'mouseout', this.onMouseLeave);
         EventHandler.remove(this.overAllClear, 'mousedown', this.clearAll);
-        EventHandler.remove(window, 'resize', this.windowResizeContext);
+        EventHandler.remove(window, 'resize', this.windowResizeHandler);
         const formElement = closest(this.inputWrapper, 'form');
         if (formElement) {
             EventHandler.remove(formElement, 'reset', this.resetValueHandler);
         }
-        this.keyboardModule.destroy();
+        if (this.keyboardModule) {
+            this.keyboardModule.destroy();
+        }
+        if (this.treeKeyboardModule) {
+            this.treeKeyboardModule.destroy();
+        }
+        if (this.checkAllKeyboardModule) {
+            this.checkAllKeyboardModule.destroy();
+        }
         if (this.showSelectAll && this.checkAllParent) {
             EventHandler.remove(this.checkAllParent, 'mouseup', this.clickHandler);
         }
@@ -11267,9 +11299,22 @@ let DropDownTree = class DropDownTree extends Component {
         this.overFlowWrapper = null;
         this.keyboardModule = null;
         super.destroy();
+        this.treeKeyboardModule = null;
+        this.checkAllKeyboardModule = null;
+        this.selectedData = [];
+        this.treeData = null;
+        this.treeItems = [];
+        this.valueTemplateContainer = null;
+        this.filterContainer = null;
+        this.windowResizeHandler = null;
+        this.documentClickHandler = null;
         this.setProperties({ value: [] }, true);
     }
     destroyFilter() {
+        if (this.filterTimer) {
+            window.clearTimeout(this.filterTimer);
+            this.filterTimer = null;
+        }
         if (this.filterObj) {
             this.filterObj.destroy();
             detach(this.filterObj.element);
@@ -11991,7 +12036,7 @@ let ComboBox = class ComboBox extends DropDownList {
             return false;
         }
         else {
-            return super.setValue(e);
+            return super.setValue(e, this.autofill);
         }
     }
     checkCustomValue() {
@@ -13843,49 +13888,154 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     getForQuery(valuecheck, isCheckbox) {
         let predicate;
         const field = this.isPrimitiveData ? '' : this.fields.value;
-        if (this.enableVirtualization && valuecheck) {
-            if (isCheckbox) {
-                const startindex = this.viewPortInfo.startIndex;
-                const endindex = (((startindex + this.viewPortInfo.endIndex) <= (valuecheck.length)) &&
-                    valuecheck[(startindex + this.viewPortInfo.endIndex)]) &&
-                    (this.dataSource instanceof DataManager && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2))
-                    ? (startindex + this.viewPortInfo.endIndex)
-                    : (valuecheck.length);
-                for (let i = startindex; i < endindex; i++) {
-                    const value = this.allowObjectBinding ? getValue((this.fields.value) ?
-                        this.fields.value : '', valuecheck[i]) : valuecheck[i];
-                    if (i === startindex) {
-                        predicate = new Predicate(field, 'equal', (value));
+        if (valuecheck && valuecheck.length >= 3000) {
+            // Batch size to prevent stack overflow with large preselected values (EJ2-Fix-MaxCallStack)
+            const BATCH_SIZE = 100;
+            if (this.enableVirtualization) {
+                if (isCheckbox) {
+                    const startindex = this.viewPortInfo.startIndex;
+                    const endindex = (((startindex + this.viewPortInfo.endIndex) <= (valuecheck.length)) &&
+                        valuecheck[(startindex + this.viewPortInfo.endIndex)]) &&
+                        (this.dataSource instanceof DataManager && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2))
+                        ? (startindex + this.viewPortInfo.endIndex)
+                        : (valuecheck.length);
+                    // Build predicates in batches to prevent stack overflow
+                    const predicateBatches = [];
+                    for (let batchStart = startindex; batchStart < endindex; batchStart += BATCH_SIZE) {
+                        let batchPredicate;
+                        const batchEnd = Math.min(batchStart + BATCH_SIZE, endindex);
+                        for (let i = batchStart; i < batchEnd; i++) {
+                            const itemAtIndex = valuecheck[i];
+                            const value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                                this.fields.value : '', itemAtIndex) : itemAtIndex;
+                            if (i === batchStart) {
+                                batchPredicate = new Predicate(field, 'equal', (value));
+                            }
+                            else {
+                                batchPredicate = batchPredicate.or(field, 'equal', (value));
+                            }
+                        }
+                        predicateBatches.push(batchPredicate);
                     }
-                    else {
-                        predicate = predicate.or(field, 'equal', (value));
+                    // Combine all batch predicates
+                    predicate = predicateBatches[0];
+                    for (let i = 1; i < predicateBatches.length; i++) {
+                        predicate = predicate.or(predicateBatches[i]);
+                    }
+                    return new Query().where(predicate);
+                }
+                else {
+                    // Build predicates in batches to prevent stack overflow
+                    const predicateBatches = [];
+                    const isAddNonPresentItems = this.isaddNonPresentItems;
+                    for (let batchStart = 0; batchStart < valuecheck.length; batchStart += BATCH_SIZE) {
+                        let batchPredicate;
+                        const batchEnd = Math.min(batchStart + BATCH_SIZE, valuecheck.length);
+                        for (let i = batchStart; i < batchEnd; i++) {
+                            const itemAtIndex = valuecheck[i];
+                            const value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                                this.fields.value : '', itemAtIndex) : itemAtIndex;
+                            if (i === batchStart) {
+                                if (isAddNonPresentItems) {
+                                    batchPredicate = new Predicate(field, 'equal', itemAtIndex);
+                                }
+                                else {
+                                    batchPredicate = new Predicate(field, 'notequal', (value));
+                                }
+                            }
+                            else {
+                                if (isAddNonPresentItems) {
+                                    batchPredicate = batchPredicate.or(field, 'equal', itemAtIndex);
+                                }
+                                else {
+                                    batchPredicate = batchPredicate.and(field, 'notequal', (value));
+                                }
+                            }
+                        }
+                        predicateBatches.push(batchPredicate);
+                    }
+                    // Combine batch predicates
+                    predicate = predicateBatches[0];
+                    for (let i = 1; i < predicateBatches.length; i++) {
+                        if (isAddNonPresentItems) {
+                            predicate = predicate.or(predicateBatches[i]);
+                        }
+                        else {
+                            predicate = predicate.and(predicateBatches[i]);
+                        }
                     }
+                    return new Query().where(predicate);
                 }
-                return new Query().where(predicate);
             }
             else {
-                for (let i = 0; i < valuecheck.length; i++) {
-                    const value = this.allowObjectBinding ? getValue((this.fields.value) ?
-                        this.fields.value : '', valuecheck[i]) : valuecheck[i];
-                    if (this.isaddNonPresentItems) {
-                        predicate = i === 0 ? new Predicate(field, 'equal', valuecheck[i])
-                            : predicate.or(field, 'equal', valuecheck[i]);
-                    }
-                    else {
-                        predicate = i === 0 ? predicate = new Predicate(field, 'notequal', (value))
-                            : predicate.and(field, 'notequal', (value));
+                // Build predicates in batches to prevent stack overflow with large preselected values
+                const predicateBatches = [];
+                for (let batchStart = 0; batchStart < valuecheck.length; batchStart += BATCH_SIZE) {
+                    let batchPredicate;
+                    const batchEnd = Math.min(batchStart + BATCH_SIZE, valuecheck.length);
+                    for (let i = batchStart; i < batchEnd; i++) {
+                        const itemAtIndex = valuecheck[i];
+                        if (i === batchStart) {
+                            batchPredicate = new Predicate(field, 'equal', itemAtIndex);
+                        }
+                        else {
+                            batchPredicate = batchPredicate.or(field, 'equal', itemAtIndex);
+                        }
                     }
+                    predicateBatches.push(batchPredicate);
+                }
+                // Combine all batch predicates
+                predicate = predicateBatches[0];
+                for (let i = 1; i < predicateBatches.length; i++) {
+                    predicate = predicate.or(predicateBatches[i]);
                 }
-                return new Query().where(predicate);
             }
         }
         else {
-            for (let i = 0; i < valuecheck.length; i++) {
-                if (i === 0) {
-                    predicate = new Predicate(field, 'equal', valuecheck[i]);
+            if (this.enableVirtualization && valuecheck) {
+                if (isCheckbox) {
+                    const startindex = this.viewPortInfo.startIndex;
+                    const endindex = (((startindex + this.viewPortInfo.endIndex) <= (valuecheck.length)) &&
+                        valuecheck[(startindex + this.viewPortInfo.endIndex)]) &&
+                        (this.dataSource instanceof DataManager && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2))
+                        ? (startindex + this.viewPortInfo.endIndex)
+                        : (valuecheck.length);
+                    for (let i = startindex; i < endindex; i++) {
+                        const value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                            this.fields.value : '', valuecheck[i]) : valuecheck[i];
+                        if (i === startindex) {
+                            predicate = new Predicate(field, 'equal', (value));
+                        }
+                        else {
+                            predicate = predicate.or(field, 'equal', (value));
+                        }
+                    }
+                    return new Query().where(predicate);
                 }
                 else {
-                    predicate = predicate.or(field, 'equal', valuecheck[i]);
+                    for (let i = 0; i < valuecheck.length; i++) {
+                        const value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                            this.fields.value : '', valuecheck[i]) : valuecheck[i];
+                        if (this.isaddNonPresentItems) {
+                            predicate = i === 0 ? new Predicate(field, 'equal', valuecheck[i])
+                                : predicate.or(field, 'equal', valuecheck[i]);
+                        }
+                        else {
+                            predicate = i === 0 ? predicate = new Predicate(field, 'notequal', (value))
+                                : predicate.and(field, 'notequal', (value));
+                        }
+                    }
+                    return new Query().where(predicate);
+                }
+            }
+            else {
+                for (let i = 0; i < valuecheck.length; i++) {
+                    if (i === 0) {
+                        predicate = new Predicate(field, 'equal', valuecheck[i]);
+                    }
+                    else {
+                        predicate = predicate.or(field, 'equal', valuecheck[i]);
+                    }
                 }
             }
         }
@@ -15115,7 +15265,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.isKeyBoardAction = false;
     }
     onKeyDown(e) {
-        if (this.readonly || !this.enabled && this.mode !== 'CheckBox') {
+        if (this.readonly || !this.enabled && this.mode !== 'CheckBox' || this.preventKeyboardInteraction) {
             return;
         }
         this.preventSetCurrentData = false;
@@ -16145,6 +16295,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             }
         }
     }
+    isFilteringWithRemoteData() {
+        return !isNullOrUndefined(this.mainData) && this.mainData.length > 0 && this.allowFiltering;
+    }
     removeChip(value, isClearAll) {
         if (this.chipCollectionWrapper) {
             if (!(this.enableVirtualization && isClearAll)) {
@@ -16968,15 +17121,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.search(e);
         }
     }
-    onWheelScroll(e) {
-        this.scrollEvent = e;
-    }
     pasteHandler(event) {
         setTimeout(() => {
             this.expandTextbox();
             this.search(event);
         });
     }
+    onWheelScroll(e) {
+        this.scrollEvent = e;
+    }
     performFiltering(e) {
         const eventArgs = {
             preventDefaultAction: false,
@@ -17340,6 +17493,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) :
                         this.value[index];
                     element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
+                    if (!element && !isNullOrUndefined(this.mainList) && this.isFilteringWithRemoteData()) {
+                        element = this.findListElement(this.mainList, 'li', 'data-value', value);
+                    }
                     let isCustomData = false;
                     if (this.enableVirtualization) {
                         text = null;
@@ -17386,6 +17542,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     }
                     else {
                         text = this.getTextByValue(value);
+                        if (text === value && this.isFilteringWithRemoteData()) {
+                            const savedListData = this.listData;
+                            this.listData = this.mainData;
+                            text = this.getTextByValue(value);
+                            this.listData = savedListData;
+                        }
                     }
                     if (((element && (element.getAttribute('aria-selected') !== 'true')) ||
                         (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&
@@ -18306,6 +18468,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     selectAllItem(state, event, list) {
         let li;
+        this.isSelectAllClicked = state;
         if (!isNullOrUndefined(this.list)) {
             li = this.list.querySelectorAll(state ?
                 'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)' :
@@ -18433,13 +18596,37 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     }
                     index++;
                 }
+                let contentEl = null;
+                let selectAllEl = null;
+                let inputEl = null;
                 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.preventKeyboardInteraction = true;
+                    if (this.popupObj && this.popupObj.element && this.filterParent) {
+                        contentEl = this.popupObj.element.querySelector('.e-content');
+                        selectAllEl = this.popupObj.element.querySelector('.e-selectall-parent');
+                        inputEl = this.filterParent.querySelector('.e-input');
+                        [contentEl, selectAllEl, this.filterParent].forEach((el) => {
+                            if (el) {
+                                el.style.opacity = '0.5';
+                            }
+                        });
+                        if (inputEl) {
+                            inputEl.setAttribute('readonly', 'true');
+                        }
                         this.filterParent.style.cursor = 'progress';
+                        [contentEl, selectAllEl].forEach((el) => {
+                            if (!el) {
+                                return;
+                            }
+                            el.style.pointerEvents = 'none';
+                            el.style.userSelect = 'none';
+                            el.style.touchAction = 'none';
+                            if (el === contentEl) {
+                                el.style.overflow = 'hidden';
+                            }
+                        });
                     }
                     setTimeout(() => {
                         const dataArray = this.virtualSelectAllData;
@@ -18468,6 +18655,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                                 requestAnimationFrame(processBatch);
                             }
                             else {
+                                this.preventKeyboardInteraction = false;
                                 this.updatedataValueItems(event);
                                 this.isSelectAllLoop = false;
                                 if (!this.changeOnBlur) {
@@ -18484,9 +18672,26 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                                 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 = ''));
+                                    [contentEl, selectAllEl, this.filterParent].forEach((el) => {
+                                        if (el) {
+                                            el.style.opacity = '';
+                                        }
+                                    });
+                                    if (contentEl) {
+                                        contentEl.style.pointerEvents = 'auto';
+                                        contentEl.style.userSelect = 'auto';
+                                        contentEl.style.touchAction = 'auto';
+                                        contentEl.style.overflow = 'auto';
+                                    }
+                                    if (selectAllEl) {
+                                        selectAllEl.style.pointerEvents = 'auto';
+                                        selectAllEl.style.userSelect = 'auto';
+                                        selectAllEl.style.touchAction = 'auto';
+                                    }
+                                    if (inputEl) {
+                                        inputEl.removeAttribute('readonly');
+                                    }
                                     this.filterParent.style.cursor = '';
-                                    this.filterParent.querySelector('.e-input').removeAttribute('readonly');
                                 }
                             }
                         };
@@ -18510,10 +18715,34 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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.preventKeyboardInteraction = true;
+                let contentEl = null;
+                let selectAllEl = null;
+                let inputEl = null;
+                if (this.popupObj && this.popupObj.element && this.filterParent) {
+                    contentEl = this.popupObj.element.querySelector('.e-content');
+                    selectAllEl = this.popupObj.element.querySelector('.e-selectall-parent');
+                    inputEl = this.filterParent.querySelector('.e-input');
+                    [contentEl, selectAllEl, this.filterParent].forEach((el) => {
+                        if (el) {
+                            el.style.opacity = '0.5';
+                        }
+                    });
+                    if (inputEl) {
+                        inputEl.setAttribute('readonly', 'true');
+                    }
                     this.filterParent.style.cursor = 'progress';
+                    [contentEl, selectAllEl].forEach((el) => {
+                        if (!el) {
+                            return;
+                        }
+                        el.style.pointerEvents = 'none';
+                        el.style.userSelect = 'none';
+                        el.style.touchAction = 'none';
+                        if (el === contentEl) {
+                            el.style.overflow = 'hidden';
+                        }
+                    });
                 }
                 const processBatch = () => {
                     const endIndex = Math.min(currentIndex + batchSize, dataArray.length);
@@ -18531,10 +18760,28 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     else {
                         // All batches completed
                         this.isProcessingVirtualSelectAll = false;
+                        this.preventKeyboardInteraction = 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');
+                            [contentEl, selectAllEl, this.filterParent].forEach((el) => {
+                                if (el) {
+                                    el.style.opacity = '';
+                                }
+                            });
+                            if (contentEl) {
+                                contentEl.style.pointerEvents = 'auto';
+                                contentEl.style.userSelect = 'auto';
+                                contentEl.style.touchAction = 'auto';
+                                contentEl.style.overflow = 'auto';
+                            }
+                            if (selectAllEl) {
+                                selectAllEl.style.pointerEvents = 'auto';
+                                selectAllEl.style.userSelect = 'auto';
+                                selectAllEl.style.touchAction = 'auto';
+                            }
+                            if (inputEl) {
+                                inputEl.removeAttribute('readonly');
+                            }
                             this.filterParent.style.cursor = '';
                         }
                         if (!this.isSelectAllClicked) {
@@ -18623,10 +18870,34 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                     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.preventKeyboardInteraction = true;
+                        let contentEl = null;
+                        let selectAllEl = null;
+                        let inputEl = null;
+                        if (this.popupObj && this.popupObj.element && this.filterParent) {
+                            contentEl = this.popupObj.element.querySelector('.e-content');
+                            selectAllEl = this.popupObj.element.querySelector('.e-selectall-parent');
+                            inputEl = this.filterParent.querySelector('.e-input');
+                            [contentEl, selectAllEl, this.filterParent].forEach((el) => {
+                                if (el) {
+                                    el.style.opacity = '0.5';
+                                }
+                            });
+                            if (inputEl) {
+                                inputEl.setAttribute('readonly', 'true');
+                            }
                             this.filterParent.style.cursor = 'progress';
+                            [contentEl, selectAllEl].forEach((el) => {
+                                if (!el) {
+                                    return;
+                                }
+                                el.style.pointerEvents = 'none';
+                                el.style.userSelect = 'none';
+                                el.style.touchAction = 'none';
+                                if (el === contentEl) {
+                                    el.style.overflow = 'hidden';
+                                }
+                            });
                         }
                         this.isProcessingVirtualSelectAll = !this.isSelectAllClicked;
                         let indexLocal = index; // preserve original index value
@@ -18653,9 +18924,27 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                                         }
                                     }
                                     hideSpinner(this.filterParent);
+                                    this.preventKeyboardInteraction = false;
                                     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');
+                                        [contentEl, selectAllEl, this.filterParent].forEach((el) => {
+                                            if (el) {
+                                                el.style.opacity = '';
+                                            }
+                                        });
+                                        if (contentEl) {
+                                            contentEl.style.pointerEvents = 'auto';
+                                            contentEl.style.userSelect = 'auto';
+                                            contentEl.style.touchAction = 'auto';
+                                            contentEl.style.overflow = 'auto';
+                                        }
+                                        if (selectAllEl) {
+                                            selectAllEl.style.pointerEvents = 'auto';
+                                            selectAllEl.style.userSelect = 'auto';
+                                            selectAllEl.style.touchAction = 'auto';
+                                        }
+                                        if (inputEl) {
+                                            inputEl.removeAttribute('readonly');
+                                        }
                                         this.filterParent.style.cursor = '';
                                     }
                                     return;
@@ -19527,6 +19816,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.chipCollectionWrapper = this.createElement('span', {
                 className: CHIP_WRAPPER$1
             });
+            this.chipCollectionWrapper.setAttribute('role', 'listbox');
+            this.chipCollectionWrapper.setAttribute('aria-label', 'multiselect');
             this.chipCollectionWrapper.style.display = 'none';
             if (this.mode === 'Default') {
                 this.chipCollectionWrapper.setAttribute('id', getUniqueID('chip_default'));
@@ -23806,10 +24097,8 @@ let Mention = class Mention extends DropDownBase {
         this.unBindCommonEvent();
     }
     bindCommonEvent() {
-        if (!Browser.isDevice) {
-            this.keydownHandler = this.keyDownHandler.bind(this);
-            this.inputElement.addEventListener('keydown', this.keydownHandler, !this.isRTE);
-        }
+        this.keydownHandler = this.keyDownHandler.bind(this);
+        this.inputElement.addEventListener('keydown', this.keydownHandler, !this.isRTE);
     }
     /**
      * Hides the spinner loader.
@@ -23997,7 +24286,7 @@ let Mention = class Mention extends DropDownBase {
         return !isNullOrUndefined(element);
     }
     unBindCommonEvent() {
-        if (!Browser.isDevice && this.keydownHandler) {
+        if (this.keydownHandler) {
             this.inputElement.removeEventListener('keydown', this.keydownHandler, !this.isRTE);
             this.keydownHandler = null;
         }
@@ -24013,10 +24302,8 @@ let Mention = class Mention extends DropDownBase {
             return;
         }
         this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
-        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) {
+        const isRteImage = document.activeElement.parentElement && document.activeElement.parentElement.querySelector('.e-rte-image') ? true : false;
+        if (document.activeElement !== this.inputElement && !isRteImage) {
             this.inputElement.focus();
         }
         if (this.isContentEditable(this.inputElement)) {
@@ -24137,7 +24424,6 @@ let Mention = class Mention extends DropDownBase {
                 this.initValue();
             }
             if (!this.isPopupOpen && e.keyCode !== 38 && e.keyCode !== 40 && this.queryString.length >= this.minLength) {
-                this.didPopupOpenByTypingInitialChar = true;
                 this.showPopup();
                 if (this.initRemoteRender && this.list.querySelectorAll('li').length === 0) {
                     this.showWaitingSpinner();
@@ -24393,8 +24679,6 @@ let Mention = class Mention extends DropDownBase {
         if (document.activeElement !== this.inputElement) {
             this.inputElement.focus();
         }
-        this.queryString = this.didPopupOpenByTypingInitialChar ? this.queryString : '';
-        this.didPopupOpenByTypingInitialChar = false;
         if (this.isContentEditable(this.inputElement)) {
             this.range = this.getCurrentRange();
         }