@syncfusion/ej2-dropdowns 34.1.29 → 34.1.32

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 34.1.29
+*  version : 34.1.32
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "34.1.29",
+  "version": "34.1.32",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,11 +8,11 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~34.1.29",
-    "@syncfusion/ej2-data": "~34.1.29",
-    "@syncfusion/ej2-inputs": "~34.1.29",
-    "@syncfusion/ej2-lists": "~34.1.29",
-    "@syncfusion/ej2-navigations": "~34.1.29",
+    "@syncfusion/ej2-base": "~34.1.30",
+    "@syncfusion/ej2-data": "~34.1.32",
+    "@syncfusion/ej2-inputs": "~34.1.32",
+    "@syncfusion/ej2-lists": "~34.1.30",
+    "@syncfusion/ej2-navigations": "~34.1.31",
     "@syncfusion/ej2-notifications": "~34.1.29",
     "@syncfusion/ej2-popups": "~34.1.29"
   },

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

@@ -475,7 +475,7 @@ var ComboBox = /** @class */ (function (_super) {
             return false;
         }
         else {
-            return _super.prototype.setValue.call(this, e);
+            return _super.prototype.setValue.call(this, e, this.autofill);
         }
     };
     ComboBox.prototype.checkCustomValue = function () {

package/src/common/virtual-scroll.d.ts

@@ -38,12 +38,14 @@ export declare class VirtualScroll {
     private touchModule;
     private component;
     private scrollHandler;
+    private previousScrollTop;
     constructor(parent: IDropdownlist);
     addEventListener(): void;
     removeEventListener(): void;
     private bindScrollEvent;
     private observe;
     getModuleName(): string;
+    private isFilterScrollScenario;
     private popupScrollHandler;
     private getPageQuery;
     private setGeneratedData;

package/src/common/virtual-scroll.js

@@ -50,6 +50,7 @@ import { DataManager, Query } from '@syncfusion/ej2-data';
 var VirtualScroll = /** @class */ (function () {
     function VirtualScroll(parent) {
         var _this = this;
+        this.previousScrollTop = 0;
         this.sentinelInfo = {
             'up': {
                 check: function (rect, info) {
@@ -110,9 +111,14 @@ var VirtualScroll = /** @class */ (function () {
     VirtualScroll.prototype.getModuleName = function () {
         return 'VirtualScroll';
     };
+    VirtualScroll.prototype.isFilterScrollScenario = function () {
+        return this.component === 'dropdownlist' && this.parent.allowFiltering;
+    };
     VirtualScroll.prototype.popupScrollHandler = function () {
         this.parent.isMouseScrollAction = true;
-        this.parent.isPreventScrollAction = false;
+        if (!(this.isFilterScrollScenario() && this.parent.isVirtualScrolling)) {
+            this.parent.isPreventScrollAction = false;
+        }
     };
     VirtualScroll.prototype.getPageQuery = function (query, virtualStartIndex, virtualEndIndex) {
         if (virtualEndIndex !== 0 && !this.parent.allowFiltering && this.component !== 'autocomplete') {
@@ -482,7 +488,8 @@ var VirtualScroll = /** @class */ (function () {
     };
     VirtualScroll.prototype.scrollListener = function (scrollArgs) {
         var _this = this;
-        if (!this.parent.isPreventScrollAction && !this.parent.isVirtualTrackHeight) {
+        var preventReentrant = this.isFilterScrollScenario() && this.parent.isVirtualScrolling;
+        if (!this.parent.isPreventScrollAction && !this.parent.isVirtualTrackHeight && !preventReentrant) {
             this.parent.preventSetCurrentData = false;
             var info = scrollArgs.sentinel;
             var pStartIndex = this.parent.previousStartIndex;
@@ -494,6 +501,8 @@ var VirtualScroll = /** @class */ (function () {
                 this.parent.virtualListInfo = __assign({}, this.parent.viewPortInfo);
                 this.parent.isPreventKeyAction = true;
                 this.parent.isVirtualScrolling = true;
+                var savedScrollTop_1 = this.parent.popupContentElement ?
+                    this.parent.popupContentElement.scrollTop : 0;
                 setTimeout(function () {
                     _this.parent.pageCount = _this.parent.getPageCount();
                     _this.parent.isRequesting = false;
@@ -503,9 +512,16 @@ var VirtualScroll = /** @class */ (function () {
                             _this.parent.updateSelectionList();
                             _this.parent.liCollections = _this.parent.getItems();
                         }
+                        if (_this.isFilterScrollScenario()) {
+                            var scrollContainer = _this.parent.popupContentElement || _this.parent.list;
+                            if (scrollContainer && scrollContainer.scrollTop < savedScrollTop_1) {
+                                scrollContainer.scrollTop = savedScrollTop_1;
+                            }
+                            _this.previousScrollTop = scrollContainer ? scrollContainer.scrollTop : savedScrollTop_1;
+                        }
                         _this.parent.isKeyBoardAction = false;
-                        _this.parent.isVirtualScrolling = false;
                         _this.parent.isPreventKeyAction = false;
+                        _this.parent.isVirtualScrolling = false;
                     });
                 }, 5);
             }
@@ -579,14 +595,17 @@ var VirtualScroll = /** @class */ (function () {
     VirtualScroll.prototype.virtualScrollHandler = function (callback) {
         var _this = this;
         var delay = Browser.info.name === 'chrome' ? 200 : 100;
-        var prevTop = 0;
         var debounced100 = debounce(callback, delay);
         var debounced50 = debounce(callback, 50);
         return function (e) {
             var top = e.target.scrollTop;
             var left = e.target.scrollLeft;
-            var direction = prevTop < top && !_this.parent.isUpwardScrolling ? 'down' : 'up';
-            prevTop = top;
+            if (_this.isFilterScrollScenario() && (_this.parent.isVirtualScrolling || _this.parent.isPreventScrollAction)) {
+                _this.previousScrollTop = top;
+                return;
+            }
+            var direction = _this.previousScrollTop < top && !_this.parent.isUpwardScrolling ? 'down' : 'up';
+            _this.previousScrollTop = top;
             var current = _this.sentinelInfo[direction];
             var pstartIndex = _this.parent.scrollPreStartIndex;
             var scrollOffsetargs = {

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

@@ -87,6 +87,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private tabIndex;
     private isNotSearchList;
     protected isTyped: boolean;
+    protected isProgrammaticValueUpdate: boolean;
     protected isSelected: boolean;
     protected preventFocus: boolean;
     protected preventAutoFill: boolean;
@@ -534,7 +535,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected updateSelectedItem(li: Element, e: MouseEvent | KeyboardEvent | TouchEvent, preventSelect?: boolean, isSelection?: boolean): void;
     private selectEventCallback;
     protected activeItem(li: Element): void;
-    protected setValue(e?: KeyboardEventArgs): boolean;
+    protected setValue(e?: KeyboardEventArgs, autofill?: boolean): boolean;
     protected setSelection(li: Element, e: MouseEvent | KeyboardEventArgs | TouchEvent): void;
     private setSelectOptions;
     private dropdownCompiler;

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

@@ -121,6 +121,7 @@ var DropDownList = /** @class */ (function (_super) {
         this.initialRemoteRender = false;
         this.isNotSearchList = false;
         this.isTyped = false;
+        this.isProgrammaticValueUpdate = false;
         this.isSelected = false;
         this.preventFocus = false;
         this.preventAutoFill = false;
@@ -1594,7 +1595,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    DropDownList.prototype.setValue = function (e) {
+    DropDownList.prototype.setValue = function (e, autofill) {
         var dataItem = this.getItemData();
         this.isTouched = !isNullOrUndefined(e);
         if (dataItem.value === null) {
@@ -1626,7 +1627,7 @@ var DropDownList = /** @class */ (function (_super) {
             (this.previousValue != null && this.isObjectInArray(this.previousValue, [this.allowCustom &&
                     this.isObjectCustomValue ? this.value ? this.value : dataItem : dataItem.value ?
                     this.getDataByValue(dataItem.value) : dataItem])))) {
-            if (this.getModuleName() === 'combobox' && this.autoFill && e && (e.type === 'click' || e.action === 'enter')) {
+            if (this.getModuleName() === 'combobox' && autofill && e && (e.type === 'click' || e.action === 'enter')) {
                 return false;
             }
             this.isSelected = false;
@@ -2417,6 +2418,9 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 this.initial = false;
             }
+            if (this.isProgrammaticValueUpdate && !isNullOrUndefined(this.value) && this.getModuleName() === 'combobox') {
+                this.detachChangeEvent(null);
+            }
             else if (this.getModuleName() === 'autocomplete' && this.value) {
                 this.setInputValue();
             }
@@ -2523,10 +2527,13 @@ var DropDownList = /** @class */ (function (_super) {
         var _this = this;
         if (isOffline === void 0) { isOffline = false; }
         var fieldValue = this.fields.value.split('.');
-        var checkVal = list.some(function (x) {
-            return isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
-                _this.checkFieldValue(x, fieldValue) === value : x[checkField] === value;
-        });
+        var checkVal = false;
+        if (!isNullOrUndefined(list) && list.length > 0) {
+            checkVal = list.some(function (x) {
+                return isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
+                    _this.checkFieldValue(x, fieldValue) === value : x[checkField] === value;
+            });
+        }
         if (this.enableVirtualization && this.virtualGroupDataSource) {
             checkVal = this.virtualGroupDataSource.some(function (x) {
                 return isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
@@ -4065,6 +4072,9 @@ var DropDownList = /** @class */ (function (_super) {
                         this_1.isObjectInArray(newProp.value, [oldProp.value])) {
                         return { value: void 0 };
                     }
+                    if (!this_1.initial && this_1.dataSource instanceof DataManager) {
+                        this_1.isProgrammaticValueUpdate = true;
+                    }
                     if (this_1.enableVirtualization) {
                         var isOfflineMode = this_1.dataSource instanceof DataManager &&
                             this_1.dataSource.dataSource.offline === true;

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

@@ -795,6 +795,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private invokeCheckboxSelection;
     private removeValue;
     private updateMainList;
+    private isFilteringWithRemoteData;
     private removeChip;
     private setWidth;
     private updateChipStatus;

package/src/multi-select/multi-select.js

@@ -540,49 +540,154 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.getForQuery = function (valuecheck, isCheckbox) {
         var predicate;
         var field = this.isPrimitiveData ? '' : this.fields.value;
-        if (this.enableVirtualization && valuecheck) {
-            if (isCheckbox) {
-                var startindex = this.viewPortInfo.startIndex;
-                var endindex = (((startindex + this.viewPortInfo.endIndex) <= (valuecheck.length)) &&
-                    valuecheck[(startindex + this.viewPortInfo.endIndex)]) &&
-                    (this.dataSource instanceof DataManager && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2))
-                    ? (startindex + this.viewPortInfo.endIndex)
-                    : (valuecheck.length);
-                for (var i = startindex; i < endindex; i++) {
-                    var value = this.allowObjectBinding ? getValue((this.fields.value) ?
-                        this.fields.value : '', valuecheck[i]) : valuecheck[i];
-                    if (i === startindex) {
-                        predicate = new Predicate(field, 'equal', (value));
+        if (valuecheck && valuecheck.length >= 3000) {
+            // Batch size to prevent stack overflow with large preselected values (EJ2-Fix-MaxCallStack)
+            var BATCH_SIZE = 100;
+            if (this.enableVirtualization) {
+                if (isCheckbox) {
+                    var startindex = this.viewPortInfo.startIndex;
+                    var endindex = (((startindex + this.viewPortInfo.endIndex) <= (valuecheck.length)) &&
+                        valuecheck[(startindex + this.viewPortInfo.endIndex)]) &&
+                        (this.dataSource instanceof DataManager && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2))
+                        ? (startindex + this.viewPortInfo.endIndex)
+                        : (valuecheck.length);
+                    // Build predicates in batches to prevent stack overflow
+                    var predicateBatches = [];
+                    for (var batchStart = startindex; batchStart < endindex; batchStart += BATCH_SIZE) {
+                        var batchPredicate = void 0;
+                        var batchEnd = Math.min(batchStart + BATCH_SIZE, endindex);
+                        for (var i = batchStart; i < batchEnd; i++) {
+                            var itemAtIndex = valuecheck[i];
+                            var value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                                this.fields.value : '', itemAtIndex) : itemAtIndex;
+                            if (i === batchStart) {
+                                batchPredicate = new Predicate(field, 'equal', (value));
+                            }
+                            else {
+                                batchPredicate = batchPredicate.or(field, 'equal', (value));
+                            }
+                        }
+                        predicateBatches.push(batchPredicate);
                     }
-                    else {
-                        predicate = predicate.or(field, 'equal', (value));
+                    // Combine all batch predicates
+                    predicate = predicateBatches[0];
+                    for (var i = 1; i < predicateBatches.length; i++) {
+                        predicate = predicate.or(predicateBatches[i]);
+                    }
+                    return new Query().where(predicate);
+                }
+                else {
+                    // Build predicates in batches to prevent stack overflow
+                    var predicateBatches = [];
+                    var isAddNonPresentItems = this.isaddNonPresentItems;
+                    for (var batchStart = 0; batchStart < valuecheck.length; batchStart += BATCH_SIZE) {
+                        var batchPredicate = void 0;
+                        var batchEnd = Math.min(batchStart + BATCH_SIZE, valuecheck.length);
+                        for (var i = batchStart; i < batchEnd; i++) {
+                            var itemAtIndex = valuecheck[i];
+                            var value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                                this.fields.value : '', itemAtIndex) : itemAtIndex;
+                            if (i === batchStart) {
+                                if (isAddNonPresentItems) {
+                                    batchPredicate = new Predicate(field, 'equal', itemAtIndex);
+                                }
+                                else {
+                                    batchPredicate = new Predicate(field, 'notequal', (value));
+                                }
+                            }
+                            else {
+                                if (isAddNonPresentItems) {
+                                    batchPredicate = batchPredicate.or(field, 'equal', itemAtIndex);
+                                }
+                                else {
+                                    batchPredicate = batchPredicate.and(field, 'notequal', (value));
+                                }
+                            }
+                        }
+                        predicateBatches.push(batchPredicate);
+                    }
+                    // Combine batch predicates
+                    predicate = predicateBatches[0];
+                    for (var i = 1; i < predicateBatches.length; i++) {
+                        if (isAddNonPresentItems) {
+                            predicate = predicate.or(predicateBatches[i]);
+                        }
+                        else {
+                            predicate = predicate.and(predicateBatches[i]);
+                        }
                     }
+                    return new Query().where(predicate);
                 }
-                return new Query().where(predicate);
             }
             else {
-                for (var i = 0; i < valuecheck.length; i++) {
-                    var value = this.allowObjectBinding ? getValue((this.fields.value) ?
-                        this.fields.value : '', valuecheck[i]) : valuecheck[i];
-                    if (this.isaddNonPresentItems) {
-                        predicate = i === 0 ? new Predicate(field, 'equal', valuecheck[i])
-                            : predicate.or(field, 'equal', valuecheck[i]);
-                    }
-                    else {
-                        predicate = i === 0 ? predicate = new Predicate(field, 'notequal', (value))
-                            : predicate.and(field, 'notequal', (value));
+                // Build predicates in batches to prevent stack overflow with large preselected values
+                var predicateBatches = [];
+                for (var batchStart = 0; batchStart < valuecheck.length; batchStart += BATCH_SIZE) {
+                    var batchPredicate = void 0;
+                    var batchEnd = Math.min(batchStart + BATCH_SIZE, valuecheck.length);
+                    for (var i = batchStart; i < batchEnd; i++) {
+                        var itemAtIndex = valuecheck[i];
+                        if (i === batchStart) {
+                            batchPredicate = new Predicate(field, 'equal', itemAtIndex);
+                        }
+                        else {
+                            batchPredicate = batchPredicate.or(field, 'equal', itemAtIndex);
+                        }
                     }
+                    predicateBatches.push(batchPredicate);
+                }
+                // Combine all batch predicates
+                predicate = predicateBatches[0];
+                for (var i = 1; i < predicateBatches.length; i++) {
+                    predicate = predicate.or(predicateBatches[i]);
                 }
-                return new Query().where(predicate);
             }
         }
         else {
-            for (var i = 0; i < valuecheck.length; i++) {
-                if (i === 0) {
-                    predicate = new Predicate(field, 'equal', valuecheck[i]);
+            if (this.enableVirtualization && valuecheck) {
+                if (isCheckbox) {
+                    var startindex = this.viewPortInfo.startIndex;
+                    var endindex = (((startindex + this.viewPortInfo.endIndex) <= (valuecheck.length)) &&
+                        valuecheck[(startindex + this.viewPortInfo.endIndex)]) &&
+                        (this.dataSource instanceof DataManager && this.totalItemCount !== 0 && this.totalItemCount > (this.itemCount * 2))
+                        ? (startindex + this.viewPortInfo.endIndex)
+                        : (valuecheck.length);
+                    for (var i = startindex; i < endindex; i++) {
+                        var value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                            this.fields.value : '', valuecheck[i]) : valuecheck[i];
+                        if (i === startindex) {
+                            predicate = new Predicate(field, 'equal', (value));
+                        }
+                        else {
+                            predicate = predicate.or(field, 'equal', (value));
+                        }
+                    }
+                    return new Query().where(predicate);
                 }
                 else {
-                    predicate = predicate.or(field, 'equal', valuecheck[i]);
+                    for (var i = 0; i < valuecheck.length; i++) {
+                        var value = this.allowObjectBinding ? getValue((this.fields.value) ?
+                            this.fields.value : '', valuecheck[i]) : valuecheck[i];
+                        if (this.isaddNonPresentItems) {
+                            predicate = i === 0 ? new Predicate(field, 'equal', valuecheck[i])
+                                : predicate.or(field, 'equal', valuecheck[i]);
+                        }
+                        else {
+                            predicate = i === 0 ? predicate = new Predicate(field, 'notequal', (value))
+                                : predicate.and(field, 'notequal', (value));
+                        }
+                    }
+                    return new Query().where(predicate);
+                }
+            }
+            else {
+                for (var i = 0; i < valuecheck.length; i++) {
+                    if (i === 0) {
+                        predicate = new Predicate(field, 'equal', valuecheck[i]);
+                    }
+                    else {
+                        predicate = predicate.or(field, 'equal', valuecheck[i]);
+                    }
                 }
             }
         }
@@ -2858,6 +2963,9 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
     };
+    MultiSelect.prototype.isFilteringWithRemoteData = function () {
+        return !isNullOrUndefined(this.mainData) && this.mainData.length > 0 && this.allowFiltering;
+    };
     MultiSelect.prototype.removeChip = function (value, isClearAll) {
         if (this.chipCollectionWrapper) {
             if (!(this.enableVirtualization && isClearAll)) {
@@ -4072,6 +4180,9 @@ var MultiSelect = /** @class */ (function (_super) {
                         getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) :
                         this.value[index];
                     element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value_2);
+                    if (!element && !isNullOrUndefined(this.mainList) && this.isFilteringWithRemoteData()) {
+                        element = this.findListElement(this.mainList, 'li', 'data-value', value_2);
+                    }
                     var isCustomData = false;
                     if (this.enableVirtualization) {
                         text = null;
@@ -4118,6 +4229,12 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     else {
                         text = this.getTextByValue(value_2);
+                        if (text === value_2 && this.isFilteringWithRemoteData()) {
+                            var savedListData = this.listData;
+                            this.listData = this.mainData;
+                            text = this.getTextByValue(value_2);
+                            this.listData = savedListData;
+                        }
                     }
                     if (((element && (element.getAttribute('aria-selected') !== 'true')) ||
                         (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&
@@ -6400,6 +6517,8 @@ var MultiSelect = /** @class */ (function (_super) {
             this.chipCollectionWrapper = this.createElement('span', {
                 className: CHIP_WRAPPER
             });
+            this.chipCollectionWrapper.setAttribute('role', 'listbox');
+            this.chipCollectionWrapper.setAttribute('aria-label', 'multiselect');
             this.chipCollectionWrapper.style.display = 'none';
             if (this.mode === 'Default') {
                 this.chipCollectionWrapper.setAttribute('id', getUniqueID('chip_default'));

package/styles/auto-complete/_variables.scss

@@ -1,2 +1,2 @@
-@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/combo-box/_variables.scss

@@ -1,2 +1,2 @@
-@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/drop-down-base/_variables.scss

@@ -1,2 +1,2 @@
-@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/drop-down-list/_variables.scss

@@ -1,2 +1,2 @@
-@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/drop-down-tree/_variables.scss

@@ -1,2 +1,2 @@
-@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/list-box/_variables.scss

@@ -1,2 +1,2 @@
-@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/mention/_variables.scss

@@ -1,2 +1,2 @@
-@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';

package/styles/multi-select/_variables.scss

@@ -1,2 +1,2 @@
-@forward '@syncfusion/ej2-base/styles/common/_base-variables';
+@forward '../../node_modules/@syncfusion/ej2-base/styles/common/_base-variables';
 @forward '_material3-definition';