@syncfusion/ej2-dropdowns 25.1.39 → 25.1.41

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

@@ -497,12 +497,14 @@ var ListBox = /** @class */ (function (_super) {
             else {
                 scrollParent = wrapper;
             }
-            boundRect = scrollParent.getBoundingClientRect();
-            if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {
-                this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, true); }, 70);
-            }
-            else if ((event.clientY - scrollMoved) - boundRect.y < 1) {
-                this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, false); }, 70);
+            if (scrollParent) {
+                boundRect = scrollParent.getBoundingClientRect();
+                if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {
+                    this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, true); }, 70);
+                }
+                else if ((event.clientY - scrollMoved) - boundRect.y < 1) {
+                    this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, false); }, 70);
+                }
             }
         }
         if (args.target === null) {
@@ -925,6 +927,9 @@ var ListBox = /** @class */ (function (_super) {
         if (this.listData.length === 0) {
             this.l10nUpdate();
         }
+        if (this.listData.length !== this.sortedData.length) {
+            this.sortedData = this.listData;
+        }
         this.value = [];
         this.updateToolBarState();
     };
@@ -1647,6 +1652,9 @@ var ListBox = /** @class */ (function (_super) {
         var jsonData = [].slice.call(tListBox.jsonData);
         var isRefresh = tListBox.sortOrder !== 'None' || (tListBox.selectionSettings.showCheckbox !==
             fListBox.selectionSettings.showCheckbox) || tListBox.fields.groupBy || tListBox.itemTemplate || fListBox.itemTemplate;
+        var tempLiColl = [];
+        var tempData = [];
+        var flistboxarray = [];
         this.removeSelected(fListBox, fListBox.getSelectedItems());
         var tempItems = [].slice.call(fListBox.listData);
         var localDataArgs = { cancel: false, items: tempItems, eventName: this.toolbarAction };
@@ -1660,29 +1668,43 @@ 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);
+        }
+        var _loop_3 = function (i) {
+            if (fListBox.ulElement.childNodes[i].classList.contains('e-disabled')) {
+                flistboxarray = flistboxarray.filter(function (item) { return item !== i; });
+                tempLiColl.push(fListBox.ulElement.childNodes[i]);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                tempData.push(fListBox.listData[i]);
             }
+        };
+        for (var i = 0; i < fListBox.ulElement.childElementCount; i++) {
+            _loop_3(i);
         }
-        moveTo(fListBox.ulElement, tListBox.ulElement, 
-        // eslint-disable-next-line prefer-spread
-        Array.apply(null, { length: fListBox.ulElement.childElementCount }).map(Number.call, Number), index);
+        moveTo(fListBox.ulElement, tListBox.ulElement, flistboxarray, index);
         this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
         if (isKey) {
             this.list.focus();
         }
         index = (index) ? index : listData.length;
-        for (var i = 0; i < fListBox.listData.length; i++) {
-            listData.splice(index + i, 0, fListBox.listData[i]);
+        for (var i = 0; i < flistboxarray.length; i++) {
+            listData.splice(index + i, 0, fListBox.listData[flistboxarray[i]]);
         }
-        for (var i = 0; i < fListBox.jsonData.length; i++) {
-            jsonData.splice(index + i, 0, fListBox.jsonData[i]);
+        for (var i = 0; i < flistboxarray.length; i++) {
+            jsonData.splice(index + i, 0, fListBox.jsonData[flistboxarray[i]]);
+        }
+        var fliCollections = [];
+        if (tempLiColl.length > 0) {
+            fListBox.liCollections = tempLiColl;
+            fliCollections = [].slice.call(fListBox.liCollections);
+        }
+        else {
+            fliCollections = [].slice.call(fListBox.liCollections);
+            fListBox.liCollections = [];
         }
-        var fliCollections = [].slice.call(fListBox.liCollections);
         var tliCollections = [].slice.call(tListBox.liCollections);
-        fListBox.liCollections = [];
         if (index) {
             var toColl = tliCollections.splice(0, index);
             tListBox.liCollections = toColl.concat(fliCollections).concat(tliCollections);
@@ -1691,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) {
@@ -1702,7 +1725,7 @@ var ListBox = /** @class */ (function (_super) {
         }
         tListBox.listData = listData;
         if (fListBox.listData.length === fListBox.jsonData.length) {
-            fListBox.listData = fListBox.sortedData = fListBox.jsonData = [];
+            fListBox.listData = fListBox.sortedData = fListBox.jsonData = tempData;
         }
         else if (fListBox.allowFiltering) {
             for (var i = 0; i < fListBox.listData.length; i++) {
@@ -1723,6 +1746,11 @@ var ListBox = /** @class */ (function (_super) {
             tListBox.sortedData = listData;
         }
         fListBox.updateSelectedOptions();
+        if (tempLiColl.length > 0) {
+            var wrap = this.list.parentElement.getElementsByClassName('e-listbox-tool')[0];
+            var btn = wrap.querySelector('[data-value="' + this.toolbarAction + '"]');
+            btn.disabled = true;
+        }
         if (fListBox.listData.length === 0) {
             fListBox.l10nUpdate();
         }
@@ -1943,6 +1971,9 @@ var ListBox = /** @class */ (function (_super) {
                             if (!args.cancel && !_this.isCustomFiltering && !args.preventDefaultAction) {
                                 _this.inputString = _this.filterInput.value;
                                 _this.filteringAction(_this.jsonData, new Query(), _this.fields);
+                                if (_this.toolbarSettings.items.length > 0) {
+                                    _this.updateToolBarState();
+                                }
                             }
                             if (!_this.isFiltered && !_this.isCustomFiltering && !args.preventDefaultAction) {
                                 _this.dataUpdater(_this.jsonData, new Query(), _this.fields);

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;