@syncfusion/ej2-dropdowns 23.2.7-52849 → 24.1.41-566987

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

@@ -12,6 +12,7 @@ import { TreeView } from '@syncfusion/ej2-navigations';
  */
 let queryString = '';
 let prevString = '';
+let tempQueryString = '';
 let matches$1 = [];
 const activeClass = 'e-active';
 let prevElementId = '';
@@ -26,21 +27,49 @@ let 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(() => {
-        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);
+    }
     let index;
     queryString = ignoreCase ? queryString.toLowerCase() : queryString;
-    if (prevElementId === elementId && prevString === queryString) {
+    if (prevElementId === elementId && prevString === queryString && !refresh) {
         for (let 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 (let i = 0; i < matches$1.length; i++) {
+                if (currentValue && matches$1[i].textContent.toLowerCase() === currentValue.toLowerCase()) {
+                    index = i;
+                    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;
@@ -296,9 +339,24 @@ class VirtualScroll {
                 query = this.getPageQuery(query, virtualItemStartIndex, virtualItemEndIndex);
             }
         }
+        const tempCustomFilter = this.parent.isCustomFilter;
+        if (this.component === 'combobox') {
+            let 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;
     }
     removeSkipAndTakeEvents(query) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         query.queries = query.queries.filter(function (event) {
             return event.fn !== 'onSkip' && event.fn !== 'onTake';
         });
@@ -327,6 +385,9 @@ class VirtualScroll {
         if (virtualContentElement) {
             (virtualContentElement).style = this.parent.getTransformValues();
         }
+        if (this.parent.fields.groupBy) {
+            this.parent.scrollStop();
+        }
     }
     generateQueryAndSetQueryIndexAsync(query, isPopupOpen) {
         let isStartIndexInitialised = false;
@@ -374,6 +435,9 @@ class VirtualScroll {
                 }
                 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;
+                    }
                 }
             }
             yield this.dataProcessAsync();
@@ -599,6 +663,9 @@ let DropDownBase = class DropDownBase extends Component {
         this.virtualizedItemsCount = 0;
         this.totalItemCount = 0;
         this.dataCount = 0;
+        this.isRemoteDataUpdated = false;
+        this.isIncrementalRequest = false;
+        this.itemCount = 10;
     }
     getPropObject(prop, newProp, oldProp) {
         const newProperty = new Object();
@@ -990,7 +1057,7 @@ let DropDownBase = class DropDownBase extends Component {
                 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);
@@ -999,12 +1066,42 @@ let DropDownBase = class DropDownBase extends Component {
                         eventArgs.data.executeQuery(this.getQuery(eventArgs.query)).then((e) => {
                             this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
                             this.trigger('actionComplete', e, (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) {
+                                        let dataSource = e.result;
+                                        if (this.isVirtualizationEnabled && this.fields.groupBy) {
+                                            let data = new DataManager(dataSource).executeLocal(new Query().group(this.fields.groupBy));
+                                            this.virtualGroupDataSource = data.records;
+                                        }
+                                        else {
+                                            this.virtualGroupDataSource = dataSource;
+                                            this.hideSpinner();
+                                            this.isRequested = false;
+                                            this.isRequesting = false;
+                                            this.setListData(dataSource, fields, query, event);
+                                            return;
+                                        }
+                                    }
+                                    this.hideSpinner();
+                                    this.isRequested = false;
+                                    this.isRequesting = false;
+                                    this.updatePopupState();
+                                    return;
+                                }
                                 if (!e.cancel) {
+                                    this.isRequesting = false;
                                     const listItems = e.result;
+                                    if (this.isIncrementalRequest) {
+                                        ulElement = this.renderItems(listItems, fields);
+                                        return;
+                                    }
                                     if (listItems.length === 0) {
                                         this.isDataFetched = true;
                                     }
-                                    this.isRequesting = false;
                                     this.dataCount = e.count;
                                     this.totalItemCount = e.count;
                                     ulElement = this.renderItems(listItems, fields);
@@ -1025,8 +1122,25 @@ let DropDownBase = class DropDownBase extends Component {
                     }
                     else {
                         this.isRequesting = false;
-                        const dataManager = new DataManager(eventArgs.data);
-                        let listItems = (this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        let listItems;
+                        if (this.isVirtualizationEnabled && !this.virtualGroupDataSource && this.fields.groupBy) {
+                            let data = new DataManager(this.dataSource).executeLocal(new Query().group(this.fields.groupBy));
+                            this.virtualGroupDataSource = data.records;
+                        }
+                        let 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))) {
+                            let newQuery = this.getQuery(eventArgs.query);
+                            if (newQuery) {
+                                for (let 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
@@ -1036,6 +1150,10 @@ let DropDownBase = class DropDownBase extends Component {
                         const localDataArgs = { cancel: false, result: listItems };
                         this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
                         this.trigger('actionComplete', localDataArgs, (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);
@@ -1055,6 +1173,12 @@ let DropDownBase = class DropDownBase extends Component {
             });
         }
     }
+    updatePopupState() {
+        // Used this method in component side.
+    }
+    updateRemoteData() {
+        this.setListData(this.dataSource, this.fields, this.query);
+    }
     bindChildItems(listItems, ulElement, fields, e) {
         if (listItems.length >= 100 && this.getModuleName() === 'autocomplete') {
             setTimeout(() => {
@@ -1109,6 +1233,7 @@ let DropDownBase = class DropDownBase extends Component {
         const listItems = [];
         this.onActionComplete(this.renderItems(listItems, fields), listItems);
         this.isRequested = false;
+        this.isRequesting = false;
         this.hideSpinner();
     }
     showSpinner() {
@@ -1141,7 +1266,9 @@ let DropDownBase = class DropDownBase extends Component {
         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 (let i = 0; i < ulElement.childElementCount; i++) {
                 if (ulElement.children[i].classList.contains('e-list-group-item')) {
@@ -1282,25 +1409,67 @@ let DropDownBase = class DropDownBase extends Component {
             this.scrollStop(e);
         }
     }
-    scrollStop(e) {
+    scrollStop(e, isDownkey) {
         const target = !isNullOrUndefined(e) ? e.target : this.list;
         const liHeight = parseInt(getComputedStyle(this.getValidLi(), null).getPropertyValue('height'), 10);
         const topIndex = Math.round(target.scrollTop / liHeight);
         const liCollections = this.list.querySelectorAll('li' + ':not(.e-hide-listitem)');
+        let virtualListCount = this.list.querySelectorAll('.e-virtual-list').length;
+        let count = 0;
+        let isCount = false;
         for (let i = topIndex; i > -1; i--) {
-            if (!isNullOrUndefined(liCollections[i]) && liCollections[i].classList.contains(dropDownBaseClasses.group)) {
-                const currentLi = liCollections[i];
-                this.fixedHeaderElement.innerHTML = currentLi.innerHTML;
-                this.fixedHeaderElement.style.top = target.scrollTop + 'px';
-                this.fixedHeaderElement.style.display = 'block';
-                break;
+            const index = this.isVirtualizationEnabled ? i + virtualListCount : i;
+            if (this.isVirtualizationEnabled) {
+                const groupListLength = this.list.querySelectorAll('.e-list-group-item').length;
+                let 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;
+                }
             }
         }
     }
+    getPageCount(returnExactCount) {
+        const liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
+            getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
+        let pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
+        return returnExactCount ? pageCount : Math.round(pageCount);
+    }
+    updateGroupHeader(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;
+        }
+    }
+    updateGroupFixedHeader(element, target) {
+        this.fixedHeaderElement.innerHTML = element.innerHTML;
+        this.fixedHeaderElement.style.top = target.scrollTop + 'px';
+        this.fixedHeaderElement.style.display = 'block';
+    }
     getValidLi() {
         return this.liCollections[0];
     }
@@ -1334,45 +1503,54 @@ let DropDownBase = class DropDownBase extends Component {
                 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;
     }
+    createVirtualContent() {
+        if (!this.list.querySelector('.e-virtual-ddl-content')) {
+            this.list.appendChild(this.createElement('div', {
+                className: 'e-virtual-ddl-content',
+            }));
+        }
+    }
+    updateListElements(listData) {
+        this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+        this.ulElement = this.list.querySelector('ul');
+        this.listData = listData;
+        this.postRender(this.list, listData, this.bindEvent);
+    }
     templateListItem(dataSource, fields) {
         const option = this.listOption(dataSource, fields);
         option.templateID = this.itemTemplateId;
@@ -1444,11 +1622,11 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {string | number | boolean} value - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
-    getIndexByValueFilter(value) {
+    getIndexByValue(value) {
         let index;
-        const listItems = this.renderItems(this.selectData, this.fields);
-        for (let i = 0; i < listItems.children.length; i++) {
-            if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
+        const listItems = this.getItems();
+        for (let i = 0; i < listItems.length; i++) {
+            if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
                 index = i;
                 break;
             }
@@ -1461,11 +1639,11 @@ let DropDownBase = class DropDownBase extends Component {
      * @param {string | number | boolean} value - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
-    getIndexByValue(value) {
+    getIndexByValueFilter(value) {
         let index;
-        const listItems = this.getItems();
-        for (let i = 0; i < listItems.length; i++) {
-            if (!isNullOrUndefined(value) && listItems[i].getAttribute('data-value') === value.toString()) {
+        const listItems = this.renderItems(this.selectData, this.fields);
+        for (let i = 0; i < listItems.children.length; i++) {
+            if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
                 index = i;
                 break;
             }
@@ -2012,7 +2190,6 @@ let DropDownList = class DropDownList extends DropDownBase {
         this.isListSearched = false;
         this.preventChange = false;
         this.isAngular = false;
-        this.itemCount = 10;
         this.virtualListHeight = 0;
         this.isVirtualScrolling = false;
         this.isPreventScrollAction = false;
@@ -2027,6 +2204,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         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,
@@ -2135,8 +2316,10 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     renderList(e, isEmptyData) {
         super.render(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();
     }
@@ -2598,12 +2781,136 @@ let DropDownList = class DropDownList extends DropDownBase {
     isValidLI(li) {
         return (li && li.hasAttribute('role') && li.getAttribute('role') === 'option');
     }
+    updateIncrementalInfo(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;
+    }
+    updateIncrementalView(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');
+    }
+    updateIncrementalItemIndex(startIndex, endIndex) {
+        this.incrementalStartIndex = startIndex;
+        this.incrementalEndIndex = endIndex;
+    }
     incrementalSearch(e) {
         if (this.liCollections.length > 0) {
-            const 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);
+                }
+                let 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))) {
+                        let startIndex = index - ((this.itemCount / 2) - 2) > 0 ? index - ((this.itemCount / 2) - 2) : 0;
+                        let endIndex = this.viewPortInfo.startIndex + this.itemCount > this.totalItemCount ? this.totalItemCount : this.viewPortInfo.startIndex + this.itemCount;
+                        this.updateIncrementalView(startIndex, endIndex);
+                    }
+                }
+                if (!isNullOrUndefined(li)) {
+                    let index = this.getIndexByValue(li.getAttribute('data-value')) - this.skeletonCount;
+                    if (index > this.itemCount / 2) {
+                        let startIndex = this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) < this.totalItemCount ? this.viewPortInfo.startIndex + ((this.itemCount / 2) - 2) : this.totalItemCount;
+                        let 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 {
+                const li = incrementalSearch(e.charCode, this.liCollections, this.activeIndex, true, this.element.id);
+                if (!isNullOrUndefined(li)) {
+                    this.setSelection(li, e);
+                    this.setScrollPosition();
+                }
             }
         }
     }
@@ -2659,6 +2966,9 @@ let DropDownList = class DropDownList extends DropDownBase {
             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) {
@@ -2736,7 +3046,7 @@ let DropDownList = class DropDownList extends DropDownBase {
         const 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') {
                 let 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);
             }
@@ -2764,7 +3074,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     }
                     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 {
@@ -2776,6 +3086,38 @@ let DropDownList = class DropDownList extends DropDownBase {
             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;
+                    const value = this.liCollections[0].getAttribute('data-value') !== "null" ? this.getFormattedValue(this.liCollections[0].getAttribute('data-value')) : null;
+                    const selectedData = this.getDataByValue(value);
+                    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;
+                    const value = this.liCollections[this.liCollections.length - 1].getAttribute('data-value') !== "null" ? this.getFormattedValue(this.liCollections[this.liCollections.length - 1].getAttribute('data-value')) : null;
+                    const selectedData = this.getDataByValue(value);
+                    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') {
             let value = this.getItemData().value;
@@ -2786,16 +3128,33 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         e.preventDefault();
     }
+    updateVirtualItemIndex() {
+        this.virtualItemStartIndex = this.viewPortInfo.startIndex;
+        this.virtualItemEndIndex = this.viewPortInfo.endIndex;
+        this.virtualListInfo = this.viewPortInfo;
+    }
     updateHomeEndAction(e, isVirtualKeyAction) {
         if (this.getModuleName() === 'dropdownlist') {
             let 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();
@@ -2891,12 +3250,6 @@ let DropDownList = class DropDownList extends DropDownBase {
     isSelectFocusItem(element) {
         return !isNullOrUndefined(element);
     }
-    getPageCount(returnExactCount) {
-        const liHeight = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
-            getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
-        let pageCount = Math.round(this.list.getBoundingClientRect().height / parseInt(liHeight, 10));
-        return returnExactCount ? pageCount : Math.round(pageCount);
-    }
     pageUpSelection(steps, event, isVirtualKeyAction) {
         let previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
         if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
@@ -3157,7 +3510,10 @@ let DropDownList = class DropDownList extends DropDownBase {
                         .then((e) => {
                         if (e.result.length > 0) {
                             this.itemData = e.result[0];
-                            this.setProperties({ 'text': e.result[0].text, 'value': e.result[0].value }, true);
+                            const 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 });
+                            }
                         }
                     });
                 }
@@ -3165,7 +3521,10 @@ let DropDownList = class DropDownList extends DropDownBase {
                     const 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);
+                        const 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 });
+                        }
                     }
                 }
             }
@@ -3427,7 +3786,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                     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;
@@ -3442,19 +3801,28 @@ let DropDownList = class DropDownList extends DropDownBase {
         const currentSkeletonCount = this.skeletonCount;
         this.getSkeletonCount(true);
         this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : difference > this.skeletonCount ? this.skeletonCount : difference > 0 ? difference : 0;
+        let 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)) {
             const 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();
+            }
         }
     }
     getSkeletonCount(retainSkeleton) {
@@ -3507,12 +3875,26 @@ let DropDownList = class DropDownList extends DropDownBase {
         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;
@@ -3753,7 +4135,7 @@ let DropDownList = class DropDownList extends DropDownBase {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActionComplete(ulElement, list, e, isUpdated) {
-        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;
         }
@@ -3780,7 +4162,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                 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;
@@ -3996,6 +4378,9 @@ let DropDownList = class DropDownList extends DropDownBase {
     GetVirtualTrackHeight() {
         const height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
         const heightDimension = `height: ${height - this.itemCount * this.listItemHeight}px;`;
+        if (this.getModuleName() === 'autocomplete' && this.skeletonCount === 0) {
+            return "height: 0px;";
+        }
         return heightDimension;
     }
     renderPopup(e) {
@@ -4009,6 +4394,8 @@ let DropDownList = class DropDownList extends DropDownBase {
                 const 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');
                 const searchBox = this.setSearchBox(popupEle);
                 this.listHeight = formatUnit(this.popupHeight);
                 if (this.headerTemplate) {
@@ -4093,9 +4480,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                             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);
@@ -4134,7 +4521,7 @@ let DropDownList = class DropDownList extends DropDownBase {
                         enable: this.enableVirtualization,
                     });
                     setTimeout(() => {
-                        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;
@@ -4145,8 +4532,9 @@ let DropDownList = class DropDownList extends DropDownBase {
                         }
                     }, 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);
                 const inputParent = this.isFiltering() ? this.filterInput.parentElement : this.inputWrapper.container;
                 addClass([inputParent], [dropDownListClasses.inputFocus]);
                 const animModel = { name: 'FadeIn', duration: 100 };
@@ -4210,7 +4598,12 @@ let DropDownList = class DropDownList extends DropDownBase {
                 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: () => {
@@ -4379,6 +4772,11 @@ let DropDownList = class DropDownList extends DropDownBase {
                 
             }
             this.isKeyBoardAction = isScrollerCHanged;
+            if (this.enableVirtualization && this.fields.groupBy && this.fixedHeaderElement && (keyAction == "down")) {
+                setTimeout(() => {
+                    this.scrollStop(null, true);
+                }, 100);
+            }
         }
     }
     scrollTop(keyAction = null) {
@@ -4581,7 +4979,15 @@ let DropDownList = class DropDownList extends DropDownBase {
         if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
             this.actionCompleteData.ulElement = this.ulElement.cloneNode(true);
         }
-        const dataSourceCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
+        let 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();
@@ -4604,8 +5010,14 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         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
@@ -4715,6 +5127,9 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         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);
@@ -4979,6 +5394,14 @@ let DropDownList = class DropDownList extends DropDownBase {
                         this.clearAll();
                         break;
                     }
+                    if (this.enableVirtualization) {
+                        this.updateValues();
+                        this.updateInputFields();
+                        this.notify("setCurrentViewDataAsync", {
+                            module: "VirtualScroll",
+                        });
+                        break;
+                    }
                     if (!this.list) {
                         if (this.dataSource instanceof DataManager) {
                             this.initRemoteRender = true;
@@ -5022,6 +5445,15 @@ let DropDownList = class DropDownList extends DropDownBase {
                         this.clearAll();
                         break;
                     }
+                    if (this.enableVirtualization) {
+                        this.updateValues();
+                        this.updateInputFields();
+                        this.notify("setCurrentViewDataAsync", {
+                            module: "VirtualScroll",
+                        });
+                        this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;
+                        break;
+                    }
                     this.notify('beforeValueChange', { newProp: newProp }); // gird component value type change
                     if (!this.list) {
                         if (this.dataSource instanceof DataManager) {
@@ -5165,6 +5597,12 @@ let DropDownList = class DropDownList extends DropDownBase {
             }
         };
     }
+    updatePopupState() {
+        if (this.beforePopupOpen) {
+            this.beforePopupOpen = false;
+            this.showPopup();
+        }
+    }
     setReadOnly() {
         if (this.readonly) {
             addClass([this.inputWrapper.container], ['e-readonly']);
@@ -5296,7 +5734,10 @@ let DropDownList = class DropDownList extends DropDownBase {
         }
         this.closePopup(0, e);
         const dataItem = this.getItemData();
-        const isSelectVal = !isNullOrUndefined(this.selectedLI);
+        let 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;
@@ -5764,14 +6205,17 @@ let DropDownTree = class DropDownTree extends Component {
     render() {
         const isTree = select('#' + this.element.id + '_tree', document);
         if (isTree) {
-            const popupDiv = select('#' + this.element.id + '_popup', document);
+            const 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');
@@ -5937,8 +6381,12 @@ let DropDownTree = class DropDownTree extends Component {
                 }
                 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 (let 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();
                     }
@@ -6395,16 +6843,7 @@ let DropDownTree = class DropDownTree extends Component {
         }
     }
     getAriaAttributes() {
-        const 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 {};
     }
     updateOverFlowView() {
         this.overFlowWrapper.classList.remove(TOTAL_COUNT_WRAPPER);
@@ -6753,7 +7192,7 @@ let DropDownTree = class DropDownTree extends Component {
                         }
                     }
                     else {
-                        this.inputWrapper.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
+                        this.inputEle.setAttribute(htmlAttr, this.htmlAttributes[`${htmlAttr}`]);
                     }
                 }
             }
@@ -7005,8 +7444,10 @@ let DropDownTree = class DropDownTree extends Component {
                 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);
                 }
@@ -7042,7 +7483,7 @@ let DropDownTree = class DropDownTree extends Component {
                 }
             }
             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();
@@ -7493,8 +7934,12 @@ let DropDownTree = class DropDownTree extends Component {
         }
     }
     onNodeExpanded(args) {
-        if (this.hasTemplate && this.portals) {
-            this.portals = [].concat(this.treeObj.portals);
+        if (this.hasTemplate && this.portals && this.treeObj.portals) {
+            for (let 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();
         }
@@ -8526,7 +8971,7 @@ let DropDownTree = class DropDownTree extends Component {
         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) {
@@ -8932,7 +9377,7 @@ let ComboBox = class ComboBox extends DropDownList {
         if (this.isSelectCustom) {
             this.removeSelection();
         }
-        if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped) {
+        if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped && !this.enableVirtualization) {
             setTimeout(() => {
                 this.inlineSearch();
             });
@@ -8941,7 +9386,7 @@ let ComboBox = class ComboBox extends DropDownList {
     getFocusElement() {
         const dataItem = this.isSelectCustom ? { text: '' } : this.getItemData();
         const selected = !isNullOrUndefined(this.list) ? this.list.querySelector('.' + dropDownListClasses.selected) : this.list;
-        const isSelected = dataItem.text === this.inputElement.value && !isNullOrUndefined(selected);
+        const isSelected = dataItem.text && dataItem.text.toString() === this.inputElement.value && !isNullOrUndefined(selected);
         if (isSelected) {
             return selected;
         }
@@ -8950,7 +9395,71 @@ let ComboBox = class ComboBox extends DropDownList {
             const inputValue = this.inputElement.value;
             const dataSource = this.sortedData;
             const type = this.typeOfData(dataSource).typeof;
-            const activeItem = Search(inputValue, this.liCollections, this.filterType, true, dataSource, this.fields, type);
+            let 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'));
+                }
+            }
             const activeElement = activeItem.item;
             if (!isNullOrUndefined(activeElement)) {
                 const count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
@@ -8961,6 +9470,14 @@ let ComboBox = class ComboBox extends DropDownList {
                     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);
                 }
             }
@@ -9641,7 +10158,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
             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)))) {
                 const mapping = !isNullOrUndefined(this.fields.value) ? this.fields.value : '';
                 filterQuery.where(mapping, filterType, queryString, this.ignoreCase, this.ignoreAccent);
             }
@@ -9657,7 +10174,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
             }
             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);
@@ -9738,7 +10255,7 @@ let AutoComplete = class AutoComplete extends ComboBox {
                     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();
             }
         }
@@ -9759,7 +10276,12 @@ let AutoComplete = class AutoComplete extends ComboBox {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActionComplete(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.onActionComplete(ulElement, list, e);
         const item = this.list.querySelector('.' + dropDownListClasses.li);
         if (!isNullOrUndefined(item)) {
@@ -10423,7 +10945,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
                 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();
@@ -10504,7 +11026,7 @@ let MultiSelect = class MultiSelect extends DropDownBase {
     }
     updateListARIA() {
         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' });
         }
         const disableStatus = !isNullOrUndefined(this.inputElement) && (this.inputElement.disabled) ? true : false;
         if (!this.isPopupOpen() && !isNullOrUndefined(this.inputElement)) {
@@ -14084,6 +14606,8 @@ let MultiSelect = class MultiSelect extends DropDownBase {
         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);
@@ -14811,7 +15335,10 @@ class CheckBoxSelection {
                 '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) {
@@ -15149,6 +15676,12 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
         const 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');
+        const groupHdrs = this.list.querySelectorAll('.e-list-group-item');
+        for (let 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');
         }
@@ -16195,7 +16728,8 @@ let ListBox = ListBox_1 = class ListBox extends DropDownBase {
                 'autocomplete': 'off',
                 'autocorrect': 'off',
                 'autocapitalize': 'off',
-                'spellcheck': 'false'
+                'spellcheck': 'false',
+                'role': 'textbox'
             });
             if (this.height.toString().indexOf('%') < 0) {
                 addClass([this.list], 'e-filter-list');
@@ -17569,6 +18103,7 @@ let Mention = class Mention extends DropDownBase {
             }
         }
         this.inputElement.setAttribute('role', 'textbox');
+        this.inputElement.setAttribute('aria-label', 'mention');
         this.queryString = this.elementValue();
         this.wireEvent();
     }
@@ -17878,7 +18413,10 @@ let Mention = class Mention extends DropDownBase {
                 const 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();
             }
         }