@syncfusion/ej2-dropdowns 23.2.7 → 24.1.41

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;
@@ -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()];
@@ -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') {
@@ -1226,7 +1350,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 +1493,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 +1587,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 +1706,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 +1723,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;
             }
@@ -2115,7 +2292,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 +2306,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 +2419,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 +2886,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 +3071,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 +3151,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 +3179,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 +3191,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 +3355,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 +3617,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 +3628,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 +3893,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 +3908,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 +3982,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 +4245,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 +4272,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 +4398,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 +4492,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 +4509,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 +4595,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 +4637,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 +4648,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 +4715,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 +4827,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 +4892,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 +5102,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 +5133,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 +5250,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 +5518,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 +5569,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 +5727,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 +5865,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;
@@ -5920,14 +6361,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 +6539,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 +7004,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 +7355,7 @@ var DropDownTree = /** @__PURE__ @class */ (function (_super) {
                         }
                     }
                     else {
-                        this.inputWrapper.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
+                        this.inputEle.setAttribute(htmlAttr, this.htmlAttributes["" + htmlAttr]);
                     }
                 }
             }
@@ -7170,8 +7609,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 +7648,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 +8100,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 +9138,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) {
@@ -9115,7 +9560,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 +9569,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 +9579,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 +9653,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);
                 }
             }
@@ -9843,7 +10360,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 +10376,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 +10458,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 +10479,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)) {
@@ -10646,7 +11168,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 +11249,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 +14846,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);
@@ -15054,7 +15578,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) {
@@ -15419,6 +15946,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 +17016,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');
@@ -17890,6 +18424,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 +18735,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();
             }
         }