@syncfusion/ej2-dropdowns 29.1.41 → 29.2.5

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

@@ -497,6 +497,7 @@ class VirtualScroll {
                                 query = query.skip(this.parent.viewPortInfo.startIndex);
                             }
                             this.parent.setCurrentView = false;
+                            this.parent.isPreventScrollAction = true;
                             this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                             isResetListCalled = true;
                             break;
@@ -544,6 +545,7 @@ class VirtualScroll {
                 }
             }
             this.parent.renderItems(currentData, this.parent.fields, this.component === 'multiselect' && this.parent.mode === 'CheckBox');
+            this.parent.updateSelectionList();
         }
         if (this.component === 'multiselect') {
             this.parent.updatevirtualizationList();
@@ -555,7 +557,8 @@ class VirtualScroll {
                 (this.parent.totalItemCount <= this.parent.itemCount))) ? 0 : this.parent.skeletonCount;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0];
-        if (virtualTrackElement) {
+        const preventAction = this.component !== 'multiselect' || (this.component === 'multiselect' && ((!(this.parent.dataSource instanceof DataManager))) || (this.parent.dataSource instanceof DataManager && !isResetListCalled));
+        if (virtualTrackElement && preventAction) {
             virtualTrackElement.style = this.parent.GetVirtualTrackHeight();
         }
         else if (!virtualTrackElement && this.parent.skeletonCount > 0 && this.parent.popupWrapper) {
@@ -564,11 +567,13 @@ class VirtualScroll {
             });
             this.parent.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
         }
-        this.parent.UpdateSkeleton();
+        if (this.component !== 'multiselect' || (this.component === 'multiselect' && ((!(this.parent.dataSource instanceof DataManager))) || (this.parent.dataSource instanceof DataManager && (!isResetListCalled || this.parent.viewPortInfo.startIndex === 0)))) {
+            this.parent.UpdateSkeleton();
+        }
         this.parent.liCollections = this.parent.list.querySelectorAll('.e-list-item');
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const virtualContentElement = this.parent.list.getElementsByClassName('e-virtual-ddl-content')[0];
-        if (virtualContentElement) {
+        if (virtualContentElement && preventAction) {
             (virtualContentElement).style = this.parent.getTransformValues();
         }
         if (this.parent.fields.groupBy) {
@@ -911,6 +916,7 @@ let DropDownBase = class DropDownBase extends Component {
         this.isDynamicData = false;
         this.isPrimitiveData = false;
         this.isCustomFiltering = false;
+        this.debounceTimer = null;
         this.virtualListInfo = {
             currentPageNumber: null,
             direction: null,
@@ -1269,6 +1275,29 @@ let DropDownBase = class DropDownBase extends Component {
                     isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
                 }
             }
+            if (this.getModuleName() === 'multiselect') {
+                for (let i = 0; i < totalSkeletonCount && this.totalItemCount !== this.viewPortInfo.endIndex; i++) {
+                    const liElement = this.createElement('li', { className: `${dropDownBaseClasses.virtualList} e-virtual-list-end`, styles: 'overflow: inherit' });
+                    if (this.isVirtualizationEnabled && this.itemTemplate) {
+                        liElement.style.height = (this.listItemHeight - parseInt(window.getComputedStyle(this.getItems()[1]).marginBottom, 10)) + 'px';
+                    }
+                    const skeleton = new Skeleton({
+                        shape: 'Text',
+                        height: '10px',
+                        width: '95%',
+                        cssClass: 'e-skeleton-text-end'
+                    });
+                    skeleton.appendTo(this.createElement('div'));
+                    liElement.appendChild(skeleton.element);
+                    if (isContainSkeleton.firstChild) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        isContainSkeleton.firstChild.appendChild(liElement);
+                    }
+                }
+                if (this.totalItemCount === this.viewPortInfo.endIndex) {
+                    isContainSkeleton.querySelectorAll('.e-virtual-list-end').forEach((el) => el.remove());
+                }
+            }
         }
     }
     getLocaleName() {
@@ -1546,7 +1575,9 @@ let DropDownBase = class DropDownBase extends Component {
                                         this.preventPopupOpen = false;
                                         return;
                                     }
+                                    let isSetCurrentcall = false;
                                     if (this.isVirtualizationEnabled && this.setCurrentView) {
+                                        isSetCurrentcall = true;
                                         this.notify('setCurrentViewDataAsync', {
                                             module: 'VirtualScroll'
                                         });
@@ -1554,7 +1585,8 @@ let DropDownBase = class DropDownBase extends Component {
                                     if (this.keyboardEvent != null) {
                                         this.handleVirtualKeyboardActions(this.keyboardEvent, this.pageCount);
                                     }
-                                    if (this.isVirtualizationEnabled) {
+                                    const preventSkeleton = this.getModuleName() !== 'multiselect' || (this.getModuleName() === 'multiselect' && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && !isSetCurrentcall)));
+                                    if (this.isVirtualizationEnabled && preventSkeleton) {
                                         this.getFilteringSkeletonCount();
                                         this.updatePopupPosition();
                                     }
@@ -1784,6 +1816,13 @@ let DropDownBase = class DropDownBase extends Component {
                 }
             }
         }
+        if (this.getModuleName() === 'multiselect' && this.isAngular && this.ngEle) {
+            const popupHolder = this.list;
+            if (popupHolder) {
+                const prevHeight = popupHolder.offsetHeight + 'px';
+                popupHolder.style.height = prevHeight;
+            }
+        }
         if (!isNullOrUndefined(this.list)) {
             if (!this.isVirtualizationEnabled) {
                 this.list.innerHTML = '';
@@ -1793,15 +1832,26 @@ let DropDownBase = class DropDownBase extends Component {
                 this.postRender(this.list, list, this.bindEvent);
             }
         }
+        if (this.getModuleName() === 'multiselect' && this.isAngular && this.ngEle) {
+            const popupHolder = this.list;
+            if (popupHolder) {
+                setTimeout(() => {
+                    popupHolder.style.height = '';
+                    this.refreshPopup();
+                }, 0);
+            }
+        }
     }
     /* eslint-disable @typescript-eslint/no-unused-vars */
     postRender(listElement, list, bindEvent) {
         if (this.fields.disabled) {
             const liCollections = listElement.querySelectorAll('.' + dropDownBaseClasses.li);
+            const data = this.sortOrder !== 'None' ? !isNullOrUndefined(this.fields.groupBy) ?
+                this.sortedData.filter((item) => !('isHeader' in item) || item.isHeader !== true) : this.sortedData : this.listData;
             for (let index = 0; index < liCollections.length; index++) {
-                if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.disabled]) {
+                if (JSON.parse(JSON.stringify(data[index]))[this.fields.disabled]) {
                     if (!isNullOrUndefined(this.fields.groupBy)) {
-                        const item = this.listData[index];
+                        const item = data[index];
                         const value = getValue((this.fields.value ? this.fields.value : 'value'), item);
                         const li = listElement.querySelector('li[data-value="' + value + '"]');
                         if (!isNullOrUndefined(li)) {
@@ -1843,6 +1893,17 @@ let DropDownBase = class DropDownBase extends Component {
     getQuery(query) {
         return query ? query : this.query ? this.query : new Query();
     }
+    performFiltering(e) {
+        // this is for component wise
+    }
+    debouncedFiltering(e, debounceDelay) {
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+        }
+        this.debounceTimer = setTimeout(() => {
+            this.performFiltering(e);
+        }, debounceDelay);
+    }
     updateVirtualizationProperties(itemCount, filtering, isCheckbox) {
         this.isVirtualizationEnabled = true;
         this.virtualizedItemsCount = itemCount;
@@ -2016,9 +2077,10 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {object[]} listData - Specifies the list of array of data.
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @param {boolean} isCheckBoxUpdate - Specifies whether the list item is updated with checkbox.
+     * @param {boolean} isClearAll - Specifies whether the current action is clearAll.
      * @returns {HTMLElement} Return the list items.
      */
-    renderItems(listData, fields, isCheckBoxUpdate) {
+    renderItems(listData, fields, isCheckBoxUpdate, isClearAll) {
         let ulElement;
         if (this.itemTemplate && listData) {
             if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {
@@ -2072,7 +2134,7 @@ let DropDownBase = class DropDownBase extends Component {
             }
         }
         else {
-            if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {
+            if (this.getModuleName() === 'multiselect' && (this.virtualSelectAll && !isClearAll)) {
                 this.virtualSelectAllData = listData;
                 listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);
             }
@@ -2091,11 +2153,13 @@ let DropDownBase = class DropDownBase extends Component {
                     oldUlElement = this.list.querySelector('.e-list-parent' + '.e-reorder');
                 }
                 if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && (this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect')) || isRemovedUlelement) {
-                    if (!this.appendUncheckList) {
-                        virtualUlElement.replaceChild(ulElement, oldUlElement);
-                    }
-                    else {
-                        virtualUlElement.appendChild(ulElement);
+                    if (this.getModuleName() !== 'multiselect' || (this.getModuleName() === 'multiselect' && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && !this.setCurrentView)))) {
+                        if (!this.appendUncheckList) {
+                            virtualUlElement.replaceChild(ulElement, oldUlElement);
+                        }
+                        else {
+                            virtualUlElement.appendChild(ulElement);
+                        }
                     }
                     this.updateListElements(listData);
                 }
@@ -4240,7 +4304,8 @@ let DropDownList = class DropDownList extends DropDownBase {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             const proxy = this;
             // eslint-disable-next-line max-len
-            const duration = (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;
+            const duration = ((this.dataSource instanceof DataManager) && this.groupTemplate) ? 700 :
+                (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;
             if (!this.isSecondClick) {
                 setTimeout(() => {
                     proxy.cloneElements();
@@ -4838,6 +4903,29 @@ let DropDownList = class DropDownList extends DropDownBase {
         const input = this.inputElement;
         return { start: Math.abs(input.selectionStart), end: Math.abs(input.selectionEnd) };
     }
+    performFiltering(e) {
+        this.checkAndResetCache();
+        this.isRequesting = false;
+        const eventArgs = {
+            preventDefaultAction: false,
+            text: this.filterInput.value,
+            updateData: (dataSource, query, fields) => {
+                if (eventArgs.cancel) {
+                    return;
+                }
+                this.isCustomFilter = true;
+                this.customFilterQuery = query ? query.clone() : query;
+                this.filteringAction(dataSource, query, fields);
+            },
+            baseEventArgs: e,
+            cancel: false
+        };
+        this.trigger('filtering', eventArgs, (eventArgs) => {
+            if (!eventArgs.cancel && !this.isCustomFilter && !eventArgs.preventDefaultAction) {
+                this.filteringAction(this.dataSource, null, this.fields);
+            }
+        });
+    }
     searchLists(e) {
         this.isTyped = true;
         this.activeIndex = null;
@@ -4848,27 +4936,12 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         this.isDataFetched = false;
         if (this.isFiltering()) {
-            this.checkAndResetCache();
-            this.isRequesting = false;
-            const eventArgs = {
-                preventDefaultAction: false,
-                text: this.filterInput.value,
-                updateData: (dataSource, query, fields) => {
-                    if (eventArgs.cancel) {
-                        return;
-                    }
-                    this.isCustomFilter = true;
-                    this.customFilterQuery = query ? query.clone() : query;
-                    this.filteringAction(dataSource, query, fields);
-                },
-                baseEventArgs: e,
-                cancel: false
-            };
-            this.trigger('filtering', eventArgs, (eventArgs) => {
-                if (!eventArgs.cancel && !this.isCustomFilter && !eventArgs.preventDefaultAction) {
-                    this.filteringAction(this.dataSource, null, this.fields);
-                }
-            });
+            if (this.typedString !== '' && this.debounceDelay > 0) {
+                this.debouncedFiltering(e, this.debounceDelay);
+            }
+            else {
+                this.performFiltering(e);
+            }
         }
     }
     /**
@@ -5132,7 +5205,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                         this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', value)))
                             .then((e) => {
                             if (e.result.length > 0) {
-                                this.addItem(e.result, list.length);
+                                if (!this.enableVirtualization) {
+                                    this.addItem(e.result, list.length);
+                                }
                                 this.updateValues();
                             }
                             else {
@@ -6808,6 +6883,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (!this.enabled) {
             return;
         }
+        if (this.getModuleName() === 'dropdownlist' && this.beforePopupOpen && !this.isPopupOpen) {
+            this.beforePopupOpen = false;
+        }
         this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         if (this.isReact && this.getModuleName() === 'combobox' && this.itemTemplate && this.isCustomFilter && this.isAddNewItemTemplate) {
             this.renderList();
@@ -7076,6 +7154,7 @@ let DropDownList = class DropDownList extends DropDownBase {
             this.inputElement.classList.remove('e-input');
             Input.setValue('', this.inputElement, this.floatLabelType, this.showClearButton);
         }
+        this.element.removeAttribute('tabindex');
         this.element.style.display = 'block';
         if (this.inputWrapper.container && this.inputWrapper.container.parentElement) {
             if (this.inputWrapper.container.parentElement.tagName === this.getNgDirective()) {
@@ -7196,6 +7275,9 @@ __decorate$1([
 __decorate$1([
     Property(false)
 ], DropDownList.prototype, "allowFiltering", void 0);
+__decorate$1([
+    Property(300)
+], DropDownList.prototype, "debounceDelay", void 0);
 __decorate$1([
     Property(true)
 ], DropDownList.prototype, "isDeviceFullScreen", void 0);
@@ -7864,6 +7946,9 @@ let DropDownTree = class DropDownTree extends Component {
     }
     /* To wire events for the dropdown tree */
     wireEvents() {
+        if (Browser.isIos) {
+            EventHandler.add(this.inputWrapper, 'touchstart', this.handleIosTouch, this);
+        }
         EventHandler.add(this.inputWrapper, 'mouseup', this.dropDownClick, this);
         EventHandler.add(this.inputWrapper, 'focus', this.focusIn, this);
         EventHandler.add(this.inputWrapper, 'blur', this.focusOut, this);
@@ -7897,6 +7982,9 @@ let DropDownTree = class DropDownTree extends Component {
     }
     /* To unwire events for the dropdown tree */
     unWireEvents() {
+        if (Browser.isIos) {
+            EventHandler.remove(this.inputWrapper, 'touchstart', this.handleIosTouch);
+        }
         EventHandler.remove(this.inputWrapper, 'mouseup', this.dropDownClick);
         EventHandler.remove(this.inputWrapper, 'focus', this.focusIn);
         EventHandler.remove(this.inputWrapper, 'blur', this.focusOut);
@@ -7914,6 +8002,11 @@ let DropDownTree = class DropDownTree extends Component {
         }
         document.removeEventListener('mousedown', this.documentClickContext);
     }
+    /* Handles touch events specifically for iOS devices */
+    handleIosTouch(e) {
+        e.preventDefault();
+        this.dropDownClick(e);
+    }
     /* Trigger when the dropdown is clicked */
     dropDownClick(e) {
         if (!this.enabled || this.readonly) {
@@ -8827,7 +8920,8 @@ let DropDownTree = class DropDownTree extends Component {
             loadOnDemand: this.treeSettings.loadOnDemand,
             nodeSelecting: this.onBeforeSelect.bind(this),
             nodeTemplate: this.itemTemplate,
-            checkDisabledChildren: this.treeSettings.checkDisabledChildren
+            checkDisabledChildren: this.treeSettings.checkDisabledChildren,
+            checkOnClick: true
         });
         this.treeObj.root = this.root ? this.root : this;
         this.treeObj.appendTo(this.tree);
@@ -8905,7 +8999,7 @@ let DropDownTree = class DropDownTree extends Component {
                 this.popupObj.refreshPosition();
                 if (!(this.showSelectAll || this.allowFiltering) && (!this.popupDiv.classList.contains(NODATA)
                     && this.treeItems.length > 0)) {
-                    let focusedElement = this.value != null && this.text != null ? this.treeObj.element.querySelector('[data-uid="' + this.value[0] + '"]') : null;
+                    let focusedElement = this.value != null && this.text != null ? this.treeObj.element.querySelector('[data-uid="' + this.value[this.value.length - 1] + '"]') : null;
                     if (focusedElement) {
                         this.treeObj.element.querySelector('li').setAttribute('tabindex', '-1');
                         focusedElement.setAttribute('tabindex', '0');
@@ -9351,15 +9445,6 @@ let DropDownTree = class DropDownTree extends Component {
         }
         const target = args.event.target;
         if ((target.classList.contains('e-fullrow') || target.classList.contains('e-list-text')) && this.showCheckBox) {
-            this.isClicked = true;
-            const getNodeDetails = this.treeObj.getNode(args.node);
-            if (getNodeDetails.isChecked === 'true') {
-                this.treeObj.uncheckAll([args.node]);
-            }
-            else {
-                this.treeObj.checkAll([args.node]);
-            }
-            this.isClicked = false;
             this.setMultiSelect();
             this.ensurePlaceHolder();
         }
@@ -10946,19 +11031,22 @@ let ComboBox = class ComboBox extends DropDownList {
                 const fields = (this.fields.value) ? this.fields.value : '';
                 const currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
                 if (this.dataSource instanceof DataManager) {
-                    const getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
-                    if (getItem && getItem.length > 0) {
-                        this.itemData = getItem[0];
-                        doesItemExist = true;
-                        const dataItem = this.getItemData();
-                        const value = this.allowObjectBinding
-                            ? this.getDataByValue(dataItem.value)
-                            : dataItem.value;
-                        if ((this.value === dataItem.value && this.text !== dataItem.text)
-                            || (this.value !== dataItem.value && this.text === dataItem.text)) {
-                            this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });
+                    this.dataSource.executeQuery(new Query().where(new Predicate(fields, 'equal', currentValue)))
+                        .then((e) => {
+                        if (e.result.length > 0) {
+                            this.itemData = e.result[0];
+                            const dataItem = this.getItemData();
+                            const value = this.allowObjectBinding ?
+                                this.getDataByValue(dataItem.value) : dataItem.value;
+                            if ((this.value === dataItem.value && this.text !== dataItem.text) ||
+                                (this.value !== dataItem.value && this.text === dataItem.text)) {
+                                this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });
+                            }
                         }
-                    }
+                        else {
+                            this.valueMuteChange(null);
+                        }
+                    });
                 }
                 else {
                     const getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
@@ -10986,7 +11074,8 @@ let ComboBox = class ComboBox extends DropDownList {
                 (this.allowCustom && this.enableVirtualization && !doesItemExist)) {
                 this.valueMuteChange(this.value);
             }
-            else if (!this.enableVirtualization || (this.enableVirtualization && !doesItemExist)) {
+            else if (!this.enableVirtualization || (this.enableVirtualization && !(this.dataSource instanceof DataManager)
+                && !doesItemExist)) {
                 this.valueMuteChange(null);
             }
         }
@@ -11149,7 +11238,10 @@ let ComboBox = class ComboBox extends DropDownList {
                 }
             }
             const activeElement = activeItem.item;
-            if (!isNullOrUndefined(activeElement)) {
+            const dataItem = this.getItemData();
+            if ((!isNullOrUndefined(activeElement) && !this.enableVirtualization) || (this.enableVirtualization &&
+                this.isTyped && isNullOrUndefined(dataItem) && isNullOrUndefined(dataItem.value) &&
+                dataItem.value.toString() === activeElement.getAttribute('data-value').toString())) {
                 const count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
                 const height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);
                 if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {
@@ -11771,9 +11863,6 @@ __decorate$3([
 __decorate$3([
     Property(true)
 ], ComboBox.prototype, "showClearButton", void 0);
-__decorate$3([
-    Property(false)
-], ComboBox.prototype, "enableRtl", void 0);
 __decorate$3([
     Event()
 ], ComboBox.prototype, "customValueSpecifier", void 0);
@@ -11981,6 +12070,14 @@ let AutoComplete = class AutoComplete extends ComboBox {
         this.isSelected = false;
         this.activeIndex = null;
         this.isRequesting = false;
+        if (this.queryString !== '' && this.debounceDelay > 0) {
+            this.debouncedFiltering(e, this.debounceDelay);
+        }
+        else {
+            this.performFiltering(e);
+        }
+    }
+    performFiltering(e) {
         const eventArgs = {
             preventDefaultAction: false,
             text: this.filterInput.value,
@@ -13111,7 +13208,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             valuecheck = this.presentItemValue(this.ulElement);
         }
         if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
-            && this.listData != null) {
+            && this.listData != null && !(valuecheck.length === 1 && valuecheck[0] == null)) {
             this.isaddNonPresentItems = true;
             this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
             this.isaddNonPresentItems = false;
@@ -13730,13 +13827,18 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.checkAndScrollParent();
     }
     checkAndScrollParent() {
-        const parentElement = this.overAllWrapper ? this.overAllWrapper.parentElement : null;
-        if (parentElement) {
-            const wrapperHeight = parseFloat(getComputedStyle(this.overAllWrapper).height);
-            const parentMaxHeight = parseFloat(getComputedStyle(parentElement).maxHeight);
-            if (!isNaN(parentMaxHeight) && wrapperHeight > parentMaxHeight) {
-                parentElement.scrollTop = parentElement.scrollHeight;
+        let scrollElement = this.overAllWrapper ? this.overAllWrapper.parentElement : null;
+        while (scrollElement) {
+            const scrollElementStyle = getComputedStyle(scrollElement);
+            const scrollElmentHeight = parseFloat(scrollElementStyle.maxHeight) || parseFloat(scrollElementStyle.height);
+            if (!isNaN(scrollElmentHeight)) {
+                const overflowY = scrollElementStyle.overflowY;
+                if (overflowY === 'auto' || overflowY === 'scroll') {
+                    scrollElement.scrollTop = scrollElement.scrollHeight;
+                    return;
+                }
             }
+            scrollElement = scrollElement.parentElement;
         }
     }
     enable(state) {
@@ -13986,7 +14088,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     pageDownSelection(steps, isVirtualKeyAction) {
         const list = this.getItems();
         const collection = this.list.querySelectorAll('li.'
-            + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
+            + dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list-end)');
         let previousItem = steps <= collection.length ? collection[steps - 1] : collection[collection.length - 1];
         if (this.fields.disabled && previousItem && !this.enableVirtualization) {
             while (previousItem && (previousItem.classList.contains('e-disabled') || previousItem.classList.contains(HIDE_LIST) ||
@@ -14003,6 +14105,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.enableVirtualization && isVirtualKeyAction) {
             previousItem = steps <= list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
         }
+        if (this.enableVirtualization && previousItem && previousItem.classList.contains('e-virtual-list-end')) {
+            previousItem = collection[collection.length - 1];
+        }
         this.isKeyBoardAction = true;
         this.addListFocus(previousItem);
         this.previousFocusItem = previousItem;
@@ -14483,9 +14588,10 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         const selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?
             parseInt(window.getComputedStyle(selectedLI).marginBottom, 10) : 0;
         this.isUpwardScrolling = false;
-        const virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
-        const lastElementValue = this.list.querySelector('li:last-of-type') ?
-            this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;
+        const virtualListCount = this.list.querySelectorAll('.e-virtual-list:not(.e-virtual-list-end)').length;
+        const liItems = this.list.querySelectorAll('li:not(.e-virtual-list-end)');
+        const lastElementValue = liItems && liItems.length > 0 && liItems[liItems.length - 1] ?
+            liItems[liItems.length - 1].getAttribute('data-value') : null;
         const selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
             selectedLI.offsetTop + (this.virtualListInfo.startIndex * (selectedLI.offsetHeight + selectedListMargin))
             : selectedLI.offsetTop;
@@ -14538,7 +14644,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         this.isKeyBoardAction = isScrollerCHanged;
     }
     scrollTop(selectedLI, activeIndex, keyCode = null) {
-        const virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        const virtualListCount = this.list.querySelectorAll('.e-virtual-list:not(.e-virtual-list-end)').length;
         const selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?
             parseInt(window.getComputedStyle(selectedLI).marginBottom, 10) : 0;
         const selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ?
@@ -14767,11 +14873,11 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         if (this.list) {
             let elements = this.list.querySelectorAll('li.'
                 + dropDownBaseClasses.li
-                + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
+                + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list-end)');
             if (this.mode === 'CheckBox' && this.enableGroupCheckBox && !isNullOrUndefined(this.fields.groupBy)) {
                 elements = this.list.querySelectorAll('li.'
                     + dropDownBaseClasses.li + ',li.' + dropDownBaseClasses.group
-                    + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)');
+                    + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list-end)');
             }
             let selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);
             if (this.enableVirtualization && isVirtualKeyAction && !isNullOrUndefined(this.currentFocuedListElement)) {
@@ -15461,7 +15567,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             const inputWidth = (this.componentWrapper.offsetWidth) * parseFloat(width) / 100;
             width = inputWidth.toString() + 'px';
         }
-        return width;
+        return (this.allowResize && this.resizeWidth) ? this.resizeWidth + 'px' : width;
     }
     mouseIn() {
         if (this.enabled && !this.readonly) {
@@ -15735,7 +15841,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     updateInitialData() {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const currentData = this.selectData;
-        const ulElement = this.renderItems(currentData, this.fields);
+        const ulElement = this.renderItems(currentData, this.fields, false, this.isClearAllAction);
         this.list.scrollTop = 0;
         this.virtualListInfo = {
             currentPageNumber: null,
@@ -15955,6 +16061,38 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.search(event);
         });
     }
+    performFiltering(e) {
+        const eventArgs = {
+            preventDefaultAction: false,
+            text: this.targetElement(),
+            updateData: (dataSource, query, fields) => {
+                if (eventArgs.cancel) {
+                    return;
+                }
+                this.isFiltered = true;
+                this.customFilterQuery = query;
+                this.remoteFilterAction = true;
+                this.isCustomFiltering = true;
+                this.dataUpdater(dataSource, query, fields);
+            },
+            event: e,
+            cancel: false
+        };
+        this.trigger('filtering', eventArgs, (eventArgs) => {
+            this.isFilterPrevented = eventArgs.cancel;
+            if (!eventArgs.cancel) {
+                if (!this.isFiltered && !eventArgs.preventDefaultAction) {
+                    this.filterAction = true;
+                    this.isFilteringAction = true;
+                    if (this.dataSource instanceof DataManager && this.allowCustomValue) {
+                        this.isCustomRendered = false;
+                    }
+                    this.dataUpdater(this.dataSource, null, this.fields);
+                    this.isFilteringAction = false;
+                }
+            }
+        });
+    }
     search(e) {
         this.preventSetCurrentData = false;
         this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
@@ -15976,36 +16114,12 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 }
                 this.checkAndResetCache();
                 this.isRequesting = false;
-                const eventArgs = {
-                    preventDefaultAction: false,
-                    text: this.targetElement(),
-                    updateData: (dataSource, query, fields) => {
-                        if (eventArgs.cancel) {
-                            return;
-                        }
-                        this.isFiltered = true;
-                        this.customFilterQuery = query;
-                        this.remoteFilterAction = true;
-                        this.isCustomFiltering = true;
-                        this.dataUpdater(dataSource, query, fields);
-                    },
-                    event: e,
-                    cancel: false
-                };
-                this.trigger('filtering', eventArgs, (eventArgs) => {
-                    this.isFilterPrevented = eventArgs.cancel;
-                    if (!eventArgs.cancel) {
-                        if (!this.isFiltered && !eventArgs.preventDefaultAction) {
-                            this.filterAction = true;
-                            this.isFilteringAction = true;
-                            if (this.dataSource instanceof DataManager && this.allowCustomValue) {
-                                this.isCustomRendered = false;
-                            }
-                            this.dataUpdater(this.dataSource, null, this.fields);
-                            this.isFilteringAction = false;
-                        }
-                    }
-                });
+                if (this.targetElement() !== '' && this.debounceDelay > 0) {
+                    this.debouncedFiltering(e, this.debounceDelay);
+                }
+                else {
+                    this.performFiltering(e);
+                }
             }
             else if (this.allowCustomValue) {
                 let query = new Query();
@@ -17109,7 +17223,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     checkClearIconWidth() {
         if (this.showClearButton) {
-            this.clearIconWidth = parseInt(window.getComputedStyle(this.overAllClear).width, 10);
+            this.clearIconWidth = parseInt(window.getComputedStyle(this.overAllClear).width, 10) || this.overAllClear.offsetWidth;
         }
     }
     updateRemainWidth(viewWrapper, totalWidth) {
@@ -18021,7 +18135,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                         this.list.parentElement.style.paddingBottom = '';
                         const overAllHeight = parseInt(this.popupHeight, 10);
                         this.list.style.maxHeight = formatUnit(overAllHeight);
-                        this.list.parentElement.style.height = formatUnit(this.popupHeight);
+                        if (this.popupHeight.toString().toLowerCase() !== 'auto' && this.initialPopupHeight >= (parseInt(this.popupHeight.toString(), 10) - 2)) {
+                            this.list.parentElement.style.height = formatUnit(this.popupHeight);
+                        }
                         this.list.parentElement.style.maxHeight = formatUnit(this.popupHeight);
                     }
                     if (this.resizer) {
@@ -18346,7 +18462,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         }
         if (this.list && this.list.parentElement) {
             this.list.parentElement.classList.add('e-resize');
-            if (this.popupHeight.toString().toLowerCase() !== 'auto') {
+            this.initialPopupHeight = this.list.parentElement.clientHeight;
+            if (this.popupHeight.toString().toLowerCase() !== 'auto' && this.initialPopupHeight >= (parseInt(this.popupHeight.toString(), 10) - 2)) {
                 this.list.parentElement.style.height = '100%';
             }
             this.list.parentElement.style.boxSizing = 'border-box'; // Ensures padding doesn't affect element size
@@ -18357,6 +18474,18 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.list.parentElement.style.height = this.resizeHeight + 'px';
             this.list.parentElement.style.maxHeight = this.resizeHeight + 'px';
             this.list.style.maxHeight = `${this.resizeHeight}px`;
+            if (this.headerTemplate) {
+                const headerElem = this.list.parentElement.querySelector('.e-ddl-header');
+                if (headerElem && headerElem.offsetHeight) {
+                    this.headerTemplateHeight = headerElem.offsetHeight;
+                }
+                if (this.resizeHeight) {
+                    this.list.style.maxHeight = `${this.resizeHeight - this.headerTemplateHeight - 16}px`;
+                }
+                else {
+                    this.list.style.maxHeight = `${parseInt(this.list.style.maxHeight, 10) - 16}px`;
+                }
+            }
         }
         if (this.resizer) {
             EventHandler.add(this.resizer, 'mousedown', this.startResizing, this);
@@ -18411,6 +18540,9 @@ let MultiSelect = class MultiSelect extends DropDownBase {
             this.list.parentElement.style.height = `${this.resizeHeight}px`;
             this.list.parentElement.style.maxHeight = `${this.resizeHeight}px`;
             this.list.style.maxHeight = `${this.resizeHeight}px`;
+            if (this.headerTemplate) {
+                this.list.style.maxHeight = `${this.resizeHeight - this.headerTemplateHeight - 16}px`;
+            }
             if (this.fixedHeaderElement && this.ulElement) {
                 this.fixedHeaderElement.style.width = `${this.ulElement.offsetWidth}px`;
             }
@@ -18909,6 +19041,9 @@ __decorate$5([
 __decorate$5([
     Property(null)
 ], MultiSelect.prototype, "allowFiltering", void 0);
+__decorate$5([
+    Property(300)
+], MultiSelect.prototype, "debounceDelay", void 0);
 __decorate$5([
     Property(true)
 ], MultiSelect.prototype, "isDeviceFullScreen", void 0);
@@ -22200,6 +22335,7 @@ let Mention = class Mention extends DropDownBase {
      */
     constructor(options, element) {
         super(options, element);
+        this.debounceTimer = null;
     }
     /**
      * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.
@@ -22633,21 +22769,7 @@ let Mention = class Mention extends DropDownBase {
         this.range = this.inputElement.ownerDocument.getSelection().getRangeAt(0);
         return this.range;
     }
-    searchLists(e) {
-        this.isDataFetched = false;
-        if (isNullOrUndefined(this.list)) {
-            super.render();
-            this.unWireListEvents();
-            this.wireListEvents();
-        }
-        if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
-            this.queryString = this.queryString === '' ? null : this.queryString;
-            this.beforePopupOpen = true;
-            this.resetList(this.dataSource, this.fields);
-            return;
-        }
-        this.isSelected = false;
-        this.activeIndex = null;
+    performFiltering(e) {
         const eventArgs = {
             preventDefaultAction: false,
             text: this.queryString,
@@ -22666,6 +22788,28 @@ let Mention = class Mention extends DropDownBase {
             }
         });
     }
+    searchLists(e) {
+        this.isDataFetched = false;
+        if (isNullOrUndefined(this.list)) {
+            super.render();
+            this.unWireListEvents();
+            this.wireListEvents();
+        }
+        if (e.type !== 'mousedown' && (e.keyCode === 40 || e.keyCode === 38)) {
+            this.queryString = this.queryString === '' ? null : this.queryString;
+            this.beforePopupOpen = true;
+            this.resetList(this.dataSource, this.fields);
+            return;
+        }
+        this.isSelected = false;
+        this.activeIndex = null;
+        if (this.queryString !== '' && this.debounceDelay > 0) {
+            this.debouncedFiltering(e, this.debounceDelay);
+        }
+        else {
+            this.performFiltering(e);
+        }
+    }
     filterAction(dataSource, query, fields) {
         this.beforePopupOpen = true;
         if (this.queryString.length >= this.minLength) {
@@ -23857,6 +24001,9 @@ __decorate$7([
 __decorate$7([
     Property('300px')
 ], Mention.prototype, "popupHeight", void 0);
+__decorate$7([
+    Property(300)
+], Mention.prototype, "debounceDelay", void 0);
 __decorate$7([
     Property(null)
 ], Mention.prototype, "displayTemplate", void 0);