@syncfusion/ej2-dropdowns 25.1.37 → 25.1.39

package/dist/global/index.d.ts

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@25.1.35",
+  "_id": "@syncfusion/ej2-dropdowns@25.1.37",
   "_inBundle": false,
-  "_integrity": "sha512-o2qsZbMu76zBnvXhSDdsN7R18mJhycMuJ9jXY5rrsQtS0S1XucOAXQA/RjxFP72CCbcmWOrvk9nVpZUhFEZ4+Q==",
+  "_integrity": "sha512-mhkVQdSPfHiI3IWloRnDEpl4Zpov6PyJV+2YDZlNI0wN6T0+l5/qgIA/sZrUtYkOJqVFtmRO4zY7ObZf6V0BJQ==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -34,8 +34,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-25.1.35.tgz",
-  "_shasum": "1c83db7b666f57c583f0a5f82bc2930514811f9d",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-25.1.37.tgz",
+  "_shasum": "b6d5a0912a9b0892cd7d87c466b08709aa0aed14",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
@@ -45,11 +45,11 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~25.1.35",
     "@syncfusion/ej2-data": "~25.1.35",
-    "@syncfusion/ej2-inputs": "~25.1.37",
-    "@syncfusion/ej2-lists": "~25.1.35",
-    "@syncfusion/ej2-navigations": "~25.1.37",
+    "@syncfusion/ej2-inputs": "~25.1.38",
+    "@syncfusion/ej2-lists": "~25.1.39",
+    "@syncfusion/ej2-navigations": "~25.1.39",
     "@syncfusion/ej2-notifications": "~25.1.35",
-    "@syncfusion/ej2-popups": "~25.1.35"
+    "@syncfusion/ej2-popups": "~25.1.39"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -74,7 +74,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "25.1.37",
+  "version": "25.1.39",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -78,7 +78,12 @@ var AutoComplete = /** @class */ (function (_super) {
         var filterType = (this.queryString === '' && !isNullOrUndefined(value)) ? 'equal' : this.filterType;
         var queryString = (this.queryString === '' && !isNullOrUndefined(value)) ? value : this.queryString;
         if (this.isFiltered) {
-            return filterQuery;
+            if ((this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery))) {
+                filterQuery = this.customFilterQuery.clone();
+            }
+            else if (!this.enableVirtualization) {
+                return filterQuery;
+            }
         }
         if (this.queryString !== null && this.queryString !== '') {
             var dataType = this.typeOfData(this.dataSource).typeof;
@@ -104,48 +109,61 @@ var AutoComplete = /** @class */ (function (_super) {
         if (this.enableVirtualization && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
             var queryTakeValue = 0;
             var querySkipValue = 0;
-            if (this.query && this.query.queries.length > 0) {
-                for (var queryElements = 0; queryElements < this.query.queries.length; queryElements++) {
-                    if (this.query.queries[queryElements].fn === 'onSkip') {
-                        querySkipValue = this.query.queries[queryElements].e.nos;
+            var takeValue = this.getTakeValue();
+            if (filterQuery && filterQuery.queries.length > 0) {
+                for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                    if (filterQuery.queries[queryElements].fn === 'onSkip') {
+                        querySkipValue = filterQuery.queries[queryElements].e.nos;
                     }
+                    if (filterQuery.queries[queryElements].fn === 'onTake') {
+                        queryTakeValue = takeValue <= filterQuery.queries[queryElements].e.nos ? filterQuery.queries[queryElements].e.nos : takeValue;
+                    }
+                }
+            }
+            if (queryTakeValue <= 0 && this.query && this.query.queries.length > 0) {
+                for (var queryElements = 0; queryElements < this.query.queries.length; queryElements++) {
                     if (this.query.queries[queryElements].fn === 'onTake') {
                         queryTakeValue = takeValue <= this.query.queries[queryElements].e.nos ? this.query.queries[queryElements].e.nos : takeValue;
                     }
                 }
             }
-            var skipExists = false;
-            var takeExists = false;
             if (filterQuery && filterQuery.queries.length > 0) {
                 for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
                     if (filterQuery.queries[queryElements].fn === 'onSkip') {
-                        skipExists = true;
+                        querySkipValue = filterQuery.queries[queryElements].e.nos;
+                        filterQuery.queries.splice(queryElements, 1);
+                        --queryElements;
+                        continue;
                     }
                     if (filterQuery.queries[queryElements].fn === 'onTake') {
-                        takeExists = true;
-                        filterQuery.queries[queryElements].e.nos = filterQuery.queries[queryElements].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements].e.nos;
+                        queryTakeValue = filterQuery.queries[queryElements].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements].e.nos;
+                        filterQuery.queries.splice(queryElements, 1);
+                        --queryElements;
                     }
                 }
             }
-            var takeValue = this.getTakeValue();
-            if (!skipExists) {
-                if (querySkipValue > 0 && this.virtualItemStartIndex <= querySkipValue) {
-                    filterQuery.skip(querySkipValue);
-                }
-                else {
-                    filterQuery.skip(this.virtualItemStartIndex);
-                }
+            if (querySkipValue > 0 && this.virtualItemStartIndex <= querySkipValue) {
+                filterQuery.skip(querySkipValue);
             }
-            if (!takeExists) {
-                if (queryTakeValue > 0 && takeValue <= queryTakeValue) {
-                    filterQuery.take(queryTakeValue);
-                }
-                else {
-                    filterQuery.take(takeValue);
-                }
+            else {
+                filterQuery.skip(this.virtualItemStartIndex);
+            }
+            if (queryTakeValue > 0 && takeValue <= queryTakeValue) {
+                filterQuery.take(queryTakeValue);
+            }
+            else {
+                filterQuery.take(takeValue);
             }
             filterQuery.requiresCount();
         }
+        else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
+            for (var queryElements = 0; queryElements < filterQuery.queries.length; queryElements++) {
+                if (filterQuery.queries[queryElements].fn === 'onSkip' || filterQuery.queries[queryElements].fn === 'onTake') {
+                    filterQuery.queries.splice(queryElements, 1);
+                    --queryElements;
+                }
+            }
+        }
         return filterQuery;
     };
     AutoComplete.prototype.searchLists = function (e) {
@@ -174,6 +192,7 @@ var AutoComplete = /** @class */ (function (_super) {
                     return;
                 }
                 _this_1.isFiltered = true;
+                _this_1.customFilterQuery = query;
                 _this_1.filterAction(dataSource, query, fields);
             },
             cancel: false
@@ -304,10 +323,6 @@ var AutoComplete = /** @class */ (function (_super) {
                         }, 0);
                     }
                     else {
-                        var isHtmlElement = /<[^>]*>/g.test(e.item.innerText);
-                        if (isHtmlElement) {
-                            e.item.innerText = e.item.innerText.replace(/[\u00A0-\u9999<>&]/g, function (match) { return "&#" + match.charCodeAt(0) + ";"; });
-                        }
                         highlightSearch(e.item, _this_1.queryString, _this_1.ignoreCase, _this_1.filterType);
                     }
                 }
@@ -456,6 +471,7 @@ var AutoComplete = /** @class */ (function (_super) {
                     revertHighlightSearch(this.liCollections[i]);
                     highlightSearch(this.liCollections[i], this.queryString, this.ignoreCase, this.filterType);
                 }
+                isHighlight = null;
             }
         }
     };

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

@@ -500,7 +500,7 @@ var ComboBox = /** @class */ (function (_super) {
             this.preventAutoFill = this.inputElement.value === '' ? false : this.preventAutoFill;
             this.setAutoFill(activeElement, isKeyNavigate);
         }
-        else if (this.inputElement.value === '') {
+        else if (!isNullOrUndefined(this.inputElement) && this.inputElement.value === '') {
             this.activeIndex = null;
             if (!isNullOrUndefined(this.list)) {
                 if (!this.enableVirtualization) {
@@ -757,9 +757,6 @@ var ComboBox = /** @class */ (function (_super) {
     ComboBox.prototype.render = function () {
         _super.prototype.render.call(this);
         this.setSearchBox();
-        if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {
-            _super.prototype.renderList.call(this);
-        }
         this.renderComplete();
     };
     /**

package/src/common/highlight-search.js

@@ -8,6 +8,10 @@
  * @returns {void}
  */
 export function highlightSearch(element, query, ignoreCase, type) {
+    var isHtmlElement = /<[^>]*>/g.test(element.innerText);
+    if (isHtmlElement) {
+        element.innerText = element.innerText.replace(/[\u00A0-\u9999<>&]/g, function (match) { return "&#" + match.charCodeAt(0) + ";"; });
+    }
     if (query === '') {
         return;
     }

package/src/common/interface.d.ts

@@ -43,6 +43,7 @@ export interface IDropdownlist extends Component<HTMLElement> {
     typedString: string;
     isVirtualScrolling: boolean;
     isCustomFilter: boolean;
+    customFilterQuery: Query;
     allowFiltering: boolean;
     isPopupOpen: boolean;
     isTyped: boolean;

package/src/common/virtual-scroll.js

@@ -234,10 +234,8 @@ var VirtualScroll = /** @class */ (function () {
                     this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList);
                 }
                 var query = this.parent.getForQuery(this.parent.value).clone();
-                if (!this.parent.allowFiltering) { //need to check with allowFiltering false
-                    var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0 ? this.parent.viewPortInfo.startIndex - this.parent.value.length : 0;
-                    query = query.skip(skipvalue);
-                }
+                var skipvalue = this.parent.viewPortInfo.startIndex - this.parent.value.length >= 0 ? this.parent.viewPortInfo.startIndex - this.parent.value.length : 0;
+                query = query.skip(skipvalue);
                 this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
                 isListUpdated = false;
             }
@@ -403,7 +401,9 @@ var VirtualScroll = /** @class */ (function () {
                         if (this.parent.keyboardEvent != null) {
                             this.parent.handleVirtualKeyboardActions(this.parent.keyboardEvent, this.parent.pageCount);
                         }
-                        this.parent.isCustomFilter = false;
+                        if (!this.parent.customFilterQuery) {
+                            this.parent.isCustomFilter = false;
+                        }
                         return [2 /*return*/];
                 }
             });

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

@@ -275,6 +275,9 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected incrementalPreQueryString: string;
     protected isObjectCustomValue: boolean;
     protected appendUncheckList: boolean;
+    protected getInitialData: boolean;
+    protected preventPopupOpen: boolean;
+    protected customFilterQuery: Query;
     protected virtualSelectAllData: {
         [key: string]: Object;
     }[] | DataManager | string[] | number[] | boolean[];

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

@@ -127,6 +127,9 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.incrementalPreQueryString = '';
         _this.isObjectCustomValue = false;
         _this.appendUncheckList = false;
+        _this.getInitialData = false;
+        _this.preventPopupOpen = true;
+        _this.customFilterQuery = new Query();
         _this.virtualListInfo = {
             currentPageNumber: null,
             direction: null,
@@ -441,6 +444,7 @@ var DropDownBase = /** @class */ (function (_super) {
         var actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
         this.skeletonCount = actualCount * 2 < this.itemCount ? this.itemCount : actualCount * 2;
         this.itemCount = retainSkeleton ? this.itemCount : this.skeletonCount;
+        this.virtualItemCount = this.itemCount;
         this.skeletonCount = Math.floor(this.skeletonCount / 2) + 2;
     };
     DropDownBase.prototype.GetVirtualTrackHeight = function () {
@@ -534,6 +538,7 @@ var DropDownBase = /** @class */ (function (_super) {
      */
     DropDownBase.prototype.initialize = function (e) {
         this.bindEvent = true;
+        this.preventPopupOpen = true;
         this.actionFailureTemplateId = "" + this.element.id + ACTIONFAILURETEMPLATE_PROPERTY;
         if (this.element.tagName === 'UL') {
             var jsonElement = ListBase.createJsonFromElement(this.element);
@@ -719,6 +724,12 @@ var DropDownBase = /** @class */ (function (_super) {
                                     }
                                     _this.isRequested = false;
                                     _this.bindChildItems(listItems, ulElement, fields, e);
+                                    if (_this.getInitialData) {
+                                        _this.setListData(dataSource, fields, query, event);
+                                        _this.getInitialData = false;
+                                        _this.preventPopupOpen = false;
+                                        return;
+                                    }
                                 }
                             });
                         }).catch(function (e) {
@@ -790,6 +801,11 @@ var DropDownBase = /** @class */ (function (_super) {
                                     _this.renderGroupTemplate(ulElement);
                                 }
                                 _this.bindChildItems(localDataArgs.result, ulElement, fields);
+                                if (_this.getInitialData) {
+                                    _this.getInitialData = false;
+                                    _this.preventPopupOpen = false;
+                                    return;
+                                }
                                 setTimeout(function () {
                                     if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && (ulElement.children[0].childElementCount > 0 || (_this.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {
                                         _this.updateDataList();
@@ -891,7 +907,7 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.onActionComplete = function (ulElement, list, e) {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         this.listData = list;
-        if (this.isVirtualizationEnabled && !this.isCustomDataUpdated) {
+        if (this.isVirtualizationEnabled && !this.isCustomDataUpdated && !this.virtualSelectAll) {
             this.notify("setGeneratedData", {
                 module: "VirtualScroll",
             });
@@ -1113,6 +1129,9 @@ var DropDownBase = /** @class */ (function (_super) {
         this.fixedHeaderElement.style.display = 'block';
     };
     DropDownBase.prototype.getValidLi = function () {
+        if (this.isVirtualizationEnabled) {
+            return this.liCollections[0].classList.contains('e-virtual-list') ? this.liCollections[this.skeletonCount] : this.liCollections[0];
+        }
         return this.liCollections[0];
     };
     /**
@@ -1187,7 +1206,7 @@ var DropDownBase = /** @class */ (function (_super) {
                     }
                     this.updateListElements(listData);
                 }
-                else if ((!virtualUlElement)) {
+                else if ((!virtualUlElement) || (!virtualUlElement.firstChild)) {
                     this.list.innerHTML = '';
                     this.createVirtualContent();
                     this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
@@ -1532,6 +1551,7 @@ var DropDownBase = /** @class */ (function (_super) {
             }
         }
         var itemsCount = this.getItems().length;
+        var isListboxEmpty = itemsCount === 0;
         var selectedItemValue = this.list.querySelector('.' + dropDownBaseClasses.selected);
         items = (items instanceof Array ? items : [items]);
         var index;
@@ -1566,11 +1586,24 @@ var DropDownBase = /** @class */ (function (_super) {
             li.setAttribute('role', 'option');
             this.notify('addItem', { module: 'CheckBoxSelection', item: li });
             liCollections.push(li);
-            this.listData.push(item);
+            if (this.getModuleName() === 'listbox') {
+                this.listData.splice(isListboxEmpty ? this.listData.length : index, 0, item);
+                if (this.listData.length !== this.sortedData.length) {
+                    this.sortedData = this.listData;
+                }
+            }
+            else {
+                this.listData.push(item);
+            }
             if (this.sortOrder === 'None' && isNullOrUndefined(itemIndex) && index === 0) {
                 index = null;
             }
-            this.updateActionCompleteData(li, item, index);
+            if (this.getModuleName() === 'listbox') {
+                this.updateActionCompleteData(li, item, isListboxEmpty ? null : index);
+            }
+            else {
+                this.updateActionCompleteData(li, item, index);
+            }
             //Listbox event
             this.trigger('beforeItemRender', { element: li, item: item });
         }

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

@@ -1678,6 +1678,10 @@ var DropDownList = /** @class */ (function (_super) {
                     e.preventDefault();
                     break;
                 default:
+                    if (this.isFiltering() && this.getModuleName() === 'combobox' && isNullOrUndefined(this.list)) {
+                        this.getInitialData = true;
+                        this.renderList();
+                    }
                     this.typedString = this.filterInput.value;
                     this.preventAutoFill = false;
                     this.searchLists(e);
@@ -1726,13 +1730,13 @@ var DropDownList = /** @class */ (function (_super) {
             if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                 filterQuery.where('', filterType, this.typedString, this.ignoreCase, this.ignoreAccent);
             }
-            else {
+            else if (((this.getModuleName() !== 'combobox') || this.enableVirtualization) || (this.isFiltering() && this.getModuleName() === 'combobox' && this.typedString !== '')) {
                 var fields = (this.fields.text) ? this.fields.text : '';
                 filterQuery.where(fields, filterType, this.typedString, this.ignoreCase, this.ignoreAccent);
             }
         }
         else {
-            filterQuery = query ? query.clone() : this.query ? this.query.clone() : new Query();
+            filterQuery = (this.enableVirtualization && !isNullOrUndefined(this.customFilterQuery)) ? this.customFilterQuery.clone() : query ? query.clone() : this.query ? this.query.clone() : new Query();
         }
         if (this.enableVirtualization && (this.viewPortInfo.endIndex != 0) && (!(this.dataSource instanceof DataManager) || (this.dataSource instanceof DataManager && this.virtualGroupDataSource))) {
             var takeValue = this.getTakeValue();
@@ -1747,26 +1751,36 @@ var DropDownList = /** @class */ (function (_super) {
             }
             var queryTakeValue = 0;
             var querySkipValue = 0;
-            if (this.query && this.query.queries.length > 0) {
-                for (var queryElements_1 = 0; queryElements_1 < this.query.queries.length; queryElements_1++) {
-                    if (this.query.queries[queryElements_1].fn === 'onSkip') {
-                        querySkipValue = this.query.queries[queryElements_1].e.nos;
+            if (filterQuery && filterQuery.queries.length > 0) {
+                for (var queryElements_1 = 0; queryElements_1 < filterQuery.queries.length; queryElements_1++) {
+                    if (filterQuery.queries[queryElements_1].fn === 'onSkip') {
+                        querySkipValue = filterQuery.queries[queryElements_1].e.nos;
+                    }
+                    if (filterQuery.queries[queryElements_1].fn === 'onTake') {
+                        queryTakeValue = takeValue <= filterQuery.queries[queryElements_1].e.nos ? filterQuery.queries[queryElements_1].e.nos : takeValue;
                     }
-                    if (this.query.queries[queryElements_1].fn === 'onTake') {
-                        queryTakeValue = takeValue <= this.query.queries[queryElements_1].e.nos ? this.query.queries[queryElements_1].e.nos : takeValue;
+                }
+            }
+            if (queryTakeValue <= 0 && this.query && this.query.queries.length > 0) {
+                for (var queryElements_2 = 0; queryElements_2 < this.query.queries.length; queryElements_2++) {
+                    if (this.query.queries[queryElements_2].fn === 'onTake') {
+                        queryTakeValue = takeValue <= this.query.queries[queryElements_2].e.nos ? this.query.queries[queryElements_2].e.nos : takeValue;
                     }
                 }
             }
             var skipExists = false;
-            var takeExists = false;
             if (filterQuery && filterQuery.queries.length > 0) {
-                for (var queryElements_2 = 0; queryElements_2 < filterQuery.queries.length; queryElements_2++) {
-                    if (filterQuery.queries[queryElements_2].fn === 'onSkip') {
-                        skipExists = true;
+                for (var queryElements_3 = 0; queryElements_3 < filterQuery.queries.length; queryElements_3++) {
+                    if (filterQuery.queries[queryElements_3].fn === 'onSkip') {
+                        querySkipValue = filterQuery.queries[queryElements_3].e.nos;
+                        filterQuery.queries.splice(queryElements_3, 1);
+                        --queryElements_3;
+                        continue;
                     }
-                    if (filterQuery.queries[queryElements_2].fn === 'onTake') {
-                        takeExists = true;
-                        filterQuery.queries[queryElements_2].e.nos = filterQuery.queries[queryElements_2].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements_2].e.nos;
+                    if (filterQuery.queries[queryElements_3].fn === 'onTake') {
+                        queryTakeValue = filterQuery.queries[queryElements_3].e.nos <= queryTakeValue ? queryTakeValue : filterQuery.queries[queryElements_3].e.nos;
+                        filterQuery.queries.splice(queryElements_3, 1);
+                        --queryElements_3;
                     }
                 }
             }
@@ -1782,17 +1796,23 @@ var DropDownList = /** @class */ (function (_super) {
                 filterQuery.take(this.incrementalEndIndex);
             }
             else {
-                if (!takeExists) {
-                    if (queryTakeValue > 0) {
-                        filterQuery.take(queryTakeValue);
-                    }
-                    else {
-                        filterQuery.take(takeValue);
-                    }
+                if (queryTakeValue > 0) {
+                    filterQuery.take(queryTakeValue);
+                }
+                else {
+                    filterQuery.take(takeValue);
                 }
             }
             filterQuery.requiresCount();
         }
+        else if (this.enableVirtualization && (this.dataSource instanceof DataManager && !this.virtualGroupDataSource)) {
+            for (var queryElements_4 = 0; queryElements_4 < filterQuery.queries.length; queryElements_4++) {
+                if (filterQuery.queries[queryElements_4].fn === 'onSkip' || filterQuery.queries[queryElements_4].fn === 'onTake') {
+                    filterQuery.queries.splice(queryElements_4, 1);
+                    --queryElements_4;
+                }
+            }
+        }
         return filterQuery;
     };
     DropDownList.prototype.getSelectionPoints = function () {
@@ -1819,6 +1839,7 @@ var DropDownList = /** @class */ (function (_super) {
                         return;
                     }
                     _this.isCustomFilter = true;
+                    _this.customFilterQuery = query;
                     _this.filteringAction(dataSource, query, fields);
                 },
                 baseEventArgs: e,
@@ -1846,7 +1867,7 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.filteringAction = function (dataSource, query, fields) {
         if (!isNullOrUndefined(this.filterInput)) {
-            this.beforePopupOpen = (!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') ?
+            this.beforePopupOpen = ((!this.isPopupOpen && this.getModuleName() === 'combobox' && this.filterInput.value === '') || this.getInitialData) ?
                 false : true;
             var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
             if (this.filterInput.value.trim() === '' && !this.itemTemplate) {
@@ -1854,6 +1875,12 @@ var DropDownList = /** @class */ (function (_super) {
                 this.isTyped = false;
                 if (!isNullOrUndefined(this.actionCompleteData.ulElement) && !isNullOrUndefined(this.actionCompleteData.list)) {
                     if (this.enableVirtualization) {
+                        if (this.isFiltering()) {
+                            this.isPreventScrollAction = true;
+                            this.list.scrollTop = 0;
+                            this.previousStartIndex = 0;
+                            this.virtualListInfo = null;
+                        }
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         this.totalItemCount = this.dataSource && this.dataSource.length ? this.dataSource.length : 0;
                         this.resetList(dataSource, fields, query);
@@ -2024,6 +2051,13 @@ var DropDownList = /** @class */ (function (_super) {
             this.isNotSearchList = false;
             return;
         }
+        if (this.getInitialData) {
+            this.updateActionCompleteDataValues(ulElement, list);
+        }
+        if (!this.preventPopupOpen && this.getModuleName() === 'combobox') {
+            this.beforePopupOpen = true;
+            this.preventPopupOpen = true;
+        }
         var tempItemCount = this.itemCount;
         if (this.isActive || !isNullOrUndefined(ulElement)) {
             var selectedItem = this.selectedLI ? this.selectedLI.cloneNode(true) : null;
@@ -2207,7 +2241,7 @@ var DropDownList = /** @class */ (function (_super) {
         else {
             this.actionCompleteData.ulElement.appendChild(li.cloneNode(true));
         }
-        if (this.isFiltering() && this.actionCompleteData.list.indexOf(item) < 0) {
+        if (this.isFiltering() && this.actionCompleteData.list && this.actionCompleteData.list.indexOf(item) < 0) {
             this.actionCompleteData.list.push(item);
         }
     };
@@ -2263,7 +2297,7 @@ var DropDownList = /** @class */ (function (_super) {
                 popupEle.setAttribute('aria-label', _this.element.id);
                 popupEle.setAttribute('role', 'dialog');
                 var searchBox = _this.setSearchBox(popupEle);
-                _this.listContainerHeight = formatUnit(_this.popupHeight);
+                _this.listContainerHeight = _this.allowFiltering && _this.getModuleName() === 'dropdownlist' && Browser.isDevice ? formatUnit(Math.round(window.outerHeight).toString() + 'px') : formatUnit(_this.popupHeight);
                 if (_this.headerTemplate) {
                     _this.setHeaderTemplate(popupEle);
                 }
@@ -2278,6 +2312,8 @@ var DropDownList = /** @class */ (function (_super) {
                     _this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) : 0;
                 }
                 if (_this.enableVirtualization && !_this.list.classList.contains(dropDownBaseClasses.noData)) {
+                    _this.getSkeletonCount();
+                    _this.skeletonCount = _this.totalItemCount < (_this.itemCount * 2) ? 0 : _this.skeletonCount;
                     if (!_this.list.querySelector('.e-virtual-ddl-content')) {
                         _this.list.appendChild(_this.createElement('div', {
                             className: 'e-virtual-ddl-content',
@@ -2584,7 +2620,7 @@ var DropDownList = /** @class */ (function (_super) {
             var inputWidth = this.inputWrapper.container.offsetWidth * parseFloat(width) / 100;
             width = inputWidth.toString() + 'px';
         }
-        if (Browser.isDevice && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||
+        if (Browser.isDevice && (width.indexOf('px') > -1) && (!this.allowFiltering && (this.getModuleName() === 'dropdownlist' ||
             (this.isDropDownClick && this.getModuleName() === 'combobox')))) {
             var firstItem = this.isEmptyList() ? this.list : this.liCollections[0];
             width = (parseInt(width, 10) + (parseInt(getComputedStyle(firstItem).textIndent, 10) -
@@ -2889,7 +2925,7 @@ var DropDownList = /** @class */ (function (_super) {
             // 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) {
+        if (this.enableVirtualization && this.isFiltering() && isFilterValue && this.totalItemCount !== dataSourceCount) {
             this.updateInitialData();
             this.checkAndResetCache();
         }
@@ -3010,7 +3046,7 @@ var DropDownList = /** @class */ (function (_super) {
         this.setFields();
         this.inputWrapper.container.style.width = formatUnit(this.width);
         this.inputWrapper.container.classList.add('e-ddl');
-        if (this.floatLabelType === 'Auto') {
+        if (this.floatLabelType !== 'Never') {
             Input.calculateWidth(this.inputElement, this.inputWrapper.container);
         }
         if (!isNullOrUndefined(this.inputWrapper.buttons[0]) && this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {
@@ -3660,6 +3696,7 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
         this.isVirtualTrackHeight = false;
+        this.customFilterQuery = null;
         this.closePopup(0, e);
         var dataItem = this.getItemData();
         var isSelectVal = !isNullOrUndefined(this.selectedLI);
@@ -3697,7 +3734,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         addClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);
         this.onFocus(e);
-        if (this.floatLabelType === 'Auto') {
+        if (this.floatLabelType !== 'Never') {
             Input.calculateWidth(this.inputElement, this.inputWrapper.container);
         }
     };
@@ -3719,7 +3756,7 @@ var DropDownList = /** @class */ (function (_super) {
             this.targetElement().blur();
         }
         removeClass([this.inputWrapper.container], [dropDownListClasses.inputFocus]);
-        if (this.floatLabelType === 'Auto' && this.inputElement.value === '') {
+        if (this.floatLabelType !== 'Never') {
             Input.calculateWidth(this.inputElement, this.inputWrapper.container);
         }
     };
@@ -3770,17 +3807,18 @@ var DropDownList = /** @class */ (function (_super) {
             detach(this.inputWrapper.container);
         }
         this.hiddenElement = null;
+        this.filterInput = null;
         this.inputWrapper = null;
         this.keyboardModule = null;
         this.ulElement = null;
         this.list = null;
+        this.clearIconElement = null;
         this.popupObj = null;
         this.popupContentElement = null;
         this.rippleFun = null;
         this.selectedLI = null;
         this.liCollections = null;
         this.item = null;
-        this.inputWrapper = null;
         this.footer = null;
         this.header = null;
         this.previousSelectedLI = null;
@@ -3797,9 +3835,8 @@ var DropDownList = /** @class */ (function (_super) {
             floatLabelType: this.floatLabelType,
             properties: this.properties
         }, this.clearButton);
-        if (this.isAngular) {
-            this.inputElement = null;
-        }
+        this.clearButton = null;
+        this.inputElement = null;
         _super.prototype.destroy.call(this);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */