@syncfusion/ej2-dropdowns 29.1.41 → 29.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.1.41
+*  version : 29.2.5
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@29.1.38",
+  "_id": "@syncfusion/ej2-dropdowns@29.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-gpwV4cYn4VY9b7JRqcRU0RSqHNaFKKf0+NpBSHbvOwtISLqIGyehQR7atEDT+1g0z0mdGZ7+l2WuaqyvuLNvDA==",
+  "_integrity": "sha512-2/LXQ3Z+oxZ7gXjg7Byi0b4jeKBHzYa8+17CwtLhfO2nX2RP61lASiEmN0zPvK4J4i8TrY2ZCNoJAALw0V7z/w==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -36,8 +36,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-29.1.38.tgz",
-  "_shasum": "db56179d8beddcc910e61558b906e2ce82c31ce6",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-29.2.4.tgz",
+  "_shasum": "4272fdd6205a2045e1a05b3f4045e5e6647853d0",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
   "author": {
@@ -45,13 +45,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~29.1.36",
-    "@syncfusion/ej2-data": "~29.1.33",
-    "@syncfusion/ej2-inputs": "~29.1.39",
-    "@syncfusion/ej2-lists": "~29.1.40",
-    "@syncfusion/ej2-navigations": "~29.1.41",
-    "@syncfusion/ej2-notifications": "~29.1.33",
-    "@syncfusion/ej2-popups": "~29.1.37"
+    "@syncfusion/ej2-base": "~29.2.4",
+    "@syncfusion/ej2-data": "~29.2.4",
+    "@syncfusion/ej2-inputs": "~29.2.5",
+    "@syncfusion/ej2-lists": "~29.2.4",
+    "@syncfusion/ej2-navigations": "~29.2.5",
+    "@syncfusion/ej2-notifications": "~29.2.4",
+    "@syncfusion/ej2-popups": "~29.2.4"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -76,7 +76,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "29.1.41",
+  "version": "29.2.5",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/auto-complete/auto-complete.d.ts

@@ -217,6 +217,7 @@ export declare class AutoComplete extends ComboBox {
     protected getNgDirective(): string;
     protected getQuery(query: Query): Query;
     protected searchLists(e: KeyboardEventArgs | MouseEvent): void;
+    protected performFiltering(e: KeyboardEventArgs | MouseEvent): void;
     /**
      * To filter the data from given data source by using query
      *

package/src/auto-complete/auto-complete.js

@@ -163,7 +163,6 @@ var AutoComplete = /** @class */ (function (_super) {
         return filterQuery;
     };
     AutoComplete.prototype.searchLists = function (e) {
-        var _this_1 = this;
         this.isTyped = true;
         this.isDataFetched = this.isSelectCustom = false;
         this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
@@ -181,6 +180,15 @@ var AutoComplete = /** @class */ (function (_super) {
         this.isSelected = false;
         this.activeIndex = null;
         this.isRequesting = false;
+        if (this.queryString !== '' && this.debounceDelay > 0) {
+            this.debouncedFiltering(e, this.debounceDelay);
+        }
+        else {
+            this.performFiltering(e);
+        }
+    };
+    AutoComplete.prototype.performFiltering = function (e) {
+        var _this_1 = this;
         var eventArgs = {
             preventDefaultAction: false,
             text: this.filterInput.value,

package/src/combo-box/combo-box-model.d.ts

@@ -1,4 +1,4 @@
-import { EventHandler, Property, Event, EmitType, addClass, Browser, KeyboardEventArgs, removeClass, detach } from '@syncfusion/ej2-base';import { isNullOrUndefined, NotifyPropertyChanges, getValue, setValue } from '@syncfusion/ej2-base';import { DropDownList, dropDownListClasses } from '../drop-down-list/drop-down-list';import { FilteringEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Search } from '../common/incremental-search';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { DataManager, DataOptions, Predicate, Query } from '@syncfusion/ej2-data';
+import { EventHandler, Property, Event, EmitType, addClass, Browser, KeyboardEventArgs, removeClass, detach } from '@syncfusion/ej2-base';import { isNullOrUndefined, NotifyPropertyChanges, getValue, setValue } from '@syncfusion/ej2-base';import { DropDownList, dropDownListClasses } from '../drop-down-list/drop-down-list';import { FilteringEventArgs, ResultData } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { Search } from '../common/incremental-search';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { DataManager, DataOptions, Predicate, Query } from '@syncfusion/ej2-data';
 import {CustomValueSpecifierEventArgs} from "./combo-box";
 import {DropDownListModel} from "../drop-down-list/drop-down-list-model";
 
@@ -86,14 +86,6 @@ export interface ComboBoxModel extends DropDownListModel{
      */
     showClearButton?: boolean;
 
-    /**
-     * Enable or disable rendering component in right to left direction.
-     *
-     * @default false
-
-     */
-    enableRtl?: boolean;
-
     /**
      * Triggers on set a
      * [`custom value`](../../combo-box/getting-started#custom-values) to this component.

package/src/combo-box/combo-box.d.ts

@@ -96,13 +96,6 @@ export declare class ComboBox extends DropDownList {
      * @default true
      */
     showClearButton: boolean;
-    /**
-     * Enable or disable rendering component in right to left direction.
-     *
-     * @default false
-
-     */
-    enableRtl: boolean;
     /**
      * Triggers on set a
      * [`custom value`](../../combo-box/getting-started#custom-values) to this component.

package/src/combo-box/combo-box.js

@@ -179,6 +179,7 @@ var ComboBox = /** @class */ (function (_super) {
         }
     };
     ComboBox.prototype.updateValues = function () {
+        var _this = this;
         if (this.fields.disabled) {
             if (this.value != null) {
                 this.value = !this.isDisableItemValue(this.value) ? this.value : null;
@@ -199,19 +200,22 @@ var ComboBox = /** @class */ (function (_super) {
                 var fields = (this.fields.value) ? this.fields.value : '';
                 var currentValue_1 = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
                 if (this.dataSource instanceof DataManager) {
-                    var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue_1)));
-                    if (getItem && getItem.length > 0) {
-                        this.itemData = getItem[0];
-                        doesItemExist = true;
-                        var dataItem = this.getItemData();
-                        var 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_1)))
+                        .then(function (e) {
+                        if (e.result.length > 0) {
+                            _this.itemData = e.result[0];
+                            var dataItem = _this.getItemData();
+                            var 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 {
                     var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue_1)));
@@ -239,7 +243,8 @@ var ComboBox = /** @class */ (function (_super) {
                 (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);
             }
         }
@@ -403,7 +408,10 @@ var ComboBox = /** @class */ (function (_super) {
                 }
             }
             var activeElement = activeItem.item;
-            if (!isNullOrUndefined(activeElement)) {
+            var dataItem_1 = this.getItemData();
+            if ((!isNullOrUndefined(activeElement) && !this.enableVirtualization) || (this.enableVirtualization &&
+                this.isTyped && isNullOrUndefined(dataItem_1) && isNullOrUndefined(dataItem_1.value) &&
+                dataItem_1.value.toString() === activeElement.getAttribute('data-value').toString())) {
                 var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
                 var height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);
                 if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {
@@ -1028,9 +1036,6 @@ var ComboBox = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], ComboBox.prototype, "showClearButton", void 0);
-    __decorate([
-        Property(false)
-    ], ComboBox.prototype, "enableRtl", void 0);
     __decorate([
         Event()
     ], ComboBox.prototype, "customValueSpecifier", void 0);

package/src/common/virtual-scroll.js

@@ -286,6 +286,7 @@ var VirtualScroll = /** @class */ (function () {
                                 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;
@@ -333,6 +334,7 @@ var VirtualScroll = /** @class */ (function () {
                 }
             }
             this.parent.renderItems(currentData, this.parent.fields, this.component === 'multiselect' && this.parent.mode === 'CheckBox');
+            this.parent.updateSelectionList();
         }
         if (this.component === 'multiselect') {
             this.parent.updatevirtualizationList();
@@ -344,7 +346,8 @@ var VirtualScroll = /** @class */ (function () {
                 (this.parent.totalItemCount <= this.parent.itemCount))) ? 0 : this.parent.skeletonCount;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var virtualTrackElement = this.parent.list.getElementsByClassName('e-virtual-ddl')[0];
-        if (virtualTrackElement) {
+        var 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) {
@@ -353,11 +356,13 @@ var VirtualScroll = /** @class */ (function () {
             });
             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
         var 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) {

package/src/drop-down-base/drop-down-base.d.ts

@@ -296,6 +296,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected isDynamicData: boolean;
     protected isPrimitiveData: boolean;
     protected isCustomFiltering: boolean;
+    protected debounceTimer: ReturnType<typeof setTimeout> | null;
     protected virtualListInfo: VirtualInfo;
     protected viewPortInfo: VirtualInfo;
     protected selectedValueInfo: VirtualInfo;
@@ -605,6 +606,8 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @returns {Query} Returns the query to do the data query operation.
      */
     protected getQuery(query: Query): Query;
+    protected performFiltering(e: KeyboardEventArgs | MouseEvent): void;
+    protected debouncedFiltering(e: KeyboardEventArgs | MouseEvent, debounceDelay: number): void;
     protected updateVirtualizationProperties(itemCount: number, filtering: boolean, isCheckbox?: boolean): void;
     /**
      * To render the template content for group header element.
@@ -638,11 +641,12 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @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.
      */
     protected renderItems(listData: {
         [key: string]: Object;
-    }[], fields: FieldSettingsModel, isCheckBoxUpdate?: boolean): HTMLElement;
+    }[], fields: FieldSettingsModel, isCheckBoxUpdate?: boolean, isClearAll?: boolean): HTMLElement;
     private createVirtualContent;
     private updateListElements;
     protected templateListItem(dataSource: {

package/src/drop-down-base/drop-down-base.js

@@ -138,6 +138,7 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.isDynamicData = false;
         _this.isPrimitiveData = false;
         _this.isCustomFiltering = false;
+        _this.debounceTimer = null;
         _this.virtualListInfo = {
             currentPageNumber: null,
             direction: null,
@@ -499,6 +500,29 @@ var DropDownBase = /** @class */ (function (_super) {
                     isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
                 }
             }
+            if (this.getModuleName() === 'multiselect') {
+                for (var i = 0; i < totalSkeletonCount && this.totalItemCount !== this.viewPortInfo.endIndex; i++) {
+                    var 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';
+                    }
+                    var 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(function (el) { return el.remove(); });
+                }
+            }
         }
     };
     DropDownBase.prototype.getLocaleName = function () {
@@ -779,7 +803,9 @@ var DropDownBase = /** @class */ (function (_super) {
                                         _this.preventPopupOpen = false;
                                         return;
                                     }
+                                    var isSetCurrentcall = false;
                                     if (_this.isVirtualizationEnabled && _this.setCurrentView) {
+                                        isSetCurrentcall = true;
                                         _this.notify('setCurrentViewDataAsync', {
                                             module: 'VirtualScroll'
                                         });
@@ -787,7 +813,8 @@ var DropDownBase = /** @class */ (function (_super) {
                                     if (_this.keyboardEvent != null) {
                                         _this.handleVirtualKeyboardActions(_this.keyboardEvent, _this.pageCount);
                                     }
-                                    if (_this.isVirtualizationEnabled) {
+                                    var preventSkeleton = _this.getModuleName() !== 'multiselect' || (_this.getModuleName() === 'multiselect' && (!(_this.dataSource instanceof DataManager) || (_this.dataSource instanceof DataManager && !isSetCurrentcall)));
+                                    if (_this.isVirtualizationEnabled && preventSkeleton) {
                                         _this.getFilteringSkeletonCount();
                                         _this.updatePopupPosition();
                                     }
@@ -989,6 +1016,7 @@ var DropDownBase = /** @class */ (function (_super) {
     };
     /* eslint-disable @typescript-eslint/no-unused-vars */
     DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {
+        var _this = this;
         /* eslint-enable @typescript-eslint/no-unused-vars */
         this.listData = list;
         if (this.isVirtualizationEnabled && !this.isCustomDataUpdated && !this.virtualSelectAll) {
@@ -1018,6 +1046,13 @@ var DropDownBase = /** @class */ (function (_super) {
                 }
             }
         }
+        if (this.getModuleName() === 'multiselect' && this.isAngular && this.ngEle) {
+            var popupHolder = this.list;
+            if (popupHolder) {
+                var prevHeight = popupHolder.offsetHeight + 'px';
+                popupHolder.style.height = prevHeight;
+            }
+        }
         if (!isNullOrUndefined(this.list)) {
             if (!this.isVirtualizationEnabled) {
                 this.list.innerHTML = '';
@@ -1027,15 +1062,26 @@ var DropDownBase = /** @class */ (function (_super) {
                 this.postRender(this.list, list, this.bindEvent);
             }
         }
+        if (this.getModuleName() === 'multiselect' && this.isAngular && this.ngEle) {
+            var popupHolder_1 = this.list;
+            if (popupHolder_1) {
+                setTimeout(function () {
+                    popupHolder_1.style.height = '';
+                    _this.refreshPopup();
+                }, 0);
+            }
+        }
     };
     /* eslint-disable @typescript-eslint/no-unused-vars */
     DropDownBase.prototype.postRender = function (listElement, list, bindEvent) {
         if (this.fields.disabled) {
             var liCollections = listElement.querySelectorAll('.' + dropDownBaseClasses.li);
+            var data = this.sortOrder !== 'None' ? !isNullOrUndefined(this.fields.groupBy) ?
+                this.sortedData.filter(function (item) { return !('isHeader' in item) || item.isHeader !== true; }) : this.sortedData : this.listData;
             for (var 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)) {
-                        var item = this.listData[index];
+                        var item = data[index];
                         var value = getValue((this.fields.value ? this.fields.value : 'value'), item);
                         var li = listElement.querySelector('li[data-value="' + value + '"]');
                         if (!isNullOrUndefined(li)) {
@@ -1077,6 +1123,18 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.getQuery = function (query) {
         return query ? query : this.query ? this.query : new Query();
     };
+    DropDownBase.prototype.performFiltering = function (e) {
+        // this is for component wise
+    };
+    DropDownBase.prototype.debouncedFiltering = function (e, debounceDelay) {
+        var _this = this;
+        if (this.debounceTimer !== null) {
+            clearTimeout(this.debounceTimer);
+        }
+        this.debounceTimer = setTimeout(function () {
+            _this.performFiltering(e);
+        }, debounceDelay);
+    };
     DropDownBase.prototype.updateVirtualizationProperties = function (itemCount, filtering, isCheckbox) {
         this.isVirtualizationEnabled = true;
         this.virtualizedItemsCount = itemCount;
@@ -1258,9 +1316,10 @@ var DropDownBase = /** @class */ (function (_super) {
      * @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.
      */
-    DropDownBase.prototype.renderItems = function (listData, fields, isCheckBoxUpdate) {
+    DropDownBase.prototype.renderItems = function (listData, fields, isCheckBoxUpdate, isClearAll) {
         var ulElement;
         if (this.itemTemplate && listData) {
             if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {
@@ -1314,7 +1373,7 @@ var DropDownBase = /** @class */ (function (_super) {
             }
         }
         else {
-            if (this.getModuleName() === 'multiselect' && this.virtualSelectAll) {
+            if (this.getModuleName() === 'multiselect' && (this.virtualSelectAll && !isClearAll)) {
                 this.virtualSelectAllData = listData;
                 listData = listData.slice(this.virtualItemStartIndex, this.virtualItemEndIndex);
             }
@@ -1333,11 +1392,13 @@ var DropDownBase = /** @class */ (function (_super) {
                     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);
                 }

package/src/drop-down-list/drop-down-list-model.d.ts

@@ -145,6 +145,13 @@ export interface DropDownListModel extends DropDownBaseModel{
      */
     allowFiltering?: boolean;
 
+    /**
+     * Specifies the delay time in milliseconds for filtering operations.
+     *
+     * @default 300
+     */
+    debounceDelay?: number;
+
     /**
      * Defines whether the popup opens in fullscreen mode on mobile devices when filtering is enabled. When set to false, the popup will display similarly on both mobile and desktop devices.
      *

package/src/drop-down-list/drop-down-list.d.ts

@@ -248,6 +248,12 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @default false
      */
     allowFiltering: boolean;
+    /**
+     * Specifies the delay time in milliseconds for filtering operations.
+     *
+     * @default 300
+     */
+    debounceDelay: number;
     /**
      * Defines whether the popup opens in fullscreen mode on mobile devices when filtering is enabled. When set to false, the popup will display similarly on both mobile and desktop devices.
      *
@@ -549,6 +555,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected getSelectionPoints(): {
         [key: string]: number;
     };
+    protected performFiltering(e: KeyboardEventArgs | MouseEvent): void;
     protected searchLists(e: KeyboardEventArgs | MouseEvent): void;
     /**
      * To filter the data from given data source by using query

package/src/drop-down-list/drop-down-list.js

@@ -1461,7 +1461,8 @@ var DropDownList = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             var proxy_1 = this;
             // eslint-disable-next-line max-len
-            var duration = (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;
+            var duration = ((this.dataSource instanceof DataManager) && this.groupTemplate) ? 700 :
+                (this.element.tagName === this.getNgDirective() && this.itemTemplate) ? 500 : 100;
             if (!this.isSecondClick) {
                 setTimeout(function () {
                     proxy_1.cloneElements();
@@ -2064,8 +2065,31 @@ var DropDownList = /** @class */ (function (_super) {
         var input = this.inputElement;
         return { start: Math.abs(input.selectionStart), end: Math.abs(input.selectionEnd) };
     };
-    DropDownList.prototype.searchLists = function (e) {
+    DropDownList.prototype.performFiltering = function (e) {
         var _this = this;
+        this.checkAndResetCache();
+        this.isRequesting = false;
+        var eventArgs = {
+            preventDefaultAction: false,
+            text: this.filterInput.value,
+            updateData: function (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, function (eventArgs) {
+            if (!eventArgs.cancel && !_this.isCustomFilter && !eventArgs.preventDefaultAction) {
+                _this.filteringAction(_this.dataSource, null, _this.fields);
+            }
+        });
+    };
+    DropDownList.prototype.searchLists = function (e) {
         this.isTyped = true;
         this.activeIndex = null;
         this.isListSearched = true;
@@ -2075,27 +2099,12 @@ var DropDownList = /** @class */ (function (_super) {
         }
         this.isDataFetched = false;
         if (this.isFiltering()) {
-            this.checkAndResetCache();
-            this.isRequesting = false;
-            var eventArgs_1 = {
-                preventDefaultAction: false,
-                text: this.filterInput.value,
-                updateData: function (dataSource, query, fields) {
-                    if (eventArgs_1.cancel) {
-                        return;
-                    }
-                    _this.isCustomFilter = true;
-                    _this.customFilterQuery = query ? query.clone() : query;
-                    _this.filteringAction(dataSource, query, fields);
-                },
-                baseEventArgs: e,
-                cancel: false
-            };
-            this.trigger('filtering', eventArgs_1, function (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);
+            }
         }
     };
     /**
@@ -2365,7 +2374,9 @@ var DropDownList = /** @class */ (function (_super) {
                         this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', value_1)))
                             .then(function (e) {
                             if (e.result.length > 0) {
-                                _this.addItem(e.result, list.length);
+                                if (!_this.enableVirtualization) {
+                                    _this.addItem(e.result, list.length);
+                                }
                                 _this.updateValues();
                             }
                             else {
@@ -4063,6 +4074,9 @@ var DropDownList = /** @class */ (function (_super) {
         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();
@@ -4331,6 +4345,7 @@ var DropDownList = /** @class */ (function (_super) {
             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()) {
@@ -4450,6 +4465,9 @@ var DropDownList = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], DropDownList.prototype, "allowFiltering", void 0);
+    __decorate([
+        Property(300)
+    ], DropDownList.prototype, "debounceDelay", void 0);
     __decorate([
         Property(true)
     ], DropDownList.prototype, "isDeviceFullScreen", void 0);

package/src/drop-down-tree/drop-down-tree.d.ts

@@ -778,6 +778,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private wireTreeEvents;
     private wireCheckAllWrapperEvents;
     private unWireEvents;
+    private handleIosTouch;
     private dropDownClick;
     private mouseIn;
     private onMouseLeave;