@syncfusion/ej2-dropdowns 23.2.7 → 24.1.41-566987

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

@@ -12,6 +12,7 @@ import { TreeView } from '@syncfusion/ej2-navigations';
  */
 var queryString = '';
 var prevString = '';
+var tempQueryString = '';
 var matches$1 = [];
 var activeClass = 'e-active';
 var prevElementId = '';
@@ -26,21 +27,49 @@ var prevElementId = '';
  * @param {string} elementId - Specifies the list element ID.
  * @returns {Element} Returns list item based on key code matches with list text content.
  */
-function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId) {
-    queryString += String.fromCharCode(keyCode);
-    setTimeout(function () {
-        queryString = '';
-    }, 1000);
+function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId, queryStringUpdated, currentValue, isVirtual, refresh) {
+    if (!queryStringUpdated || queryString === '') {
+        if (tempQueryString != '') {
+            queryString = tempQueryString + String.fromCharCode(keyCode);
+            tempQueryString = '';
+        }
+        else {
+            queryString += String.fromCharCode(keyCode);
+        }
+    }
+    else if (queryString == prevString) {
+        tempQueryString = String.fromCharCode(keyCode);
+    }
+    if (isVirtual) {
+        setTimeout(function () {
+            tempQueryString = '';
+        }, 700);
+        setTimeout(function () {
+            queryString = '';
+        }, 3000);
+    }
+    else {
+        setTimeout(function () {
+            queryString = '';
+        }, 1000);
+    }
     var index;
     queryString = ignoreCase ? queryString.toLowerCase() : queryString;
-    if (prevElementId === elementId && prevString === queryString) {
+    if (prevElementId === elementId && prevString === queryString && !refresh) {
         for (var i = 0; i < matches$1.length; i++) {
             if (matches$1[i].classList.contains(activeClass)) {
                 index = i;
                 break;
             }
+            if (currentValue && matches$1[i].textContent.toLowerCase() === currentValue.toLowerCase()) {
+                index = i;
+                break;
+            }
         }
         index = index + 1;
+        if (isVirtual) {
+            return matches$1[index] && matches$1.length - 1 != index ? matches$1[index] : matches$1[matches$1.length];
+        }
         return matches$1[index] ? matches$1[index] : matches$1[0];
     }
     else {
@@ -70,6 +99,20 @@ function incrementalSearch(keyCode, items, selectedIndex, ignoreCase, elementId)
         } while (i !== selectedIndex);
         prevString = queryString;
         prevElementId = elementId;
+        if (isVirtual) {
+            var indexUpdated = false;
+            for (var i_1 = 0; i_1 < matches$1.length; i_1++) {
+                if (currentValue && matches$1[i_1].textContent.toLowerCase() === currentValue.toLowerCase()) {
+                    index = i_1;
+                    indexUpdated = true;
+                    break;
+                }
+            }
+            if (currentValue && indexUpdated) {
+                index = index + 1;
+            }
+            return matches$1[index] ? matches$1[index] : matches$1[0];
+        }
         return matches$1[0];
     }
 }
@@ -106,7 +149,7 @@ function Search(inputVal, items, searchType, ignoreCase, dataSource, fields, typ
                     });
                 });
             }
-            text = dataSource && filterValue ? (ignoreCase ? filterValue.toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
+            text = dataSource && filterValue ? (ignoreCase ? filterValue.toString().toLocaleLowerCase() : filterValue).replace(/^\s+|\s+$/g, '') : (ignoreCase ? item.textContent.toLocaleLowerCase() : item.textContent).replace(/^\s+|\s+$/g, '');
             /* eslint-disable security/detect-non-literal-regexp */
             if ((searchType === 'Equal' && text === queryStr) || (searchType === 'StartsWith' && text.substr(0, strLength) === queryStr) || (searchType === 'EndsWith' && text.substr(text.length - queryStr.length) === queryStr) || (searchType === 'Contains' && new RegExp(queryStr, "g").test(text))) {
                 itemData.item = item;
@@ -195,53 +238,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 = {
@@ -344,9 +387,24 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 query = this.getPageQuery(query, virtualItemStartIndex, virtualItemEndIndex);
             }
         }
+        var tempCustomFilter = this.parent.isCustomFilter;
+        if (this.component === 'combobox') {
+            var totalData = 0;
+            if (this.parent.dataSource instanceof DataManager) {
+                totalData = this.parent.dataSource.dataSource.json.length;
+            }
+            else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
+                totalData = this.parent.dataSource.length;
+            }
+            if (totalData > 0) {
+                this.parent.isCustomFilter = (totalData == this.parent.totalItemCount && this.parent.queryString != this.parent.typedString) ? true : this.parent.isCustomFilter;
+            }
+        }
         this.parent.resetList(dataSource, this.parent.fields, query);
+        this.parent.isCustomFilter = tempCustomFilter;
     };
     VirtualScroll.prototype.removeSkipAndTakeEvents = function (query) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         query.queries = query.queries.filter(function (event) {
             return event.fn !== 'onSkip' && event.fn !== 'onTake';
         });
@@ -375,6 +433,9 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         if (virtualContentElement) {
             (virtualContentElement).style = this.parent.getTransformValues();
         }
+        if (this.parent.fields.groupBy) {
+            this.parent.scrollStop();
+        }
     };
     VirtualScroll.prototype.generateQueryAndSetQueryIndexAsync = function (query, isPopupOpen) {
         var isStartIndexInitialised = false;
@@ -425,6 +486,9 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                             }
                             else {
                                 this.parent.getSkeletonCount(true);
+                                if (this.component === 'combobox') {
+                                    this.parent.skeletonCount = this.parent.totalItemCount != 0 && this.parent.totalItemCount < (this.parent.itemCount * 2) ? 0 : this.parent.skeletonCount;
+                                }
                             }
                         }
                         return [4 /*yield*/, this.dataProcessAsync()];
@@ -587,26 +651,26 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
  * Common source
  */
 
-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;
@@ -655,7 +719,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
@@ -678,6 +742,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         _this.virtualizedItemsCount = 0;
         _this.totalItemCount = 0;
         _this.dataCount = 0;
+        _this.isRemoteDataUpdated = false;
+        _this.isIncrementalRequest = false;
+        _this.itemCount = 10;
         return _this;
     }
     DropDownBase.prototype.getPropObject = function (prop, newProp, oldProp) {
@@ -1074,7 +1141,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 if (!eventArgs.cancel) {
                     _this.isRequesting = true;
                     _this.showSpinner();
-                    if (dataSource instanceof DataManager) {
+                    if (dataSource instanceof DataManager && !_this.virtualGroupDataSource) {
                         _this.isRequested = true;
                         if (_this.isDataFetched) {
                             _this.emptyDataRequest(fields);
@@ -1083,8 +1150,39 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                         eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {
                             _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                             _this.trigger('actionComplete', e, function (e) {
+                                if (!_this.virtualGroupDataSource && _this.isVirtualizationEnabled) {
+                                    _this.isRemoteDataUpdated = true;
+                                    if ((_this.getModuleName() === 'combobox' && _this.isAllowFiltering && _this.isVirtualizationEnabled && e.result)) {
+                                        e.result = e.result.result;
+                                    }
+                                    if (e.result.length > 0) {
+                                        var dataSource_2 = e.result;
+                                        if (_this.isVirtualizationEnabled && _this.fields.groupBy) {
+                                            var data = new DataManager(dataSource_2).executeLocal(new Query().group(_this.fields.groupBy));
+                                            _this.virtualGroupDataSource = data.records;
+                                        }
+                                        else {
+                                            _this.virtualGroupDataSource = dataSource_2;
+                                            _this.hideSpinner();
+                                            _this.isRequested = false;
+                                            _this.isRequesting = false;
+                                            _this.setListData(dataSource_2, fields, query, event);
+                                            return;
+                                        }
+                                    }
+                                    _this.hideSpinner();
+                                    _this.isRequested = false;
+                                    _this.isRequesting = false;
+                                    _this.updatePopupState();
+                                    return;
+                                }
                                 if (!e.cancel) {
+                                    _this.isRequesting = false;
                                     var listItems = e.result;
+                                    if (_this.isIncrementalRequest) {
+                                        ulElement = _this.renderItems(listItems, fields);
+                                        return;
+                                    }
                                     if (listItems.length === 0) {
                                         _this.isDataFetched = true;
                                     }
@@ -1098,7 +1196,6 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                                     _this.isRequested = false;
                                     _this.bindChildItems(listItems, ulElement, fields, e);
                                 }
-                                _this.isRequesting = false;
                             });
                         }).catch(function (e) {
                             _this.isRequested = false;
@@ -1109,8 +1206,25 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                     }
                     else {
                         _this.isRequesting = false;
-                        var dataManager = new DataManager(eventArgs.data);
-                        var listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        var listItems = void 0;
+                        if (_this.isVirtualizationEnabled && !_this.virtualGroupDataSource && _this.fields.groupBy) {
+                            var data = new DataManager(_this.dataSource).executeLocal(new Query().group(_this.fields.groupBy));
+                            _this.virtualGroupDataSource = data.records;
+                        }
+                        var dataManager = _this.isVirtualizationEnabled && _this.virtualGroupDataSource ? new DataManager(_this.virtualGroupDataSource) : new DataManager(eventArgs.data);
+                        listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        if (_this.isVirtualizationEnabled && _this.getModuleName() === 'autocomplete' && (listItems.count != 0 && listItems.count < (_this.itemCount * 2))) {
+                            var newQuery = _this.getQuery(eventArgs.query);
+                            if (newQuery) {
+                                for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                    if (newQuery.queries[queryElements].fn === 'onTake') {
+                                        newQuery.queries[queryElements].e.nos = listItems.count;
+                                        listItems = (newQuery).executeLocal(dataManager);
+                                        break;
+                                    }
+                                }
+                            }
+                        }
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         _this.dataCount = listItems.count;
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1120,6 +1234,10 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                         var localDataArgs = { cancel: false, result: listItems };
                         _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                         _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {
+                            if (_this.isIncrementalRequest) {
+                                ulElement = _this.renderItems(localDataArgs.result, fields);
+                                return;
+                            }
                             if (!localDataArgs.cancel) {
                                 ulElement = _this.renderItems(localDataArgs.result, fields);
                                 _this.onActionComplete(ulElement, localDataArgs.result, event);
@@ -1139,6 +1257,12 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             });
         }
     };
+    DropDownBase.prototype.updatePopupState = function () {
+        // Used this method in component side.
+    };
+    DropDownBase.prototype.updateRemoteData = function () {
+        this.setListData(this.dataSource, this.fields, this.query);
+    };
     DropDownBase.prototype.bindChildItems = function (listItems, ulElement, fields, e) {
         var _this = this;
         if (listItems.length >= 100 && this.getModuleName() === 'autocomplete') {
@@ -1194,6 +1318,7 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         var listItems = [];
         this.onActionComplete(this.renderItems(listItems, fields), listItems);
         this.isRequested = false;
+        this.isRequesting = false;
         this.hideSpinner();
     };
     DropDownBase.prototype.showSpinner = function () {
@@ -1226,7 +1351,9 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
         if (this.isReact) {
             this.clearTemplate(['itemTemplate', 'groupTemplate', 'actionFailureTemplate', 'noRecordsTemplate']);
         }
-        this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;
+        if (!this.isVirtualizationEnabled) {
+            this.fixedHeaderElement = isNullOrUndefined(this.fixedHeaderElement) ? this.fixedHeaderElement : null;
+        }
         if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {
             for (var i = 0; i < ulElement.childElementCount; i++) {
                 if (ulElement.children[i].classList.contains('e-list-group-item')) {
@@ -1367,25 +1494,67 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
             this.scrollStop(e);
         }
     };
-    DropDownBase.prototype.scrollStop = function (e) {
+    DropDownBase.prototype.scrollStop = function (e, isDownkey) {
         var target = !isNullOrUndefined(e) ? e.target : this.list;
         var liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);
         var topIndex = Math.round(target.scrollTop / liHeight);
         var liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');
+        var virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        var count = 0;
+        var isCount = false;
         for (var i = topIndex; i > -1; i--) {
-            if (!isNullOrUndefined(liCollections[i]) && liCollections[i].classList.contains(dropDownBaseClasses.group)) {
-                var currentLi = liCollections[i];
-                this.fixedHeaderElement.innerHTML = currentLi.innerHTML;
-                this.fixedHeaderElement.style.top = target.scrollTop + 'px';
-                this.fixedHeaderElement.style.display = 'block';
-                break;
+            var index = this.isVirtualizationEnabled ? i + virtualListCount : i;
+            if (this.isVirtualizationEnabled) {
+                var groupListLength = this.list.querySelectorAll('.e-list-group-item').length;
+                var loadedGroupList = 0;
+                if (isCount) {
+                    count++;
+                }
+                if (this.updateGroupHeader(index, liCollections, target)) {
+                    loadedGroupList++;
+                    if (count >= this.getPageCount()) {
+                        break;
+                    }
+                    if (groupListLength <= loadedGroupList) {
+                        break;
+                    }
+                }
+                if (isDownkey) {
+                    if ((!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.selected) && this.getModuleName() !== 'autocomplete') || (!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.focus) && this.getModuleName() === 'autocomplete')) {
+                        count++;
+                        isCount = true;
+                    }
+                }
             }
             else {
-                this.fixedHeaderElement.style.display = 'none';
-                this.fixedHeaderElement.style.top = 'none';
+                if (this.updateGroupHeader(index, liCollections, target)) {
+                    break;
+                }
             }
         }
     };
+    DropDownBase.prototype.getPageCount = function (returnExactCount) {
+        var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
+            getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
+        var pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
+        return returnExactCount ? pageCount : Math.round(pageCount);
+    };
+    DropDownBase.prototype.updateGroupHeader = function (index, liCollections, target) {
+        if (!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.group)) {
+            this.updateGroupFixedHeader(liCollections[index], target);
+            return true;
+        }
+        else {
+            this.fixedHeaderElement.style.display = 'none';
+            this.fixedHeaderElement.style.top = 'none';
+            return false;
+        }
+    };
+    DropDownBase.prototype.updateGroupFixedHeader = function (element, target) {
+        this.fixedHeaderElement.innerHTML = element.innerHTML;
+        this.fixedHeaderElement.style.top = target.scrollTop + 'px';
+        this.fixedHeaderElement.style.display = 'block';
+    };
     DropDownBase.prototype.getValidLi = function () {
         return this.liCollections[0];
     };
@@ -1419,45 +1588,54 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
                 var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
                 if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
                     virtualUlElement.replaceChild(ulElement, oldUlElement);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
                     this.list.innerHTML = '';
-                    this.list.appendChild(ulElement);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.createVirtualContent();
+                    this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
+                    this.updateListElements(listData);
                 }
             }
         }
         else {
             ulElement = this.createListItems(listData, fields);
+            if (this.isIncrementalRequest) {
+                this.incrementalLiCollections = ulElement.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.incrementalUlElement = ulElement;
+                this.incrementalListData = listData;
+                return ulElement;
+            }
             if (this.isVirtualizationEnabled) {
                 var oldUlElement = this.list.querySelector('.e-list-parent');
                 var virtualUlElement = this.list.querySelector('.e-virtual-ddl-content');
                 if ((listData.length >= this.virtualizedItemsCount && oldUlElement && virtualUlElement) || (oldUlElement && virtualUlElement && this.isAllowFiltering) || (oldUlElement && virtualUlElement && this.getModuleName() === 'autocomplete')) {
                     virtualUlElement.replaceChild(ulElement, oldUlElement);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.updateListElements(listData);
                 }
                 else if ((!virtualUlElement)) {
                     this.list.innerHTML = '';
-                    this.list.appendChild(ulElement);
-                    this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
-                    this.ulElement = this.list.querySelector('ul');
-                    this.listData = listData;
-                    this.postRender(this.list, listData, this.bindEvent);
+                    this.createVirtualContent();
+                    this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
+                    this.updateListElements(listData);
                 }
             }
         }
         return ulElement;
     };
+    DropDownBase.prototype.createVirtualContent = function () {
+        if (!this.list.querySelector('.e-virtual-ddl-content')) {
+            this.list.appendChild(this.createElement('div', {
+                className: 'e-virtual-ddl-content',
+            }));
+        }
+    };
+    DropDownBase.prototype.updateListElements = function (listData) {
+        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+        this.ulElement = this.list.querySelector('ul');
+        this.listData = listData;
+        this.postRender(this.list, listData, this.bindEvent);
+    };
     DropDownBase.prototype.templateListItem = function (dataSource, fields) {
         var option = this.listOption(dataSource, fields);
         option.templateID = this.itemTemplateId;
@@ -1529,11 +1707,11 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
      * @param {string | number | boolean} value - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
-    DropDownBase.prototype.getIndexByValueFilter = function (value) {
+    DropDownBase.prototype.getIndexByValue = function (value) {
         var index;
-        var listItems = this.renderItems(this.selectData, this.fields);
-        for (var i = 0; i < listItems.children.length; i++) {
-            if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
+        var listItems = this.getItems();
+        for (var i = 0; i < listItems.length; i++) {
+            if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
                 index = i;
                 break;
             }
@@ -1546,11 +1724,11 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
      * @param {string | number | boolean} value - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
-    DropDownBase.prototype.getIndexByValue = function (value) {
+    DropDownBase.prototype.getIndexByValueFilter = function (value) {
         var index;
-        var listItems = this.getItems();
-        for (var i = 0; i < listItems.length; i++) {
-            if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
+        var listItems = this.renderItems(this.selectData, this.fields);
+        for (var i = 0; i < listItems.children.length; i++) {
+            if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
                 index = i;
                 break;
             }
@@ -2033,25 +2211,25 @@ var DropDownBase = /** @__PURE__ @class */ (function (_super) {
  * export all modules from current location
  */
 
-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;
+};
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 // don't use space in classnames
@@ -2100,7 +2278,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.
@@ -2115,7 +2293,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         _this.isListSearched = false;
         _this.preventChange = false;
         _this.isAngular = false;
-        _this.itemCount = 10;
         _this.virtualListHeight = 0;
         _this.isVirtualScrolling = false;
         _this.isPreventScrollAction = false;
@@ -2130,6 +2307,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         _this.pageCount = 0;
         _this.isPreventKeyAction = false;
         _this.generatedDataObject = {};
+        _this.incrementalQueryString = '';
+        _this.incrementalEndIndex = 0;
+        _this.incrementalStartIndex = 0;
+        _this.incrementalPreQueryString = '';
         _this.isTouched = false;
         _this.virtualListInfo = {
             currentPageNumber: null,
@@ -2239,8 +2420,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     };
     DropDownList.prototype.renderList = function (e, isEmptyData) {
         _super.prototype.render.call(this, e, isEmptyData);
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        if (!(this.dataSource instanceof DataManager)) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        }
         this.unWireListEvents();
         this.wireListEvents();
     };
@@ -2704,12 +2887,136 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.isValidLI = function (li) {
         return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');
     };
+    DropDownList.prototype.updateIncrementalInfo = function (startIndex, endIndex) {
+        this.viewPortInfo.startIndex = startIndex;
+        this.viewPortInfo.endIndex = endIndex;
+        this.updateVirtualItemIndex();
+        this.isIncrementalRequest = true;
+        this.resetList(this.dataSource, this.fields, this.query);
+        this.isIncrementalRequest = false;
+    };
+    DropDownList.prototype.updateIncrementalView = function (startIndex, endIndex) {
+        this.viewPortInfo.startIndex = startIndex;
+        this.viewPortInfo.endIndex = endIndex;
+        this.updateVirtualItemIndex();
+        this.resetList(this.dataSource, this.fields, this.query);
+        this.UpdateSkeleton();
+        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+        this.ulElement = this.list.querySelector('ul');
+    };
+    DropDownList.prototype.updateIncrementalItemIndex = function (startIndex, endIndex) {
+        this.incrementalStartIndex = startIndex;
+        this.incrementalEndIndex = endIndex;
+    };
     DropDownList.prototype.incrementalSearch = function (e) {
         if (this.liCollections.length > 0) {
-            var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
-            if (!isNullOrUndefined(li)) {
-                this.setSelection(li, e);
-                this.setScrollPosition();
+            if (this.enableVirtualization) {
+                var updatingincrementalindex = false;
+                var queryStringUpdated = false;
+                var activeElement = this.ulElement.getElementsByClassName('e-active')[0];
+                var currentValue = activeElement ? activeElement.textContent : null;
+                if (this.incrementalQueryString == '') {
+                    this.incrementalQueryString = String.fromCharCode(e.charCode);
+                    this.incrementalPreQueryString = this.incrementalQueryString;
+                }
+                else if (String.fromCharCode(e.charCode).toLocaleLowerCase() == this.incrementalPreQueryString.toLocaleLowerCase()) {
+                    queryStringUpdated = true;
+                }
+                else {
+                    this.incrementalQueryString = String.fromCharCode(e.charCode);
+                }
+                if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {
+                    updatingincrementalindex = true;
+                    this.incrementalStartIndex = this.incrementalEndIndex;
+                    if (this.incrementalEndIndex == 0) {
+                        this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                    }
+                    else {
+                        this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                    }
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                }
+                if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                    this.updateIncrementalView(0, this.itemCount);
+                }
+                var li = incrementalSearch(e.charCode, this.incrementalLiCollections, this.activeIndex, true, this.element.id, queryStringUpdated, currentValue, true);
+                while (isNullOrUndefined(li) && this.incrementalEndIndex < this.totalItemCount) {
+                    this.updateIncrementalItemIndex(this.incrementalEndIndex, this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100);
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                    if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                        this.updateIncrementalView(0, this.itemCount);
+                    }
+                    li = incrementalSearch(e.charCode, this.incrementalLiCollections, 0, true, this.element.id, queryStringUpdated, currentValue, true, true);
+                    if (!isNullOrUndefined(li)) {
+                        break;
+                    }
+                    if (isNullOrUndefined(li) && this.incrementalEndIndex >= this.totalItemCount) {
+                        this.updateIncrementalItemIndex(0, 100 > this.totalItemCount ? this.totalItemCount : 100);
+                        break;
+                    }
+                }
+                if (isNullOrUndefined(li) && this.incrementalEndIndex >= this.totalItemCount) {
+                    this.updateIncrementalItemIndex(0, 100 > this.totalItemCount ? this.totalItemCount : 100);
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                    if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                        this.updateIncrementalView(0, this.itemCount);
+                    }
+                    li = incrementalSearch(e.charCode, this.incrementalLiCollections, 0, true, this.element.id, queryStringUpdated, currentValue, true, true);
+                }
+                var index = li && this.getIndexByValue(li.getAttribute('data-value'));
+                if (!index) {
+                    for (var i = 0; i < this.incrementalLiCollections.length; i++) {
+                        if (!isNullOrUndefined(li) && !isNullOrUndefined(li.getAttribute('data-value')) && this.incrementalLiCollections[i].getAttribute('data-value') === li.getAttribute('data-value').toString()) {
+                            index = i;
+                            index = this.incrementalStartIndex + index;
+                            break;
+                        }
+                    }
+                }
+                else {
+                    index = index - this.skeletonCount;
+                }
+                if (index) {
+                    if ((!(this.viewPortInfo.startIndex >= index)) || (!(index >= this.viewPortInfo.endIndex))) {
+                        var startIndex = index - ((this.itemCount / 2) - 2) > 0 ? index - ((this.itemCount / 2) - 2) : 0;
+                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        this.updateIncrementalView(startIndex, endIndex);
+                    }
+                }
+                if (!isNullOrUndefined(li)) {
+                    var index_1 = this.getIndexByValue(li.getAttribute('data-value')) - this.skeletonCount;
+                    if (index_1 > this.itemCount / 2) {
+                        var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;
+                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        this.updateIncrementalView(startIndex, endIndex);
+                    }
+                    li = this.getElementByValue(li.getAttribute('data-value'));
+                    this.setSelection(li, e);
+                    this.setScrollPosition();
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                    if (this.enableVirtualization && !this.fields.groupBy) {
+                        var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+                        this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
+                    }
+                    this.incrementalPreQueryString = this.incrementalQueryString;
+                }
+                else {
+                    this.updateIncrementalView(0, this.itemCount);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                    this.list.scrollTop = 0;
+                }
+            }
+            else {
+                var li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
+                if (!isNullOrUndefined(li)) {
+                    this.setSelection(li, e);
+                    this.setScrollPosition();
+                }
             }
         }
     };
@@ -2765,6 +3072,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             if (isNullOrUndefined(this.list) && !this.isRequested && !isTabAction && e.action !== 'escape') {
                 this.searchKeyEvent = e;
                 this.renderList(e);
+                this.UpdateSkeleton();
+                this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.ulElement = this.list.querySelector('ul');
             }
             if (isNullOrUndefined(this.list) || (!isNullOrUndefined(this.liCollections) &&
                 isNavigation && this.liCollections.length === 0) || this.isRequested) {
@@ -2842,7 +3152,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
         if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
             this.setSelection(focusEle, e);
-            if (this.enableVirtualization) {
+            if (this.enableVirtualization && !this.fields.groupBy && this.getModuleName() !== 'combobox') {
                 var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
                 this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
             }
@@ -2870,7 +3180,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     }
                     else {
                         if (this.getModuleName() === 'autocomplete') {
-                            var value = this.selectedLI.dataset.value;
+                            var value = this.getFormattedValue(this.selectedLI.getAttribute('data-value'));
                             nextItem = this.getElementByValue(value);
                         }
                         else {
@@ -2882,26 +3192,75 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             if (!isNullOrUndefined(nextItem)) {
                 this.setSelection(nextItem, e);
             }
+            else if (this.enableVirtualization && !this.isPopupOpen && this.getModuleName() !== 'autocomplete' && ((this.viewPortInfo.endIndex !== this.totalItemCount && e.action === 'down') || (this.viewPortInfo.startIndex !== 0 && e.action === 'up'))) {
+                if (e.action === 'down') {
+                    this.viewPortInfo.startIndex = (this.viewPortInfo.startIndex + this.itemCount) < (this.totalItemCount - this.itemCount) ? this.viewPortInfo.startIndex + this.itemCount : this.totalItemCount - this.itemCount;
+                    this.viewPortInfo.endIndex = this.viewPortInfo.startIndex + this.itemCount;
+                    this.updateVirtualItemIndex();
+                    this.isCustomFilter = this.getModuleName() === 'combobox' ? true : this.isCustomFilter;
+                    this.resetList(this.dataSource, this.fields, this.query);
+                    this.isCustomFilter = this.getModuleName() === 'combobox' ? false : this.isCustomFilter;
+                    var value_2 = this.liCollections[0].getAttribute('data-value') !== "null" ? this.getFormattedValue(this.liCollections[0].getAttribute('data-value')) : null;
+                    var selectedData = this.getDataByValue(value_2);
+                    if (selectedData) {
+                        this.itemData = selectedData;
+                    }
+                }
+                else if (e.action === 'up') {
+                    this.viewPortInfo.startIndex = (this.viewPortInfo.startIndex - this.itemCount) > 0 ? this.viewPortInfo.startIndex - this.itemCount : 0;
+                    this.viewPortInfo.endIndex = this.viewPortInfo.startIndex + this.itemCount;
+                    this.updateVirtualItemIndex();
+                    this.isCustomFilter = this.getModuleName() === 'combobox' ? true : this.isCustomFilter;
+                    this.resetList(this.dataSource, this.fields, this.query);
+                    this.isCustomFilter = this.getModuleName() === 'combobox' ? false : this.isCustomFilter;
+                    var value_3 = this.liCollections[this.liCollections.length - 1].getAttribute('data-value') !== "null" ? this.getFormattedValue(this.liCollections[this.liCollections.length - 1].getAttribute('data-value')) : null;
+                    var selectedData = this.getDataByValue(value_3);
+                    if (selectedData) {
+                        this.itemData = selectedData;
+                    }
+                }
+                this.UpdateSkeleton();
+                this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.ulElement = this.list.querySelector('ul');
+                this.handleVirtualKeyboardActions(e, this.pageCount);
+            }
         }
         if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
-            var value_2 = this.getItemData().value;
-            var filterIndex = this.getIndexByValueFilter(value_2);
+            var value_4 = this.getItemData().value;
+            var filterIndex = this.getIndexByValueFilter(value_4);
             if (!isNullOrUndefined(filterIndex)) {
                 this.activeIndex = filterIndex;
             }
         }
         e.preventDefault();
     };
+    DropDownList.prototype.updateVirtualItemIndex = function () {
+        this.virtualItemStartIndex = this.viewPortInfo.startIndex;
+        this.virtualItemEndIndex = this.viewPortInfo.endIndex;
+        this.virtualListInfo = this.viewPortInfo;
+    };
     DropDownList.prototype.updateHomeEndAction = function (e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
             var findLi = 0;
             if (e.action === 'home') {
                 findLi = 0;
-                if (this.enableVirtualization) {
+                if (this.enableVirtualization && this.isPopupOpen) {
                     findLi = this.skeletonCount;
                 }
+                else if (this.enableVirtualization && !this.isPopupOpen && this.viewPortInfo.startIndex !== 0) {
+                    this.viewPortInfo.startIndex = 0;
+                    this.viewPortInfo.endIndex = this.itemCount;
+                    this.updateVirtualItemIndex();
+                    this.resetList(this.dataSource, this.fields, this.query);
+                }
             }
             else {
+                if (this.enableVirtualization && !this.isPopupOpen && this.viewPortInfo.endIndex !== this.totalItemCount) {
+                    this.viewPortInfo.startIndex = this.totalItemCount - this.itemCount;
+                    this.viewPortInfo.endIndex = this.totalItemCount;
+                    this.updateVirtualItemIndex();
+                    this.resetList(this.dataSource, this.fields, this.query);
+                }
                 findLi = this.getItems().length - 1;
             }
             e.preventDefault();
@@ -2997,12 +3356,6 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.isSelectFocusItem = function (element) {
         return !isNullOrUndefined(element);
     };
-    DropDownList.prototype.getPageCount = function (returnExactCount) {
-        var liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
-            getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
-        var pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
-        return returnExactCount ? pageCount : Math.round(pageCount);
-    };
     DropDownList.prototype.pageUpSelection = function (steps, event, isVirtualKeyAction) {
         var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
         if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
@@ -3265,7 +3618,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         .then(function (e) {
                         if (e.result.length > 0) {
                             _this.itemData = e.result[0];
-                            _this.setProperties({ 'text': e.result[0].text, 'value': e.result[0].value }, true);
+                            var dataItem = _this.getItemData();
+                            if ((_this.value === dataItem.value && _this.text !== dataItem.text) || (_this.value !== dataItem.value && _this.text === dataItem.text)) {
+                                _this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                            }
                         }
                     });
                 }
@@ -3273,7 +3629,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     var getItem = new DataManager(this.dataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', this.value)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
-                        this.setProperties({ 'text': getItem[0].text, 'value': getItem[0].value }, true);
+                        var dataItem = this.getItemData();
+                        if ((this.value === dataItem.value && this.text !== dataItem.text) || (this.value !== dataItem.value && this.text === dataItem.text)) {
+                            this.setProperties({ 'text': dataItem.text, 'value': dataItem.value });
+                        }
                     }
                 }
             }
@@ -3535,7 +3894,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                     this.typedString = this.filterInput.value;
                     this.preventAutoFill = false;
                     this.searchLists(e);
-                    if (this.enableVirtualization) {
+                    if ((this.enableVirtualization && this.getModuleName() !== 'autocomplete') || (this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {
                         this.getFilteringSkeletonCount();
                     }
                     break;
@@ -3550,19 +3909,28 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         var currentSkeletonCount = this.skeletonCount;
         this.getSkeletonCount(true);
         this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
+        var skeletonUpdated = true;
+        if (this.getModuleName() === 'autocomplete' && (this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2))) {
+            this.skeletonCount = 0;
+            skeletonUpdated = false;
+        }
         if (!this.list.classList.contains(dropDownBaseClasses.noData)) {
             var isSkeletonCountChange = currentSkeletonCount !== this.skeletonCount;
-            if (currentSkeletonCount !== this.skeletonCount) {
+            if (currentSkeletonCount !== this.skeletonCount && skeletonUpdated) {
                 this.UpdateSkeleton(true, Math.abs(currentSkeletonCount - this.skeletonCount));
             }
             else {
                 this.UpdateSkeleton();
             }
             this.liCollections = this.list.querySelectorAll('.e-list-item');
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+            if ((this.list.getElementsByClassName('e-virtual-ddl').length > 0)) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
+            }
+            if (this.list.getElementsByClassName('e-virtual-ddl-content').length > 0) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+            }
         }
     };
     DropDownList.prototype.getSkeletonCount = function (retainSkeleton) {
@@ -3615,12 +3983,26 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         else {
             filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
         }
-        if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0)) {
+        if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
             var takeValue = this.getTakeValue();
-            if (this.allowFiltering) {
+            var alreadySkipAdded = false;
+            if (filterQuery) {
+                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                        alreadySkipAdded = true;
+                        break;
+                    }
+                }
+            }
+            if (this.allowFiltering || !this.isPopupOpen || !alreadySkipAdded) {
                 filterQuery.skip(this.virtualItemStartIndex);
             }
-            filterQuery.take(takeValue);
+            if (this.isIncrementalRequest) {
+                filterQuery.take(this.incrementalEndIndex);
+            }
+            else {
+                filterQuery.take(takeValue);
+            }
             filterQuery.requiresCount();
         }
         return filterQuery;
@@ -3864,7 +4246,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
         var _this = this;
-        if (this.dataSource instanceof DataManager && !isNullOrUndefined(e)) {
+        if (this.dataSource instanceof DataManager && !isNullOrUndefined(e) && !this.virtualGroupDataSource) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.totalItemCount = e.count;
         }
@@ -3891,7 +4273,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 this.list.scrollTop = 0;
             }
             if (!isNullOrUndefined(ulElement)) {
-                attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
+                attributes(ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'listbox' });
             }
             if (this.initRemoteRender) {
                 this.initial = true;
@@ -4017,10 +4399,10 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.addNewItem = function (listData, newElement) {
         var _this = this;
         if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {
-            var value_3 = this.getItemData().value;
+            var value_5 = this.getItemData().value;
             var isExist = listData.some(function (data) {
-                return (((typeof data === 'string' || typeof data === 'number') && data === value_3) ||
-                    (getValue(_this.fields.value, data) === value_3));
+                return (((typeof data === 'string' || typeof data === 'number') && data === value_5) ||
+                    (getValue(_this.fields.value, data) === value_5));
             });
             if (!isExist) {
                 this.addItem(this.itemData);
@@ -4111,6 +4493,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
     DropDownList.prototype.GetVirtualTrackHeight = function () {
         var height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
         var heightDimension = "height: " + (height - this.itemCount * this.listItemHeight) + "px;";
+        if (this.getModuleName() === 'autocomplete' && this.skeletonCount === 0) {
+            return "height: 0px;";
+        }
         return heightDimension;
     };
     DropDownList.prototype.renderPopup = function (e) {
@@ -4125,6 +4510,8 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 var popupEle = _this.createElement('div', {
                     id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass !== null ? _this.cssClass : '')
                 });
+                popupEle.setAttribute('aria-label', _this.element.id);
+                popupEle.setAttribute('role', 'dialog');
                 var searchBox = _this.setSearchBox(popupEle);
                 _this.listHeight = formatUnit(_this.popupHeight);
                 if (_this.headerTemplate) {
@@ -4209,9 +4596,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                             parseInt(getComputedStyle(_this.inputElement.parentElement).borderLeftWidth, 10));
                     }
                 }
-                _this.getFocusElement();
                 _this.createPopup(popupEle, offsetValue, left);
                 _this.popupContentElement = _this.popupObj.element.querySelector('.e-content');
+                _this.getFocusElement();
                 _this.checkCollision(popupEle);
                 if (Browser.isDevice) {
                     _this.popupObj.element.classList.add(dropDownListClasses.device);
@@ -4251,7 +4638,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         enable: _this.enableVirtualization,
                     });
                     setTimeout(function () {
-                        if (_this.value) {
+                        if (_this.value || _this.list.querySelector('.e-active')) {
                             _this.updateSelectionList();
                             if (_this.selectedValueInfo && _this.viewPortInfo && _this.viewPortInfo.offsets.top) {
                                 _this.list.scrollTop = _this.viewPortInfo.offsets.top;
@@ -4262,8 +4649,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         }
                     }, 5);
                 }
-                attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_options' });
+                attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
                 _this.inputElement.setAttribute('aria-expanded', 'true');
+                _this.inputElement.setAttribute('aria-controls', _this.element.id);
                 var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;
                 addClass([inputParent], [dropDownListClasses.inputFocus]);
                 var animModel = { name: 'FadeIn', duration: 100 };
@@ -4328,7 +4716,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 _this.destroyPopup();
                 if (_this.isFiltering() && _this.actionCompleteData.list && _this.actionCompleteData.list[0]) {
                     _this.isActive = true;
-                    _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);
+                    if (_this.enableVirtualization) {
+                        _this.onActionComplete(_this.ulElement, _this.listData, null, true);
+                    }
+                    else {
+                        _this.onActionComplete(_this.actionCompleteData.ulElement, _this.actionCompleteData.list, null, true);
+                    }
                 }
             },
             open: function () {
@@ -4435,6 +4828,7 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         return width;
     };
     DropDownList.prototype.scrollBottom = function (isInitial, isInitialSelection, keyAction) {
+        var _this = this;
         if (isInitialSelection === void 0) { isInitialSelection = false; }
         if (keyAction === void 0) { keyAction = null; }
         if (isNullOrUndefined(this.selectedLI) && this.enableVirtualization) {
@@ -4499,6 +4893,11 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                 
             }
             this.isKeyBoardAction = isScrollerCHanged;
+            if (this.enableVirtualization && this.fields.groupBy && this.fixedHeaderElement && (keyAction == "down")) {
+                setTimeout(function () {
+                    _this.scrollStop(null, true);
+                }, 100);
+            }
         }
     };
     DropDownList.prototype.scrollTop = function (keyAction) {
@@ -4704,7 +5103,15 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
             this.actionCompleteData.ulElement = this.ulElement.cloneNode(true);
         }
-        var dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        var dataSourceCount;
+        if (this.dataSource instanceof DataManager) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            dataSourceCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        }
         if (this.enableVirtualization && this.isFiltering() && this.value != null && isFilterValue && this.totalItemCount !== dataSourceCount) {
             this.updateInitialData();
             this.checkAndResetCache();
@@ -4727,8 +5134,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         this.previousStartIndex = 0;
         this.previousEndIndex = 0;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        if (this.dataSource instanceof DataManager) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = this.dataCount = this.virtualGroupDataSource && this.virtualGroupDataSource.length ? this.virtualGroupDataSource.length : 0;
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.totalItemCount = this.dataCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.list.getElementsByClassName('e-virtual-ddl')[0]) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -4838,6 +5251,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         }
         else if (this.getModuleName() === 'dropdownlist') {
             attributes(this.targetElement(), { 'aria-label': this.getModuleName() });
+            this.inputElement.setAttribute('aria-label', this.getModuleName());
+            this.inputElement.setAttribute('aria-expanded', 'false');
+            this.inputElement.setAttribute('aria-controls', this.element.id + '_popups');
         }
         attributes(this.targetElement(), this.getAriaAttributes());
         this.updateDataAttribute(this.htmlAttributes);
@@ -5103,6 +5519,14 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         this_1.clearAll();
                         break;
                     }
+                    if (this_1.enableVirtualization) {
+                        this_1.updateValues();
+                        this_1.updateInputFields();
+                        this_1.notify("setCurrentViewDataAsync", {
+                            module: "VirtualScroll",
+                        });
+                        break;
+                    }
                     if (!this_1.list) {
                         if (this_1.dataSource instanceof DataManager) {
                             this_1.initRemoteRender = true;
@@ -5146,6 +5570,15 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
                         this_1.clearAll();
                         break;
                     }
+                    if (this_1.enableVirtualization) {
+                        this_1.updateValues();
+                        this_1.updateInputFields();
+                        this_1.notify("setCurrentViewDataAsync", {
+                            module: "VirtualScroll",
+                        });
+                        this_1.preventChange = this_1.isAngular && this_1.preventChange ? !this_1.preventChange : this_1.preventChange;
+                        break;
+                    }
                     this_1.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
                     if (!this_1.list) {
                         if (this_1.dataSource instanceof DataManager) {
@@ -5295,6 +5728,12 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
             }
         };
     };
+    DropDownList.prototype.updatePopupState = function () {
+        if (this.beforePopupOpen) {
+            this.beforePopupOpen = false;
+            this.showPopup();
+        }
+    };
     DropDownList.prototype.setReadOnly = function () {
         if (this.readonly) {
             addClass([this.inputWrapper.container], ['e-readonly']);
@@ -5427,6 +5866,9 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
         this.closePopup(0, e);
         var dataItem = this.getItemData();
         var isSelectVal = !isNullOrUndefined(this.selectedLI);
+        if (isSelectVal && this.enableVirtualization && this.selectedLI.classList) {
+            isSelectVal = this.selectedLI.classList.contains('e-active');
+        }
         if (this.inputElement && this.inputElement.value.trim() === '' && !this.isInteracted && (this.isSelectCustom ||
             isSelectVal && this.inputElement.value !== dataItem.text)) {
             this.isSelectCustom = false;
@@ -5676,25 +6118,25 @@ var DropDownList = /** @__PURE__ @class */ (function (_super) {
  * export all modules from current location
  */
 
-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';
@@ -5744,7 +6186,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;
@@ -5796,7 +6238,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;
@@ -5824,7 +6266,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;
@@ -5920,14 +6362,17 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
     DropDownTree.prototype.render = function () {
         var isTree = select('#' + this.element.id + '_tree', document);
         if (isTree) {
-            var popupDiv = select('#' + this.element.id + '_popup', document);
+            var popupDiv = select('#' + this.element.id + '_options', document);
             detach(popupDiv ? popupDiv : isTree.parentElement);
         }
         this.ensureAutoCheck();
         if (this.element.tagName === 'INPUT') {
             this.inputEle = this.element;
             if (isNullOrUndefined(this.inputEle.getAttribute('role'))) {
-                this.inputEle.setAttribute('role', 'textbox');
+                this.inputEle.setAttribute('aria-expanded', 'false');
+                this.inputEle.setAttribute('role', 'combobox');
+                this.inputEle.setAttribute('aria-haspopup', 'tree');
+                this.inputEle.setAttribute('aria-controls', this.element.id + "_options");
             }
             if (isNullOrUndefined(this.inputEle.getAttribute('type'))) {
                 this.inputEle.setAttribute('type', 'text');
@@ -6095,8 +6540,12 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 }
                 _this.treeObj.fields = _this.getTreeFields(fields);
                 _this.treeObj.dataBind();
-                if (_this.hasTemplate && _this.portals) {
-                    _this.portals = [].concat(_this.treeObj.portals);
+                if (_this.hasTemplate && _this.portals && _this.treeObj.portals) {
+                    for (var i = 0; i < _this.treeObj.portals.length; i++) {
+                        if (_this.portals.indexOf(_this.treeObj.portals[i]) == -1) {
+                            _this.portals.push(_this.treeObj.portals[i]);
+                        }
+                    }
                     if (_this.isReact) {
                         _this.renderReactTemplates();
                     }
@@ -6556,16 +7005,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.getAriaAttributes = function () {
-        var disable = this.enabled ? 'false' : 'true';
-        return {
-            'aria-disabled': disable,
-            'aria-owns': this.element.id + '_options',
-            'role': 'listbox',
-            'aria-haspopup': 'true',
-            'aria-expanded': 'false',
-            'aria-activedescendant': 'null',
-            'aria-labelledby': this.hiddenElement.id
-        };
+        return {};
     };
     DropDownTree.prototype.updateOverFlowView = function () {
         this.overFlowWrapper.classList.remove(TOTAL_COUNT_WRAPPER);
@@ -6916,7 +7356,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                     else {
-                        this.inputWrapper.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
+                        this.inputEle.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                     }
                 }
             }
@@ -7170,8 +7610,10 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 addClass([_this.inputWrapper], [ICONANIMATION]);
                 if (_this.isFirstRender) {
                     _this.popupEle = _this.createElement('div', {
-                        id: _this.element.id + '_popup', className: POPUP_CLASS + ' ' + (_this.cssClass != null ? _this.cssClass : '')
+                        id: _this.element.id + '_options', className: POPUP_CLASS + ' ' + (_this.cssClass != null ? _this.cssClass : '')
                     });
+                    _this.popupEle.setAttribute('role', 'region');
+                    _this.popupEle.setAttribute('aria-label', _this.element.id);
                     document.body.appendChild(_this.popupEle);
                     _this.createPopup(_this.popupEle);
                 }
@@ -7207,7 +7649,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                 }
             }
             if (!isCancelled) {
-                attributes(_this.inputWrapper, { 'aria-expanded': 'true' });
+                attributes(_this.inputEle, { 'aria-expanded': 'true' });
                 _this.popupObj.show(null, (_this.zIndex === 1000) ? _this.inputEle : null);
                 removeClass([_this.popupEle], DDTHIDEICON);
                 _this.updatePopupHeight();
@@ -7659,8 +8101,12 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.onNodeExpanded = function (args) {
-        if (this.hasTemplate && this.portals) {
-            this.portals = [].concat(this.treeObj.portals);
+        if (this.hasTemplate && this.portals && this.treeObj.portals) {
+            for (var i = 0; i < this.treeObj.portals.length; i++) {
+                if (this.portals.indexOf(this.treeObj.portals[i]) == -1) {
+                    this.portals.push(this.treeObj.portals[i]);
+                }
+            }
             /* eslint-enable */
             this.renderReactTemplates();
         }
@@ -8693,7 +9139,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
         if (this.popupEle) {
             addClass([this.popupEle], DDTHIDEICON);
         }
-        attributes(this.inputWrapper, { 'aria-expanded': 'false' });
+        attributes(this.inputEle, { 'aria-expanded': 'false' });
         if (this.popupObj && this.isPopupOpen) {
             this.popupObj.hide();
             if (this.inputFocus) {
@@ -8899,25 +9345,25 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
  * export all modules from current location
  */
 
-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;
+};
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../drop-down-list/drop-down-list-model.d.ts'/>
 var SPINNER_CLASS = 'e-atc-spinner-icon';
@@ -8942,7 +9388,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
@@ -9115,7 +9561,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
         if (this.isSelectCustom) {
             this.removeSelection();
         }
-        if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped) {
+        if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped && !this.enableVirtualization) {
             setTimeout(function () {
                 _this.inlineSearch();
             });
@@ -9124,7 +9570,7 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
     ComboBox.prototype.getFocusElement = function () {
         var dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
         var selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;
-        var isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);
+        var isSelected = dataItem.text && dataItem.text.toString() === this.inputElement.value && !isNullOrUndefined(selected);
         if (isSelected) {
             return selected;
         }
@@ -9134,6 +9580,70 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
             var dataSource = this.sortedData;
             var type = this.typeOfData(dataSource).typeof;
             var activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
+            if (this.enableVirtualization && inputValue !== '' && this.getModuleName() !== 'autocomplete' && this.isTyped && !this.allowFiltering) {
+                var updatingincrementalindex = false;
+                if ((this.viewPortInfo.endIndex >= this.incrementalEndIndex && this.incrementalEndIndex <= this.totalItemCount) || this.incrementalEndIndex == 0) {
+                    updatingincrementalindex = true;
+                    this.incrementalStartIndex = this.incrementalEndIndex;
+                    if (this.incrementalEndIndex == 0) {
+                        this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                    }
+                    else {
+                        this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                    }
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                }
+                if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                    this.updateIncrementalView(0, this.itemCount);
+                }
+                activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
+                while (isNullOrUndefined(activeItem) && this.incrementalEndIndex < this.totalItemCount) {
+                    this.incrementalStartIndex = this.incrementalEndIndex;
+                    this.incrementalEndIndex = this.incrementalEndIndex + 100 > this.totalItemCount ? this.totalItemCount : this.incrementalEndIndex + 100;
+                    this.updateIncrementalInfo(this.incrementalStartIndex, this.incrementalEndIndex);
+                    updatingincrementalindex = true;
+                    if (this.viewPortInfo.startIndex !== 0 || updatingincrementalindex) {
+                        this.updateIncrementalView(0, this.itemCount);
+                    }
+                    activeItem = Search(inputValue, this.incrementalLiCollections, this.filterType, true, dataSource, this.fields, type);
+                    if (!isNullOrUndefined(activeItem)) {
+                        break;
+                    }
+                    if (isNullOrUndefined(activeItem) && this.incrementalEndIndex >= this.totalItemCount) {
+                        this.incrementalStartIndex = 0;
+                        this.incrementalEndIndex = 100 > this.totalItemCount ? this.totalItemCount : 100;
+                        break;
+                    }
+                }
+                if (activeItem.index) {
+                    if ((!(this.viewPortInfo.startIndex >= activeItem.index)) || (!(activeItem.index >= this.viewPortInfo.endIndex))) {
+                        var startIndex = activeItem.index - ((this.itemCount / 2) - 2) > 0 ? activeItem.index - ((this.itemCount / 2) - 2) : 0;
+                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        if (startIndex != this.viewPortInfo.startIndex) {
+                            this.updateIncrementalView(startIndex, endIndex);
+                        }
+                    }
+                }
+                if (!isNullOrUndefined(activeItem.item)) {
+                    var index_1 = this.getIndexByValue(activeItem.item.getAttribute('data-value')) - this.skeletonCount;
+                    if (index_1 > this.itemCount / 2) {
+                        var startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;
+                        var endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        this.updateIncrementalView(startIndex, endIndex);
+                    }
+                    activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));
+                }
+                else {
+                    this.updateIncrementalView(0, this.itemCount);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                    this.list.scrollTop = 0;
+                }
+                if (activeItem && activeItem.item) {
+                    activeItem.item = this.getElementByValue(activeItem.item.getAttribute('data-value'));
+                }
+            }
             var activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 var count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -9144,6 +9654,14 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
                     if (!this.enableVirtualization) {
                         this.list.scrollTop = count * height + fixedHead;
                     }
+                    else {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
+                        if (this.enableVirtualization && !this.fields.groupBy) {
+                            var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? activeElement.offsetTop + (this.virtualListInfo.startIndex * activeElement.offsetHeight) : activeElement.offsetTop;
+                            this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * activeElement.offsetHeight);
+                        }
+                    }
                     addClass([activeElement], dropDownListClasses.focus);
                 }
             }
@@ -9767,25 +10285,25 @@ var ComboBox = /** @__PURE__ @class */ (function (_super) {
  * export all modules from current location
  */
 
-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;
+};
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../combo-box/combo-box-model.d.ts'/>
 dropDownListClasses.root = 'e-autocomplete';
@@ -9801,7 +10319,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
@@ -9843,7 +10361,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
             if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                 filterQuery.where('', filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
-            else {
+            else if ((!this.enableVirtualization) || (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource)))) {
                 var mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';
                 filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
@@ -9859,7 +10377,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
             }
             filterQuery.take(this.suggestionCount);
         }
-        if (this.enableVirtualization) {
+        if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
             var takeValue = this.getTakeValue();
             filterQuery.skip(this.virtualItemStartIndex);
             filterQuery.take(takeValue);
@@ -9941,7 +10459,7 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
                     document.getElementsByClassName('e-popup')[0].querySelector('.e-dropdownbase').appendChild(virualElement);
                 }
             }
-            if (this.enableVirtualization) {
+            if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {
                 this.getFilteringSkeletonCount();
             }
         }
@@ -9962,7 +10480,12 @@ var AutoComplete = /** @__PURE__ @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     AutoComplete.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
-        this.fixedHeaderElement = null;
+        if (!this.enableVirtualization) {
+            this.fixedHeaderElement = null;
+        }
+        if ((this.getModuleName() === 'autocomplete' && !(this.dataSource instanceof DataManager)) || (this.getModuleName() === 'autocomplete' && (this.dataSource instanceof DataManager) && this.totalItemCount != 0)) {
+            this.getFilteringSkeletonCount();
+        }
         _super.prototype.onActionComplete.call(this, ulElement, list, e);
         var item = this.list.querySelector('.' + dropDownListClasses.li);
         if (!isNullOrUndefined(item)) {
@@ -10398,25 +10921,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;
+};
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 var FOCUS = 'e-input-focus';
@@ -10473,7 +10996,7 @@ var FILTERINPUT = 'e-input-filter';
  * </script>
  * ```
  */
-var MultiSelect = /** @__PURE__ @class */ (function (_super) {
+var MultiSelect = /** @class */ (function (_super) {
     __extends$5(MultiSelect, _super);
     /**
      * Constructor for creating the DropDownList widget.
@@ -10646,7 +11169,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
                 if (_this.popupObj) {
                     _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
                 }
-                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });
+                attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.element.id + '_popup', 'aria-controls': _this.element.id });
                 _this.updateAriaActiveDescendant();
                 if (_this.isFirstClick) {
                     _this.loadTemplate();
@@ -10727,7 +11250,7 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
     };
     MultiSelect.prototype.updateListARIA = function () {
         if (!isNullOrUndefined(this.ulElement)) {
-            attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
+            attributes(this.ulElement, { 'id': this.element.id + '_options', 'role': 'listbox', 'aria-hidden': 'false', 'aria-label': 'list' });
         }
         var disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;
         if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {
@@ -14324,6 +14847,8 @@ var MultiSelect = /** @__PURE__ @class */ (function (_super) {
         this.setWidth(this.width);
         this.overAllWrapper.appendChild(this.componentWrapper);
         this.popupWrapper = this.createElement('div', { id: this.element.id + '_popup', className: POPUP_WRAPPER });
+        this.popupWrapper.setAttribute('aria-label', this.element.id);
+        this.popupWrapper.setAttribute('role', 'dialog');
         if (this.mode === 'Delimiter' || this.mode === 'CheckBox') {
             this.delimiterWrapper = this.createElement('span', { className: DELIMITER_WRAPPER, styles: 'display:none' });
             this.componentWrapper.appendChild(this.delimiterWrapper);
@@ -14797,7 +15322,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 = [];
@@ -15054,7 +15579,10 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
                 'role': 'combobox',
                 'autocomplete': 'off',
                 'autocapitalize': 'off',
-                'spellcheck': 'false'
+                'spellcheck': 'false',
+                'aria-label': 'multiselect',
+                'aria-expanded': 'true',
+                'aria-controls': args.popupElement.id
             });
             this.clearIconElement = this.filterInput.parentElement.querySelector('.' + clearIcon);
             if (!Browser.isDevice && this.clearIconElement) {
@@ -15293,31 +15821,31 @@ var CheckBoxSelection = /** @__PURE__ @class */ (function () {
  * export all modules from current location
  */
 
-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;
+};
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path='../drop-down-base/drop-down-base-model.d.ts'/>
 /**
  * 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;
@@ -15339,7 +15867,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;
@@ -15372,7 +15900,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.
@@ -15419,6 +15947,12 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
         var hiddenSelect = this.createElement('select', { className: 'e-hidden-select', attrs: { 'multiple': '' } });
         hiddenSelect.style.visibility = 'hidden';
         this.list.classList.add('e-listbox-wrapper');
+        this.list.querySelector('.e-list-parent').setAttribute('role', 'presentation');
+        var groupHdrs = this.list.querySelectorAll('.e-list-group-item');
+        for (var i = 0; i < groupHdrs.length; i++) {
+            groupHdrs[i].removeAttribute('tabindex');
+            groupHdrs[i].setAttribute('role', 'option');
+        }
         if (this.itemTemplate) {
             this.list.classList.add('e-list-template');
         }
@@ -16483,7 +17017,8 @@ var ListBox = /** @__PURE__ @class */ (function (_super) {
                 'autocomplete': 'off',
                 'autocorrect': 'off',
                 'autocapitalize': 'off',
-                'spellcheck': 'false'
+                'spellcheck': 'false',
+                'role': 'textbox'
             });
             if (this.height.toString().indexOf('%') < 0) {
                 addClass([this.list], 'e-filter-list');
@@ -17746,30 +18281,30 @@ var listBoxClasses = {
  * export all modules from current location
  */
 
-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
@@ -17890,6 +18425,7 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
             }
         }
         this.inputElement.setAttribute('role', 'textbox');
+        this.inputElement.setAttribute('aria-label', 'mention');
         this.queryString = this.elementValue();
         this.wireEvent();
     };
@@ -18200,7 +18736,10 @@ var Mention = /** @__PURE__ @class */ (function (_super) {
                 var value = this.getFormattedValue(focusItem.getAttribute('data-value'));
                 this.selectEventCallback(focusItem, this.getDataByValue(value), value, true);
             }
-            if (this.beforePopupOpen) {
+            if (this.beforePopupOpen && this.isPopupOpen) {
+                if (this.initRemoteRender && !isNullOrUndefined(this.popupObj.element)) {
+                    this.popupObj.element.remove();
+                }
                 this.renderPopup();
             }
         }