@syncfusion/ej2-dropdowns 26.2.11 → 27.1.48

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

@@ -63,7 +63,7 @@ export var dropDownBaseClasses = {
     group: 'e-list-group-item',
     disabled: 'e-disabled',
     grouping: 'e-dd-group',
-    virtualList: 'e-list-item e-virtual-list',
+    virtualList: 'e-list-item e-virtual-list'
 };
 var ITEMTEMPLATE_PROPERTY = 'ItemTemplate';
 var DISPLAYTEMPLATE_PROPERTY = 'DisplayTemplate';
@@ -140,7 +140,7 @@ var DropDownBase = /** @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: 0,
+            endIndex: 0
         };
         _this.viewPortInfo = {
             currentPageNumber: null,
@@ -148,7 +148,7 @@ var DropDownBase = /** @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: 0,
+            endIndex: 0
         };
         _this.selectedValueInfo = {
             currentPageNumber: null,
@@ -156,7 +156,7 @@ var DropDownBase = /** @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: 0,
+            endIndex: 0
         };
         return _this;
     }
@@ -231,7 +231,8 @@ var DropDownBase = /** @class */ (function (_super) {
                     compareValue_1 = value;
                     dataSource.filter(function (item) {
                         var itemValue = getValue(fields.value, item);
-                        if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) && itemValue.toString() === compareValue_1.toString()) {
+                        if (!isNullOrUndefined(itemValue) && !isNullOrUndefined(value) &&
+                            itemValue.toString() === compareValue_1.toString()) {
                             value = getValue(fields.text, item);
                         }
                     });
@@ -381,7 +382,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 sentinelInfo: {},
                 offsets: {},
                 startIndex: 0,
-                endIndex: this.itemCount,
+                endIndex: this.itemCount
             };
             this.selectedValueInfo = null;
         }
@@ -411,14 +412,14 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.getFilteringSkeletonCount = function () {
         var currentSkeletonCount = this.skeletonCount;
         this.getSkeletonCount(true);
-        this.skeletonCount = this.dataCount > this.itemCount * 2 ? this.skeletonCount : 0;
+        this.skeletonCount = this.dataCount < this.itemCount * 2 && ((!(this.dataSource instanceof DataManager)) ||
+            ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;
         var skeletonUpdated = true;
-        if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && (this.totalItemCount < (this.itemCount * 2))) {
+        if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && (this.totalItemCount < (this.itemCount * 2)) && ((!(this.dataSource instanceof DataManager)) || ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount)))) {
             this.skeletonCount = 0;
             skeletonUpdated = false;
         }
         if (!this.list.classList.contains(dropDownBaseClasses.noData)) {
-            var isSkeletonCountChange = currentSkeletonCount !== this.skeletonCount;
             if (currentSkeletonCount !== this.skeletonCount && skeletonUpdated) {
                 this.UpdateSkeleton(true, Math.abs(currentSkeletonCount - this.skeletonCount));
             }
@@ -451,18 +452,20 @@ var DropDownBase = /** @class */ (function (_super) {
         this.skeletonCount = Math.floor(this.skeletonCount / 2);
     };
     DropDownBase.prototype.GetVirtualTrackHeight = function () {
-        var height = this.totalItemCount === this.viewPortInfo.endIndex ? this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
+        var height = this.totalItemCount === this.viewPortInfo.endIndex ?
+            this.totalItemCount * this.listItemHeight - this.itemCount * this.listItemHeight : this.totalItemCount * this.listItemHeight;
         height = this.isVirtualTrackHeight ? 0 : height;
         var heightDimension = "height: " + (height - this.itemCount * this.listItemHeight) + "px;";
         if ((this.getModuleName() === 'autocomplete' || this.getModuleName() === 'multiselect') && this.skeletonCount === 0) {
-            return "height: 0px;";
+            return 'height: 0px;';
         }
         return heightDimension;
     };
     DropDownBase.prototype.getTransformValues = function () {
         var translateY = this.viewPortInfo.startIndex * this.listItemHeight;
         translateY = translateY - (this.skeletonCount * this.listItemHeight);
-        translateY = ((this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0) || this.skeletonCount === 0) ? 0 : translateY;
+        translateY = ((this.viewPortInfo.startIndex === 0 && this.listData && this.listData.length === 0) ||
+            this.skeletonCount === 0) ? 0 : translateY;
         var styleText = "transform: translate(0px, " + translateY + "px);";
         return styleText;
     };
@@ -477,15 +480,17 @@ var DropDownBase = /** @class */ (function (_super) {
                     liElement.style.height = this.listItemHeight + 'px';
                 }
                 var skeleton = new Skeleton({
-                    shape: "Text",
-                    height: "10px",
-                    width: "95%",
-                    cssClass: "e-skeleton-text",
+                    shape: 'Text',
+                    height: '10px',
+                    width: '95%',
+                    cssClass: 'e-skeleton-text'
                 });
                 skeleton.appendTo(this.createElement('div'));
                 liElement.appendChild(skeleton.element);
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                isContainSkeleton.firstChild && isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
+                if (isContainSkeleton.firstChild) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    isContainSkeleton.firstChild.insertBefore(liElement, isContainSkeleton.firstChild.children[0]);
+                }
             }
         }
     };
@@ -499,18 +504,21 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.getFormattedValue = function (value) {
         if (this.listData && this.listData.length) {
             var item = void 0;
-            if (this.properties.allowCustomValue && this.properties.value && this.properties.value instanceof Array && this.properties.value.length > 0) {
+            if (this.properties.allowCustomValue &&
+                this.properties.value &&
+                this.properties.value instanceof Array &&
+                this.properties.value.length > 0) {
                 item = this.typeOfData(this.properties.value);
             }
             else {
                 item = this.typeOfData(this.listData);
             }
-            if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number'
-                || item.typeof === 'number') {
+            if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number' ||
+                item.typeof === 'number') {
                 return parseFloat(value);
             }
-            if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean'
-                || item.typeof === 'boolean') {
+            if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean' ||
+                item.typeof === 'boolean') {
                 return ((value === 'true') || ('' + value === 'true'));
             }
         }
@@ -537,6 +545,7 @@ var DropDownBase = /** @class */ (function (_super) {
     /**
      * Initialize the Component.
      *
+     * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - The event object.
      * @returns {void}
      */
     DropDownBase.prototype.initialize = function (e) {
@@ -660,6 +669,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {Object[] | string[] | number[] | DataManager | boolean[]} dataSource - Specifies the data to generate the list.
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @param {Query} query - Accepts the external Query that execute along with data processing.
+     * @param {MouseEvent | KeyboardEventArgs | TouchEvent} event - Specifies the event which is the reason for the invocation of this method.
      * @returns {void}
      */
     DropDownBase.prototype.setListData = function (dataSource, fields, query, event) {
@@ -692,14 +702,14 @@ var DropDownBase = /** @class */ (function (_super) {
                                     }
                                 }
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                if (_this.isVirtualizationEnabled && (e.count != 0 && e.count < (_this.itemCount * 2))) {
+                                if (_this.isVirtualizationEnabled && (e.count !== 0 && e.count < (_this.itemCount * 2))) {
                                     if (newQuery) {
                                         for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
                                             if (newQuery.queries[queryElements].fn === 'onTake') {
                                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                                 newQuery.queries[queryElements].e.nos = e.count;
                                             }
-                                            if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition == 'or' || newQuery.queries[queryElements].e.operator == 'equal')) {
+                                            if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal')) {
                                                 isReOrder = false;
                                             }
                                         }
@@ -709,7 +719,7 @@ var DropDownBase = /** @class */ (function (_super) {
                                     _this.isVirtualTrackHeight = false;
                                     if (newQuery) {
                                         for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
-                                            if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition == 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator == 'equal'))) {
+                                            if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition === 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator === 'equal'))) {
                                                 isReOrder = false;
                                             }
                                         }
@@ -728,7 +738,8 @@ var DropDownBase = /** @class */ (function (_super) {
                                         ulElement = _this.renderItems(listItems, fields);
                                         return;
                                     }
-                                    if ((!_this.isVirtualizationEnabled && listItems.length === 0) || (_this.isVirtualizationEnabled && listItems.length === 0 && !isWhereExist_1)) {
+                                    if ((!_this.isVirtualizationEnabled && listItems.length === 0) ||
+                                        (_this.isVirtualizationEnabled && listItems.length === 0 && !isWhereExist_1)) {
                                         _this.isDataFetched = true;
                                     }
                                     if (!isWhereExist_1) {
@@ -751,8 +762,8 @@ var DropDownBase = /** @class */ (function (_super) {
                                         return;
                                     }
                                     if (_this.isVirtualizationEnabled && _this.setCurrentView) {
-                                        _this.notify("setCurrentViewDataAsync", {
-                                            module: "VirtualScroll",
+                                        _this.notify('setCurrentViewDataAsync', {
+                                            module: 'VirtualScroll'
                                         });
                                     }
                                     if (_this.keyboardEvent != null) {
@@ -784,12 +795,16 @@ var DropDownBase = /** @class */ (function (_super) {
                             var data = new DataManager(_this.dataSource).executeLocal(new Query().group(_this.fields.groupBy));
                             _this.virtualGroupDataSource = data.records;
                         }
-                        var dataManager = _this.isVirtualizationEnabled && _this.virtualGroupDataSource && !_this.isCustomDataUpdated ? new DataManager(_this.virtualGroupDataSource) : new DataManager(eventArgs.data);
+                        var dataManager = _this.isVirtualizationEnabled &&
+                            _this.virtualGroupDataSource
+                            && !_this.isCustomDataUpdated ? new DataManager(_this.virtualGroupDataSource) :
+                            new DataManager(eventArgs.data);
                         listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
                         if (!_this.virtualSelectAll) {
                             var newQuery = _this.getQuery(eventArgs.query);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            if (_this.isVirtualizationEnabled && (listItems.count != 0 && listItems.count < (_this.itemCount * 2))) {
+                            if (_this.isVirtualizationEnabled && (listItems.count !== 0 &&
+                                listItems.count < (_this.itemCount * 2))) {
                                 if (newQuery) {
                                     for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
                                         if (newQuery.queries[queryElements].fn === 'onTake') {
@@ -797,13 +812,14 @@ var DropDownBase = /** @class */ (function (_super) {
                                             newQuery.queries[queryElements].e.nos = listItems.count;
                                             listItems = (newQuery).executeLocal(dataManager);
                                         }
-                                        if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition == 'or' || newQuery.queries[queryElements].e.operator == 'equal')) {
+                                        if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal')) {
                                             isReOrder = false;
                                         }
                                     }
                                     if (isReOrder) {
                                         listItems = (newQuery).executeLocal(dataManager);
-                                        _this.isVirtualTrackHeight = (!(_this.dataSource instanceof DataManager) && !_this.isCustomDataUpdated) ? true : false;
+                                        _this.isVirtualTrackHeight = (!(_this.dataSource instanceof DataManager) &&
+                                            !_this.isCustomDataUpdated) ? true : false;
                                     }
                                 }
                             }
@@ -811,16 +827,18 @@ var DropDownBase = /** @class */ (function (_super) {
                                 _this.isVirtualTrackHeight = false;
                                 if (newQuery) {
                                     for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
-                                        if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition == 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator == 'equal'))) {
+                                        if (_this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition === 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator === 'equal'))) {
                                             isReOrder = false;
                                         }
                                     }
                                 }
                             }
                         }
-                        if (isReOrder && (!(_this.dataSource instanceof DataManager) && !_this.isCustomDataUpdated) && !_this.virtualSelectAll) {
+                        if (isReOrder && (!(_this.dataSource instanceof DataManager) && !_this.isCustomDataUpdated) &&
+                            !_this.virtualSelectAll) {
                             // eslint-disable @typescript-eslint/no-explicit-any
-                            _this.dataCount = _this.totalItemCount = _this.virtualSelectAll ? listItems.length : listItems.count;
+                            _this.dataCount = _this.totalItemCount = _this.virtualSelectAll ? listItems.length :
+                                listItems.count;
                         }
                         listItems = _this.isVirtualizationEnabled ? listItems.result : listItems;
                         // eslint-enable @typescript-eslint/no-explicit-any
@@ -885,7 +903,7 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.isObjectInArray = function (objectToFind, array) {
         return array.some(function (item) {
             return Object.keys(objectToFind).every(function (key) {
-                return item.hasOwnProperty(key) && item[key] === objectToFind[key];
+                return Object.prototype.hasOwnProperty.call(item, key) && item[key] === objectToFind[key];
             });
         });
     };
@@ -951,8 +969,8 @@ var DropDownBase = /** @class */ (function (_super) {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         this.listData = list;
         if (this.isVirtualizationEnabled && !this.isCustomDataUpdated && !this.virtualSelectAll) {
-            this.notify("setGeneratedData", {
-                module: "VirtualScroll",
+            this.notify('setGeneratedData', {
+                module: 'VirtualScroll'
             });
         }
         if (this.getModuleName() !== 'listbox') {
@@ -968,7 +986,7 @@ var DropDownBase = /** @class */ (function (_super) {
         if (this.getModuleName() === 'multiselect' && this.properties.allowCustomValue && this.fields.groupBy) {
             for (var i = 0; i < ulElement.childElementCount; i++) {
                 if (ulElement.children[i].classList.contains('e-list-group-item')) {
-                    if (isNullOrUndefined(ulElement.children[i].innerHTML) || ulElement.children[i].innerHTML == "") {
+                    if (isNullOrUndefined(ulElement.children[i].innerHTML) || ulElement.children[i].innerHTML === '') {
                         addClass([ulElement.children[i]], HIDE_GROUPLIST);
                     }
                 }
@@ -1163,7 +1181,8 @@ var DropDownBase = /** @class */ (function (_super) {
         }
     };
     DropDownBase.prototype.updateGroupHeader = function (index, liCollections, target) {
-        if (!isNullOrUndefined(liCollections[index]) && liCollections[index].classList.contains(dropDownBaseClasses.group)) {
+        if (!isNullOrUndefined(liCollections[index]) &&
+            liCollections[index].classList.contains(dropDownBaseClasses.group)) {
             this.updateGroupFixedHeader(liCollections[index], target);
             return true;
         }
@@ -1194,6 +1213,7 @@ var DropDownBase = /** @class */ (function (_super) {
      *
      * @param {object[]} listData - Specifies the list of array of data.
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
+     * @param {boolean} isCheckBoxUpdate - Specifies whether the list item is updated with checkbox.
      * @returns {HTMLElement} Return the list items.
      */
     DropDownBase.prototype.renderItems = function (listData, fields, isCheckBoxUpdate) {
@@ -1214,23 +1234,21 @@ var DropDownBase = /** @class */ (function (_super) {
                 new DataManager(dataSource).executeLocal(new Query().take(100))
                 : dataSource;
             ulElement = this.templateListItem((this.getModuleName() === 'autocomplete') ? spliceData : dataSource, fields);
-            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);
-                    var reOrderList = this.list.querySelectorAll('.e-reorder');
-                    if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList && reOrderList.length > 0 && !isCheckBoxUpdate) {
-                        this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList[0]);
-                    }
-                    this.updateListElements(listData);
-                }
-                else if ((!virtualUlElement)) {
-                    this.list.innerHTML = '';
-                    this.createVirtualContent();
-                    this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
-                    this.updateListElements(listData);
+            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);
+                var reOrderList = this.list.querySelectorAll('.e-reorder');
+                if (this.list.querySelector('.e-virtual-ddl-content') && reOrderList && reOrderList.length > 0 && !isCheckBoxUpdate) {
+                    this.list.querySelector('.e-virtual-ddl-content').removeChild(reOrderList[0]);
                 }
+                this.updateListElements(listData);
+            }
+            else if ((!virtualUlElement)) {
+                this.list.innerHTML = '';
+                this.createVirtualContent();
+                this.list.querySelector('.e-virtual-ddl-content').appendChild(ulElement);
+                this.updateListElements(listData);
             }
         }
         else {
@@ -1274,7 +1292,7 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.createVirtualContent = function () {
         if (!this.list.querySelector('.e-virtual-ddl-content')) {
             this.list.appendChild(this.createElement('div', {
-                className: 'e-virtual-ddl-content',
+                className: 'e-virtual-ddl-content'
             }));
         }
     };
@@ -1385,6 +1403,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * Return the index of item which matched with given value in data source
      *
      * @param {string | number | boolean} value - Specifies given value.
+     * @param {HTMLElement} ulElement - Specifies given value.
      * @returns {number} Returns the index of the item.
      */
     DropDownBase.prototype.getIndexByValueFilter = function (value, ulElement) {
@@ -1439,6 +1458,7 @@ var DropDownBase = /** @class */ (function (_super) {
      * @param {Object[] | string[] | number[] | DataManager | boolean[]} dataSource - Specifies the data to generate the list.
      * @param {FieldSettingsModel} fields - Maps the columns of the data table and binds the data to the component.
      * @param {Query} query - Accepts the external Query that execute along with data processing.
+     * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - Specifies the event.
      * @returns {void}
      */
     DropDownBase.prototype.resetList = function (dataSource, fields, query, e) {
@@ -1457,7 +1477,8 @@ var DropDownBase = /** @class */ (function (_super) {
         }
     };
     DropDownBase.prototype.updateSelectElementData = function (isFiltering) {
-        if ((isFiltering || this.isVirtualizationEnabled) && isNullOrUndefined(this.selectData) && this.listData && this.listData.length > 0) {
+        if ((isFiltering || this.isVirtualizationEnabled) &&
+            isNullOrUndefined(this.selectData) && this.listData && this.listData.length > 0) {
             this.selectData = this.listData;
         }
     };
@@ -1489,7 +1510,14 @@ var DropDownBase = /** @class */ (function (_super) {
             if (Object.keys(updateData).indexOf('dataSource') === -1) {
                 updateData.dataSource = this.dataSource;
             }
-            this.updateDataSource(updateData, oldProp);
+            if (this.getModuleName() === 'listbox') {
+                if (!this.isReact || (this.isReact && !isNullOrUndefined(newProp.dataSource))) {
+                    this.updateDataSource(updateData, oldProp);
+                }
+            }
+            else {
+                this.updateDataSource(updateData, oldProp);
+            }
         }
     };
     /**
@@ -1539,6 +1567,7 @@ var DropDownBase = /** @class */ (function (_super) {
     /**
      * Build and render the component
      *
+     * @param {MouseEvent | KeyboardEventArgs | TouchEvent} e - Specifies the event.
      * @param {boolean} isEmptyData - Specifies the component to initialize with list data or not.
      * @private
      * @returns {void}
@@ -1661,10 +1690,8 @@ var DropDownBase = /** @class */ (function (_super) {
             this.notify('addItem', { module: 'CheckBoxSelection', item: li });
             liCollections.push(li);
             if (this.getModuleName() === 'listbox') {
-                if (item.disabled) {
-                    li.classList.add('e-disabled');
-                }
-                this.listData.splice(isListboxEmpty ? this.listData.length : index, 0, item);
+                this.listData.splice(isListboxEmpty ?
+                    this.listData.length : index, 0, item);
                 if (this.listData.length !== this.sortedData.length) {
                     this.sortedData = this.listData;
                 }
@@ -1676,7 +1703,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 index = null;
             }
             if (this.getModuleName() === 'listbox') {
-                this.updateActionCompleteData(li, item, isListboxEmpty ? null : index);
+                this.updateActionCompleteData(li, item, isListboxEmpty ? null : index + i);
                 isListboxEmpty = true;
             }
             else {
@@ -1726,10 +1753,16 @@ var DropDownBase = /** @class */ (function (_super) {
                 }
                 else {
                     if (this.liCollections[index] && this.liCollections[index].parentNode) {
-                        this.liCollections[index].parentNode.insertBefore(liCollections[i], this.liCollections[index]);
+                        this.liCollections[index].parentNode.
+                            insertBefore(liCollections[i], this.liCollections[index]);
                     }
                     else {
-                        this.ulElement.appendChild(liCollections[i]);
+                        if (itemIndex && this.getModuleName() === 'listbox') {
+                            this.ulElement.insertBefore(liCollections[i], this.ulElement.childNodes[itemIndex + i]);
+                        }
+                        else {
+                            this.ulElement.appendChild(liCollections[i]);
+                        }
                     }
                 }
                 var tempLi = [].slice.call(this.liCollections);

package/src/drop-down-list/drop-down-list-model.d.ts

@@ -1,4 +1,4 @@
-import { EventHandler, Property, Event, compile, EmitType, KeyboardEvents, append, select, ModuleDeclaration } from '@syncfusion/ej2-base';import { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, KeyboardEventArgs, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, prepend, detach, classList } from '@syncfusion/ej2-base';import { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { incrementalSearch, resetIncrementalSearchValues } from '../common/incremental-search';import { DropDownBase, dropDownBaseClasses, SelectEventArgs, FilteringEventArgs, PopupEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, ResultData, BeforeOpenEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { DataManager, Query, Predicate, DataOptions } from '@syncfusion/ej2-data';import {VirtualScroll, Offsets, ScrollDirection, SentinelType, VirtualInfo} from '../common/virtual-scroll';import { Skeleton } from '@syncfusion/ej2-notifications';
+import { EventHandler, Property, Event, compile, EmitType, KeyboardEvents, append, select, ModuleDeclaration } from '@syncfusion/ej2-base';import { attributes, isNullOrUndefined, getUniqueID, formatUnit, isUndefined, getValue } from '@syncfusion/ej2-base';import { Animation, AnimationModel, Browser, KeyboardEventArgs, NotifyPropertyChanges } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, prepend, detach, classList } from '@syncfusion/ej2-base';import { Popup, isCollide, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';import { IInput, Input, InputObject, FloatLabelType } from '@syncfusion/ej2-inputs';import { incrementalSearch, resetIncrementalSearchValues } from '../common/incremental-search';import { DropDownBase, dropDownBaseClasses, SelectEventArgs, FilteringEventArgs, PopupEventArgs } from '../drop-down-base/drop-down-base';import { FocusEventArgs, ResultData, BeforeOpenEventArgs } from '../drop-down-base/drop-down-base';import { FieldSettingsModel } from '../drop-down-base/drop-down-base-model';import { DataManager, Query, Predicate, DataOptions } from '@syncfusion/ej2-data';import {Offsets, SentinelType} from '../common/virtual-scroll';
 import {ChangeEventArgs} from "./drop-down-list";
 import {DropDownBaseModel} from "../drop-down-base/drop-down-base-model";
 
@@ -145,6 +145,13 @@ export interface DropDownListModel extends DropDownBaseModel{
      */
     allowFiltering?: boolean;
 
+    /**
+     * Defines whether the popup opens in fullscreen mode on mobile devices when filtering is enabled. When set to false, the popup will display similarly on both mobile and desktop devices.
+     *
+     * @default true
+     */
+    isDeviceFullScreen?: boolean;
+
     /**
      * When set to true, the user interactions on the component are disabled.
      *
@@ -153,7 +160,7 @@ export interface DropDownListModel extends DropDownBaseModel{
     readonly?: boolean;
 
     /**
-     * Defines whether to enable virtual scrolling in the component. 
+     * Defines whether to enable virtual scrolling in the component.
      *
      * @default false
      */
@@ -176,11 +183,11 @@ export interface DropDownListModel extends DropDownBaseModel{
     value?: number | string | boolean | object | null;
 
     /**
-    * Defines whether the object binding is allowed or not in the component.
-    *
-    * @default false
-    */
-    allowObjectBinding?: boolean; 
+     * Defines whether the object binding is allowed or not in the component.
+     *
+     * @default false
+     */
+    allowObjectBinding?: boolean;
 
     /**
      * Gets or sets the index of the selected item in the component.

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

@@ -107,6 +107,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected selectedElementID: string;
     private preselectedIndex;
     private isTouched;
+    protected isFocused: boolean;
     private clearButton;
     /**
      * Sets CSS classes to the root element of the component that allows customization of appearance.
@@ -234,6 +235,12 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * @default false
      */
     allowFiltering: boolean;
+    /**
+     * Defines whether the popup opens in fullscreen mode on mobile devices when filtering is enabled. When set to false, the popup will display similarly on both mobile and desktop devices.
+     *
+     * @default true
+     */
+    isDeviceFullScreen: boolean;
     /**
      * When set to true, the user interactions on the component are disabled.
      *
@@ -261,10 +268,10 @@ export declare class DropDownList extends DropDownBase implements IInput {
      */
     value: number | string | boolean | object | null;
     /**
-    * Defines whether the object binding is allowed or not in the component.
-    *
-    * @default false
-    */
+     * Defines whether the object binding is allowed or not in the component.
+     *
+     * @default false
+     */
     allowObjectBinding: boolean;
     /**
      * Gets or sets the index of the selected item in the component.
@@ -477,6 +484,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
      * To trigger the change event for list.
      *
      * @param {MouseEvent | KeyboardEvent | TouchEvent} eve - Specifies the event arguments.
+     * @param {boolean} isCustomValue - Specifies whether the value is custom value or not.
      * @returns {void}
      */
     protected onChangeEvent(eve: MouseEvent | KeyboardEvent | TouchEvent, isCustomValue?: boolean): void;