@syncfusion/ej2-dropdowns 29.1.41 → 29.2.4-850322

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

@@ -260,53 +260,53 @@ function revertHighlightSearch(content) {
     }
 }
 
-var __assign = (undefined && undefined.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var VirtualScroll = /** @__PURE__ @class */ (function () {
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var VirtualScroll = /** @class */ (function () {
     function VirtualScroll(parent) {
         var _this = this;
         this.sentinelInfo = {
@@ -545,6 +545,7 @@ var VirtualScroll = /** @__PURE__ @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;
@@ -592,6 +593,7 @@ var VirtualScroll = /** @__PURE__ @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();
@@ -603,7 +605,8 @@ var VirtualScroll = /** @__PURE__ @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) {
@@ -612,11 +615,13 @@ var VirtualScroll = /** @__PURE__ @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) {
@@ -857,26 +862,26 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
     return VirtualScroll;
 }());
 
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var FieldSettings = /** @__PURE__ @class */ (function (_super) {
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var FieldSettings = /** @class */ (function (_super) {
     __extends(FieldSettings, _super);
     function FieldSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -929,7 +934,7 @@ var HIDE_GROUPLIST = 'e-hide-group-header';
 /**
  * DropDownBase component will generate the list items based on given data and act as base class to drop-down related components
  */
-var DropDownBase = /** @__PURE__ @class */ (function (_super) {
+var DropDownBase = /** @class */ (function (_super) {
     __extends(DropDownBase, _super);
     /**
      * * Constructor for DropDownBase class
@@ -989,6 +994,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         _this.isDynamicData = false;
         _this.isPrimitiveData = false;
         _this.isCustomFiltering = false;
+        _this.debounceTimer = null;
         _this.virtualListInfo = {
             currentPageNumber: null,
             direction: null,
@@ -1350,6 +1356,29 @@ var DropDownBase = /** @__PURE__ @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 () {
@@ -1630,7 +1659,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                                         _this.preventPopupOpen = false;
                                         return;
                                     }
+                                    var isSetCurrentcall = false;
                                     if (_this.isVirtualizationEnabled && _this.setCurrentView) {
+                                        isSetCurrentcall = true;
                                         _this.notify('setCurrentViewDataAsync', {
                                             module: 'VirtualScroll'
                                         });
@@ -1638,7 +1669,8 @@ var DropDownBase = /** @__PURE__ @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();
                                     }
@@ -1883,10 +1915,12 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
     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)) {
@@ -1928,6 +1962,18 @@ var DropDownBase = /** @__PURE__ @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;
@@ -2101,9 +2147,10 @@ var DropDownBase = /** @__PURE__ @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) {
@@ -2157,7 +2204,7 @@ var DropDownBase = /** @__PURE__ @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);
             }
@@ -2176,11 +2223,13 @@ var DropDownBase = /** @__PURE__ @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);
                 }
@@ -2894,25 +2943,25 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
     return DropDownBase;
 }(Component));
 
-var __extends$1 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$1 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 // don't use space in classnames
 var dropDownListClasses = {
     root: 'e-dropdownlist',
@@ -2960,7 +3009,7 @@ var inputObject = {
  *   dropDownListObj.appendTo("#list");
  * ```
  */
-var DropDownList = /** @__PURE__ @class */ (function (_super) {
+var DropDownList = /** @class */ (function (_super) {
     __extends$1(DropDownList, _super);
     /**
      * * Constructor for creating the DropDownList component.
@@ -4346,7 +4395,8 @@ var DropDownList = /** @__PURE__ @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();
@@ -4949,8 +4999,31 @@ var DropDownList = /** @__PURE__ @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;
@@ -4960,27 +5033,12 @@ var DropDownList = /** @__PURE__ @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);
+            }
         }
     };
     /**
@@ -5250,7 +5308,19 @@ var DropDownList = /** @__PURE__ @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);
+                                }
+                                else {
+                                    _this.itemData = e.result[0];
+                                    var dataItem = _this.getItemData();
+                                    var value_2 = _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_2 });
+                                    }
+                                }
                                 _this.updateValues();
                             }
                             else {
@@ -5377,10 +5447,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.addNewItem = function (listData, newElement) {
         var _this = this;
         if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {
-            var value_2 = this.getItemData().value;
+            var value_3 = this.getItemData().value;
             var isExist = listData.some(function (data) {
-                return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value_2) ||
-                    (getValue(_this.fields.value, data) === value_2));
+                return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value_3) ||
+                    (getValue(_this.fields.value, data) === value_3));
             });
             if (!isExist) {
                 this.addItem(this.itemData);
@@ -6755,9 +6825,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                                 var listLength_2 = this_1.getItems().length;
                                 var checkField = isNullOrUndefined(this_1.fields.value) ? this_1.fields.text : this_1.fields.value;
                                 this_1.typedString = '';
-                                var value_3 = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ?
+                                var value_4 = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ?
                                     getValue(checkField, newProp.value) : newProp.value;
-                                this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', value_3)))
+                                this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', value_4)))
                                     .then(function (e) {
                                     if (e.result.length > 0) {
                                         _this.addItem(e.result, listLength_2);
@@ -7214,6 +7284,7 @@ var DropDownList = /** @__PURE__ @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()) {
@@ -7333,6 +7404,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -7399,25 +7473,25 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     return DropDownList;
 }(DropDownBase));
 
-var __extends$2 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$2 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var RTL = 'e-rtl';
 var DROPDOWNTREE = 'e-ddt';
 var HIDDENELEMENT = 'e-ddt-hidden';
@@ -7467,7 +7541,7 @@ var OVERFLOW_VIEW = 'e-overflow';
 var SHOW_TEXT = 'e-show-text';
 var TOTAL_COUNT_WRAPPER = 'e-total-count';
 var REMAIN_COUNT = 'e-wrap-count';
-var Fields = /** @__PURE__ @class */ (function (_super) {
+var Fields = /** @class */ (function (_super) {
     __extends$2(Fields, _super);
     function Fields() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -7519,7 +7593,7 @@ var Fields = /** @__PURE__ @class */ (function (_super) {
     ], Fields.prototype, "value", void 0);
     return Fields;
 }(ChildProperty));
-var TreeSettings = /** @__PURE__ @class */ (function (_super) {
+var TreeSettings = /** @class */ (function (_super) {
     __extends$2(TreeSettings, _super);
     function TreeSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -7550,7 +7624,7 @@ var TreeSettings = /** @__PURE__ @class */ (function (_super) {
  *  ddtObj.appendTo("#tree");
  * ```
  */
-var DropDownTree = /** @__PURE__ @class */ (function (_super) {
+var DropDownTree = /** @class */ (function (_super) {
     __extends$2(DropDownTree, _super);
     function DropDownTree(options, element) {
         var _this = _super.call(this, options, element) || this;
@@ -8036,6 +8110,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
     };
     /* To wire events for the dropdown tree */
     DropDownTree.prototype.wireEvents = function () {
+        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);
@@ -8069,6 +8146,9 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
     };
     /* To unwire events for the dropdown tree */
     DropDownTree.prototype.unWireEvents = function () {
+        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);
@@ -8086,6 +8166,11 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
         document.removeEventListener('mousedown', this.documentClickContext);
     };
+    /* Handles touch events specifically for iOS devices */
+    DropDownTree.prototype.handleIosTouch = function (e) {
+        e.preventDefault();
+        this.dropDownClick(e);
+    };
     /* Trigger when the dropdown is clicked */
     DropDownTree.prototype.dropDownClick = function (e) {
         if (!this.enabled || this.readonly) {
@@ -10963,25 +11048,25 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
     return DropDownTree;
 }(Component));
 
-var __extends$3 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$3 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var SPINNER_CLASS = 'e-atc-spinner-icon';
 dropDownListClasses.root = 'e-combobox';
 var inputObject$1 = {
@@ -11004,7 +11089,7 @@ var inputObject$1 = {
  *   games.appendTo("#list");
  * ```
  */
-var ComboBox = /** @__PURE__ @class */ (function (_super) {
+var ComboBox = /** @class */ (function (_super) {
     __extends$3(ComboBox, _super);
     /**
      * *Constructor for creating the component
@@ -11984,9 +12069,6 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -12041,25 +12123,25 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
     return ComboBox;
 }(DropDownList));
 
-var __extends$4 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$4 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 dropDownListClasses.root = 'e-autocomplete';
 dropDownListClasses.icon = 'e-input-group-icon e-ddl-icon e-search-icon';
 /**
@@ -12073,7 +12155,7 @@ dropDownListClasses.icon = 'e-input-group-icon e-ddl-icon e-search-icon';
  *   atcObj.appendTo("#list");
  * ```
  */
-var AutoComplete = /** @__PURE__ @class */ (function (_super) {
+var AutoComplete = /** @class */ (function (_super) {
     __extends$4(AutoComplete, _super);
     /**
      * * Constructor for creating the widget
@@ -12194,7 +12276,6 @@ var AutoComplete = /** @__PURE__ @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;
@@ -12212,6 +12293,15 @@ var AutoComplete = /** @__PURE__ @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,
@@ -12761,25 +12851,25 @@ function encodePlaceholder(placeholder) {
 }
 /* eslint-enable valid-jsdoc */
 
-var __extends$5 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$5 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var FOCUS = 'e-input-focus';
 var DISABLED$1 = 'e-disabled';
 var OVER_ALL_WRAPPER = 'e-multiselect e-input-group e-control-wrapper';
@@ -12835,7 +12925,7 @@ var RESIZE_ICON = 'e-resizer-right e-icons';
  * </script>
  * ```
  */
-var MultiSelect = /** @__PURE__ @class */ (function (_super) {
+var MultiSelect = /** @class */ (function (_super) {
     __extends$5(MultiSelect, _super);
     /**
      * Constructor for creating the DropDownList widget.
@@ -13363,7 +13453,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             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;
@@ -14238,7 +14328,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.pageDownSelection = function (steps, isVirtualKeyAction) {
         var list = this.getItems();
         var 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)');
         var 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) ||
@@ -14255,6 +14345,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         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;
@@ -14739,9 +14832,10 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         var selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?
             parseInt(window.getComputedStyle(selectedLI).marginBottom, 10) : 0;
         this.isUpwardScrolling = false;
-        var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
-        var lastElementValue = this.list.querySelector('li:last-of-type') ?
-            this.list.querySelector('li:last-of-type').getAttribute('data-value') : null;
+        var virtualListCount = this.list.querySelectorAll('.e-virtual-list:not(.e-virtual-list-end)').length;
+        var liItems = this.list.querySelectorAll('li:not(.e-virtual-list-end)');
+        var lastElementValue = liItems && liItems.length > 0 && liItems[liItems.length - 1] ?
+            liItems[liItems.length - 1].getAttribute('data-value') : null;
         var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ?
             selectedLI.offsetTop + (this.virtualListInfo.startIndex * (selectedLI.offsetHeight + selectedListMargin))
             : selectedLI.offsetTop;
@@ -14795,7 +14889,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.scrollTop = function (selectedLI, activeIndex, keyCode) {
         if (keyCode === void 0) { keyCode = null; }
-        var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        var virtualListCount = this.list.querySelectorAll('.e-virtual-list:not(.e-virtual-list-end)').length;
         var selectedListMargin = selectedLI && !isNaN(parseInt(window.getComputedStyle(selectedLI).marginBottom, 10)) ?
             parseInt(window.getComputedStyle(selectedLI).marginBottom, 10) : 0;
         var selectedLiOffsetTop = (this.virtualListInfo && this.virtualListInfo.startIndex) ?
@@ -15024,11 +15118,11 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         if (this.list) {
             var 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)');
             }
             var selectedElem = this.list.querySelector('li.' + dropDownBaseClasses.focus);
             if (this.enableVirtualization && isVirtualKeyAction && !isNullOrUndefined(this.currentFocuedListElement)) {
@@ -15428,6 +15522,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
+    MultiSelect.prototype.isFilteringWithRemoteData = function () {
+        return !isNullOrUndefined(this.mainData) && this.mainData.length > 0 && this.allowFiltering;
+    };
     MultiSelect.prototype.removeChip = function (value, isClearAll) {
         if (this.chipCollectionWrapper) {
             if (!(this.enableVirtualization && isClearAll)) {
@@ -15727,7 +15824,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             var inputWidth = (this.componentWrapper.offsetWidth) * parseFloat(width) / 100;
             width = inputWidth.toString() + 'px';
         }
-        return width;
+        return (this.allowResize && this.resizeWidth) ? this.resizeWidth + 'px' : width;
     };
     MultiSelect.prototype.mouseIn = function () {
         if (this.enabled && !this.readonly) {
@@ -16002,7 +16099,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     MultiSelect.prototype.updateInitialData = function () {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var currentData = this.selectData;
-        var ulElement = this.renderItems(currentData, this.fields);
+        var ulElement = this.renderItems(currentData, this.fields, false, this.isClearAllAction);
         this.list.scrollTop = 0;
         this.virtualListInfo = {
             currentPageNumber: null,
@@ -16223,8 +16320,40 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             _this.search(event);
         });
     };
-    MultiSelect.prototype.search = function (e) {
+    MultiSelect.prototype.performFiltering = function (e) {
         var _this = this;
+        var eventArgs = {
+            preventDefaultAction: false,
+            text: this.targetElement(),
+            updateData: function (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, function (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;
+                }
+            }
+        });
+    };
+    MultiSelect.prototype.search = function (e) {
         this.preventSetCurrentData = false;
         this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         if (!isNullOrUndefined(e)) {
@@ -16245,36 +16374,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 }
                 this.checkAndResetCache();
                 this.isRequesting = false;
-                var eventArgs_1 = {
-                    preventDefaultAction: false,
-                    text: this.targetElement(),
-                    updateData: function (dataSource, query, fields) {
-                        if (eventArgs_1.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_1, function (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) {
                 var query = new Query();
@@ -16585,6 +16690,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         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);
+                    }
                     var isCustomData = false;
                     if (this.enableVirtualization) {
                         text = null;
@@ -16621,6 +16729,12 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                     }
                     else {
                         text = this.getTextByValue(value);
+                        if (text === value && this.isFilteringWithRemoteData()) {
+                            var 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) &&
@@ -17388,7 +17502,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.checkClearIconWidth = function () {
         if (this.showClearButton) {
-            this.clearIconWidth = parseInt(window.getComputedStyle(this.overAllClear).width, 10);
+            this.clearIconWidth = parseInt(window.getComputedStyle(this.overAllClear).width, 10) || this.overAllClear.offsetWidth;
         }
     };
     MultiSelect.prototype.updateRemainWidth = function (viewWrapper, totalWidth) {
@@ -18307,7 +18421,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                         _this.list.parentElement.style.paddingBottom = '';
                         var 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) {
@@ -18635,7 +18751,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         }
         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
@@ -18646,6 +18763,18 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             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) {
+                var 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);
@@ -18700,6 +18829,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
             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";
             }
@@ -19199,6 +19331,9 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     __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);
@@ -19343,7 +19478,7 @@ var FOCUS$1 = 'e-input-focus';
 /**
  * The Multiselect enable CheckBoxSelection call this inject module.
  */
-var CheckBoxSelection = /** @__PURE__ @class */ (function () {
+var CheckBoxSelection = /** @class */ (function () {
     function CheckBoxSelection(parent) {
         this.activeLi = [];
         this.activeEle = [];
@@ -19865,29 +20000,29 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
     return CheckBoxSelection;
 }());
 
-var __extends$6 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$6 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * Defines the Selection settings of List Box.
  */
-var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
+var SelectionSettings = /** @class */ (function (_super) {
     __extends$6(SelectionSettings, _super);
     function SelectionSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -19909,7 +20044,7 @@ var SelectionSettings = /** @__PURE__ @class */ (function (_super) {
 /**
  * Defines the toolbar settings of List Box.
  */
-var ToolbarSettings = /** @__PURE__ @class */ (function (_super) {
+var ToolbarSettings = /** @class */ (function (_super) {
     __extends$6(ToolbarSettings, _super);
     function ToolbarSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -19942,7 +20077,7 @@ var ToolbarSettings = /** @__PURE__ @class */ (function (_super) {
  * </script>
  * ```
  */
-var ListBox = /** @__PURE__ @class */ (function (_super) {
+var ListBox = /** @class */ (function (_super) {
     __extends$6(ListBox, _super);
     /**
      * Constructor for creating the ListBox component.
@@ -22542,30 +22677,30 @@ var listBoxClasses = {
     clearIcon: 'e-clear-icon'
 };
 
-var __extends$7 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+var __extends$7 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
  * The Mention component is used to list someone or something based on user input in textarea, input,
  * or any other editable element from which the user can select.
  */
-var Mention = /** @__PURE__ @class */ (function (_super) {
+var Mention = /** @class */ (function (_super) {
     __extends$7(Mention, _super);
     /**
      * * Constructor for creating the widget
@@ -22575,7 +22710,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
      * @private
      */
     function Mention(options, element) {
-        return _super.call(this, options, element) || this;
+        var _this = _super.call(this, options, element) || this;
+        _this.debounceTimer = null;
+        return _this;
     }
     /**
      * When property value changes happened, then onPropertyChanged method will execute the respective changes in this component.
@@ -23010,22 +23147,8 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
         this.range = this.inputElement.ownerDocument.getSelection().getRangeAt(0);
         return this.range;
     };
-    Mention.prototype.searchLists = function (e) {
+    Mention.prototype.performFiltering = function (e) {
         var _this = this;
-        this.isDataFetched = false;
-        if (isNullOrUndefined(this.list)) {
-            _super.prototype.render.call(this);
-            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;
         var eventArgs = {
             preventDefaultAction: false,
             text: this.queryString,
@@ -23044,6 +23167,28 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             }
         });
     };
+    Mention.prototype.searchLists = function (e) {
+        this.isDataFetched = false;
+        if (isNullOrUndefined(this.list)) {
+            _super.prototype.render.call(this);
+            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);
+        }
+    };
     Mention.prototype.filterAction = function (dataSource, query, fields) {
         this.beforePopupOpen = true;
         if (this.queryString.length >= this.minLength) {
@@ -24241,6 +24386,9 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
     __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);