@syncfusion/ej2-dropdowns 25.1.40 → 25.2.3

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

@@ -898,8 +898,11 @@ var DropDownList = /** @class */ (function (_super) {
         var focusEle = this.list.querySelector('.' + dropDownListClasses.focus);
         if (this.isSelectFocusItem(focusEle) && !isVirtualKeyAction) {
             this.setSelection(focusEle, e);
-            if (this.enableVirtualization && !this.fields.groupBy && this.getModuleName() !== 'combobox') {
+            if (this.enableVirtualization) {
                 var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+                if (this.fields.groupBy) {
+                    selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex == 0 ? this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;
+                }
                 this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
             }
         }
@@ -936,7 +939,13 @@ var DropDownList = /** @class */ (function (_super) {
                 }
             }
             if (!isNullOrUndefined(nextItem)) {
+                var focusAtFirstElement = this.liCollections[this.skeletonCount] && this.liCollections[this.skeletonCount].classList.contains('e-item-focus');
                 this.setSelection(nextItem, e);
+                if (focusAtFirstElement && this.enableVirtualization && this.getModuleName() === 'autocomplete' && !isVirtualKeyAction) {
+                    var selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex ? this.selectedLI.offsetTop + (this.virtualListInfo.startIndex * this.selectedLI.offsetHeight) : this.selectedLI.offsetTop;
+                    selectedLiOffsetTop = this.virtualListInfo && this.virtualListInfo.startIndex == 0 && this.fields.groupBy ? this.selectedLI.offsetHeight - selectedLiOffsetTop : selectedLiOffsetTop - this.selectedLI.offsetHeight;
+                    this.list.scrollTop = selectedLiOffsetTop - (this.list.querySelectorAll('.e-virtual-list').length * this.selectedLI.offsetHeight);
+                }
             }
             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') {
@@ -1063,14 +1072,13 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 break;
             case 'pageUp':
-                var count = (pageCount * 2) - 4;
-                this.activeIndex = Math.round(count);
+                this.activeIndex = this.getModuleName() === 'autocomplete' ? this.getIndexByValue(this.selectedLI.getAttribute('data-value')) + this.getPageCount() - 1 : this.getIndexByValue(this.previousValue);
                 this.pageUpSelection(this.activeIndex - this.getPageCount(), e, true);
                 e.preventDefault();
                 break;
             case 'pageDown':
-                this.activeIndex = 1;
-                this.pageDownSelection(this.activeIndex + this.getPageCount(), e, true);
+                this.activeIndex = this.getModuleName() === 'autocomplete' ? this.getIndexByValue(this.selectedLI.getAttribute('data-value')) - this.getPageCount() : this.getIndexByValue(this.previousValue);
+                this.pageDownSelection(!isNullOrUndefined(this.activeIndex) ? (this.activeIndex + this.getPageCount()) : (2 * this.getPageCount()), e, true);
                 e.preventDefault();
                 break;
             case 'home':
@@ -1107,8 +1115,8 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.pageUpSelection = function (steps, event, isVirtualKeyAction) {
         var previousItem = steps >= 0 ? this.liCollections[steps + 1] : this.liCollections[0];
-        if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
-            previousItem = steps >= 0 ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];
+        if ((this.enableVirtualization && this.activeIndex == null)) {
+            previousItem = (this.liCollections.length >= steps && steps >= 0) ? this.liCollections[steps + this.skeletonCount + 1] : this.liCollections[0];
         }
         if (!isNullOrUndefined(previousItem) && previousItem.classList.contains('e-virtual-list')) {
             previousItem = this.liCollections[this.skeletonCount];
@@ -1140,7 +1148,7 @@ var DropDownList = /** @class */ (function (_super) {
             steps = this.getModuleName() === 'dropdownlist' && this.allowFiltering ? steps + 1 : steps;
             previousItem = steps < list.length ? this.liCollections[steps] : this.liCollections[list.length - 1];
         }
-        if ((this.enableVirtualization && this.activeIndex == null) || isVirtualKeyAction) {
+        if ((this.enableVirtualization && this.activeIndex == null)) {
             previousItem = steps <= list.length ? this.liCollections[steps + this.skeletonCount - 1] : this.liCollections[list.length - 1];
         }
         this.PageUpDownSelection(previousItem, event);
@@ -1326,6 +1334,11 @@ var DropDownList = /** @class */ (function (_super) {
             }
         }
         else {
+            if (this.enableVirtualization && this.activeIndex == null && this.dataSource instanceof DataManager) {
+                this.UpdateSkeleton();
+                this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
+                this.ulElement = this.list.querySelector('ul');
+            }
             this.activeIndex = this.getIndexByValue(value);
         }
     };
@@ -1385,7 +1398,7 @@ var DropDownList = /** @class */ (function (_super) {
             if (this.enableVirtualization && this.value) {
                 var fields = (this.fields.value) ? this.fields.value : '';
                 var currentValue = this.allowObjectBinding && !isNullOrUndefined(this.value) ? getValue((this.fields.value) ? this.fields.value : '', this.value) : this.value;
-                if (this.dataSource instanceof DataManager && this.virtualGroupDataSource) {
+                if (this.dataSource instanceof DataManager) {
                     var getItem = new DataManager(this.virtualGroupDataSource).executeLocal(new Query().where(new Predicate(fields, 'equal', currentValue)));
                     if (getItem && getItem.length > 0) {
                         this.itemData = getItem[0];
@@ -1730,7 +1743,7 @@ var DropDownList = /** @class */ (function (_super) {
             if (!(this.dataSource instanceof DataManager) && dataType === 'string' || dataType === 'number') {
                 filterQuery.where('', filterType, this.typedString, this.ignoreCase, this.ignoreAccent);
             }
-            else if (((this.getModuleName() !== 'combobox') || this.enableVirtualization) || (this.isFiltering() && this.getModuleName() === 'combobox' && this.typedString !== '')) {
+            else if (((this.getModuleName() !== 'combobox')) || (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);
             }
@@ -1738,7 +1751,7 @@ var DropDownList = /** @class */ (function (_super) {
         else {
             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))) {
+        if (this.enableVirtualization && this.viewPortInfo.endIndex != 0) {
             var takeValue = this.getTakeValue();
             var alreadySkipAdded = false;
             if (filterQuery) {
@@ -1805,14 +1818,6 @@ var DropDownList = /** @class */ (function (_super) {
             }
             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 () {
@@ -1839,7 +1844,7 @@ var DropDownList = /** @class */ (function (_super) {
                         return;
                     }
                     _this.isCustomFilter = true;
-                    _this.customFilterQuery = query;
+                    _this.customFilterQuery = query.clone();
                     _this.filteringAction(dataSource, query, fields);
                 },
                 baseEventArgs: e,
@@ -2145,6 +2150,9 @@ var DropDownList = /** @class */ (function (_super) {
                     this.addNewItem(list, selectedItem);
                 }
                 if (!isNullOrUndefined(this.itemData) || (isNullOrUndefined(this.itemData) && this.enableVirtualization)) {
+                    this.getSkeletonCount();
+                    this.skeletonCount = this.totalItemCount != 0 && this.totalItemCount < (this.itemCount * 2) ? 0 : this.skeletonCount;
+                    this.UpdateSkeleton();
                     this.focusIndexItem();
                 }
                 if (this.enableVirtualization) {
@@ -2247,7 +2255,7 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.focusIndexItem = function () {
         var value = this.getItemData().value;
-        this.activeIndex = this.getIndexByValue(value);
+        this.activeIndex = ((this.enableVirtualization && !isNullOrUndefined(value)) || !this.enableVirtualization) ? this.getIndexByValue(value) : this.activeIndex;
         var element = this.findListElement(this.list, 'li', 'data-value', value);
         this.selectedLI = element;
         this.activeItem(element);
@@ -2668,7 +2676,7 @@ var DropDownList = /** @class */ (function (_super) {
                         }
                         else {
                             if (this.enableVirtualization) {
-                                liCount = keyAction == "pageDown" ? this.getPageCount() : liCount;
+                                liCount = keyAction == "pageDown" ? this.getPageCount() + 1 : liCount;
                             }
                             this.list.scrollTop += this.selectedLI.offsetHeight * liCount;
                         }
@@ -2687,7 +2695,6 @@ var DropDownList = /** @class */ (function (_super) {
                             this.isPreventKeyAction = false;
                             this.isKeyBoardAction = false;
                             this.isPreventScrollAction = false;
-                            nextOffset = nextOffset + (this.selectedLI.offsetHeight * liCount);
                         }
                         this.list.scrollTop = nextOffset;
                     }
@@ -2745,7 +2752,6 @@ var DropDownList = /** @class */ (function (_super) {
                         this.isPreventKeyAction = false;
                         this.isKeyBoardAction = false;
                         this.isPreventScrollAction = false;
-                        nextOffset = nextOffset - (this.selectedLI.offsetHeight * liCount);
                     }
                     this.list.scrollTop = this.list.scrollTop + nextOffset;
                 }
@@ -2940,7 +2946,7 @@ var DropDownList = /** @class */ (function (_super) {
             sentinelInfo: {},
             offsets: {},
             startIndex: 0,
-            endIndex: 0,
+            endIndex: this.itemCount,
         };
         if (this.getModuleName() === 'combobox') {
             this.typedString = "";
@@ -2948,8 +2954,12 @@ var DropDownList = /** @class */ (function (_super) {
         this.previousStartIndex = 0;
         this.previousEndIndex = 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;
+            if (this.remoteDataCount >= 0) {
+                this.totalItemCount = this.dataCount = this.remoteDataCount;
+            }
+            else {
+                this.resetList(this.dataSource);
+            }
         }
         else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/list-box/list-box.js

@@ -1668,12 +1668,6 @@ var ListBox = /** @class */ (function (_super) {
                 tListBox.ulElement.removeChild(noRecElem);
             }
         }
-        if (isRefresh) {
-            var noRecElem = fListBox.ulElement.childNodes[0];
-            if (noRecElem) {
-                fListBox.ulElement.removeChild(noRecElem);
-            }
-        }
         if (fListBox.listData.length > 0) {
             // eslint-disable-next-line prefer-spread
             flistboxarray = Array.apply(null, { length: fListBox.ulElement.childElementCount }).map(Number.call, Number);
@@ -1719,6 +1713,7 @@ var ListBox = /** @class */ (function (_super) {
             tListBox.liCollections = tliCollections.concat(fliCollections);
         }
         fListBox.value = [];
+        listData = listData.filter(function (data) { return (data !== undefined); });
         listData = listData
             .filter(function (data) { return data.isHeader !== true; });
         var sortedData = listData.filter(function (val) {

package/src/multi-select/multi-select.d.ts

@@ -53,6 +53,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isCustomRendered;
     private isRemoteSelection;
     private isSelectAllTarget;
+    private previousFocusItem;
+    private selectedListData;
     /**
      * The `fields` property maps the columns of the data table and binds the data to the component.
      * * text - Maps the text column from data table for each list item.
@@ -687,7 +689,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private updateAriaAttribute;
     private homeNavigation;
     private updateSelectionList;
-    private handleVirtualKeyboardActions;
+    protected handleVirtualKeyboardActions(e: KeyboardEventArgs, pageCount: number): void;
     private onKeyDown;
     private arrowDown;
     private arrowUp;