@syncfusion/ej2-dropdowns 34.2.7 → 35.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 34.2.7
+*  version : 35.1.37
 *  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.2.7",
+  "version": "35.1.37",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~34.2.6",
-    "@syncfusion/ej2-data": "~34.2.6",
-    "@syncfusion/ej2-inputs": "~34.2.7",
-    "@syncfusion/ej2-lists": "~34.2.6",
-    "@syncfusion/ej2-navigations": "~34.2.7",
-    "@syncfusion/ej2-notifications": "~34.2.6",
-    "@syncfusion/ej2-popups": "~34.2.6"
+    "@syncfusion/ej2-base": "~35.1.37",
+    "@syncfusion/ej2-data": "~35.1.37",
+    "@syncfusion/ej2-inputs": "~35.1.37",
+    "@syncfusion/ej2-lists": "~35.1.37",
+    "@syncfusion/ej2-navigations": "~35.1.37",
+    "@syncfusion/ej2-notifications": "~35.1.37",
+    "@syncfusion/ej2-popups": "~35.1.37"
   },
   "devDependencies": {},
   "keywords": [

package/src/common/interface.d.ts

@@ -108,7 +108,7 @@ export interface IDropdownlist extends Component<HTMLElement> {
     handleVirtualKeyboardActions(e: KeyboardEventArgs, pageCount: number): void;
     resetList(dataSource?: {
         [key: string]: Object;
-    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
+    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent, skipExecuteLocal?: boolean): void;
     findListElement(list: HTMLElement, findNode: string, attribute: string, value: string | boolean | number): HTMLElement;
     scrollStop(e?: Event): void;
     targetElement(): string;

package/src/common/virtual-scroll.js

@@ -247,7 +247,14 @@ var VirtualScroll = /** @class */ (function () {
                     if (oldUlElement) {
                         this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
                     }
-                    this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    if (this.component === 'multiselect' && this.parent.value.length >= this.parent.getSummaryTagThreshold() &&
+                        this.parent.mode === 'CheckBox' && this.parent.enableVirtualization) {
+                        this.parent.resetList(this.parent.dataSource, this.parent.fields, query, undefined, true);
+                    }
+                    else {
+                        this.parent.resetList(this.parent.dataSource, this.parent.fields, query);
+                    }
                     isListUpdated = false;
                     this.parent.appendUncheckList = this.parent.dataSource instanceof DataManager ? this.parent.appendUncheckList : false;
                     oldUlElement = null;

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

@@ -583,6 +583,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @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.
+     * @param {boolean} skipExecuteLocal - Specifies whether to skip executing the local query on the data source and use unchecked values instead.
      * @returns {void}
      */
     private setListData;
@@ -706,11 +707,12 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @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.
+     * @param {boolean} skipExecuteLocal - Specifies whether to skip executing the local query on the data source and use unchecked values instead.
      * @returns {void}
      */
     protected resetList(dataSource?: {
         [key: string]: Object;
-    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent): void;
+    }[] | DataManager | string[] | number[] | boolean[], fields?: FieldSettingsModel, query?: Query, e?: MouseEvent | KeyboardEventArgs | TouchEvent, skipExecuteLocal?: boolean): void;
     protected updateSelectElementData(isFiltering: boolean): void;
     protected updateSelection(): void;
     protected renderList(): void;

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

@@ -745,9 +745,10 @@ var DropDownBase = /** @class */ (function (_super) {
      * @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.
+     * @param {boolean} skipExecuteLocal - Specifies whether to skip executing the local query on the data source and use unchecked values instead.
      * @returns {void}
      */
-    DropDownBase.prototype.setListData = function (dataSource, fields, query, event) {
+    DropDownBase.prototype.setListData = function (dataSource, fields, query, event, skipExecuteLocal) {
         var _this = this;
         fields = fields ? fields : this.fields;
         var ulElement;
@@ -768,6 +769,9 @@ var DropDownBase = /** @class */ (function (_super) {
                         }
                         var query_1 = _this.getQuery(eventArgs.query);
                         eventArgs.data.executeQuery(query_1).then(function (e) {
+                            if (_this.isAngular && _this.isDestroyed) {
+                                return;
+                            }
                             _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                             var isReOrder = true;
                             if (!_this.virtualSelectAll) {
@@ -829,6 +833,9 @@ var DropDownBase = /** @class */ (function (_super) {
                                     _this.isRequesting = false;
                                     _this.isCustomFiltering = false;
                                     var listItems = e.result;
+                                    if (_this.getModuleName() === 'dropdownlist' && listItems.length === 0 && _this.filterInput && _this.filterInput.value.trim() === '' && _this.actionCompleteData && _this.actionCompleteData.list && _this.actionCompleteData.list.length) {
+                                        listItems = _this.actionCompleteData.list;
+                                    }
                                     if (_this.isIncrementalRequest) {
                                         ulElement = _this.renderItems(listItems, fields);
                                         return;
@@ -902,7 +909,13 @@ var DropDownBase = /** @class */ (function (_super) {
                             _this.virtualGroupDataSource
                             && !_this.isCustomDataUpdated ? new DataManager(_this.virtualGroupDataSource) :
                             new DataManager(eventArgs.data);
-                        listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        if (!skipExecuteLocal) {
+                            listItems = (_this.getQuery(eventArgs.query)).executeLocal(dataManager);
+                        }
+                        else {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            listItems = { count: _this.uncheckedValues.length, result: _this.uncheckedValues };
+                        }
                         if (!_this.virtualSelectAll) {
                             var newQuery = _this.getQuery(eventArgs.query);
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1817,9 +1830,10 @@ var DropDownBase = /** @class */ (function (_super) {
      * @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.
+     * @param {boolean} skipExecuteLocal - Specifies whether to skip executing the local query on the data source and use unchecked values instead.
      * @returns {void}
      */
-    DropDownBase.prototype.resetList = function (dataSource, fields, query, e) {
+    DropDownBase.prototype.resetList = function (dataSource, fields, query, e, skipExecuteLocal) {
         if (this.list) {
             if ((this.element.tagName === 'SELECT' && this.element.options.length > 0)
                 || (this.element.tagName === 'UL' && this.element.childNodes.length > 0)) {
@@ -1835,7 +1849,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 this.setCustomListData(dataSource, fields, query, e);
             }
             else {
-                this.setListData(dataSource, fields, query, e);
+                this.setListData(dataSource, fields, query, e, skipExecuteLocal);
             }
         }
     };

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

@@ -4302,9 +4302,11 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.updateFloatLabelOverflowWidth = function () {
         var container = this.inputWrapper.container;
         var label = container.querySelector('.e-float-text');
-        var calculateWidth = (container.clientWidth - this.getRightIconsWidth());
-        if (label && calculateWidth && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1)) {
-            label.style.width = calculateWidth + 'px';
+        if (label && !(this.cssClass && this.cssClass.split(' ').indexOf('e-outline') !== -1)) {
+            var calculateWidth = (container.clientWidth - this.getRightIconsWidth());
+            if (calculateWidth) {
+                label.style.width = calculateWidth + 'px';
+            }
         }
     };
     /**

package/src/mention/mention.js

@@ -1049,8 +1049,12 @@ var Mention = /** @class */ (function (_super) {
             }
             this.isTyped = false;
             range.collapse(false);
-            rect = range.getBoundingClientRect().top === 0 ? range.startContainer.getClientRects()[0] :
-                range.getBoundingClientRect();
+            var node = range.startContainer;
+            var clientRects = node.nodeType === Node.TEXT_NODE ? node.parentElement.getClientRects()
+                : node.getClientRects();
+            rect = range.getBoundingClientRect().top === 0 ?
+                (clientRects && clientRects.length ? clientRects[0] : range.getBoundingClientRect())
+                : range.getBoundingClientRect();
         }
         var rectTop = rect.top;
         var rectLeft = rect.left;

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

@@ -414,6 +414,22 @@ export interface MultiSelectModel extends DropDownBaseModel{
      */
     mode?: visualMode;
 
+    /**
+     * Defines the threshold number of selected items above which the summary template is applied (CheckBox mode only).
+     *
+     * @default 0
+     * @type {number}
+     */
+    summaryTagCount?: number;
+
+    /**
+     * Specifies the string template content for displaying selected items in the input field (CheckBox mode only).
+     *
+     * @default '${selectedCount} items selected'
+     * @type {string}
+     */
+    summaryTagTemplate?: string;
+
     /**
      * Sets the delimiter character for 'default' and 'delimiter' visibility modes.
      *

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

@@ -47,6 +47,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isSelectAll;
     private isSelectAllClicked;
     private isProcessingVirtualSelectAll;
+    private wasSelectAllActive;
     private clearIconWidth;
     private previousFilterText;
     private selectedElementID;
@@ -81,6 +82,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private preventKeyboardInteraction;
     private scrollEvent;
     private isPropertyChanged;
+    private uncheckedValues;
     /**
      * 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.
@@ -450,6 +452,20 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @default Default
      */
     mode: visualMode;
+    /**
+     * Defines the threshold number of selected items above which the summary template is applied (CheckBox mode only).
+     *
+     * @default 0
+     * @type {number}
+     */
+    summaryTagCount: number;
+    /**
+     * Specifies the string template content for displaying selected items in the input field (CheckBox mode only).
+     *
+     * @default '${selectedCount} items selected'
+     * @type {string}
+     */
+    summaryTagTemplate: string;
     /**
      * Sets the delimiter character for 'default' and 'delimiter' visibility modes.
      *
@@ -704,6 +720,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private updateActionList;
     protected getAppendToElement(): HTMLElement;
     private refreshSelection;
+    private extendSelectionToNewItems;
     private hideGroupItem;
     protected getValidLi(): HTMLElement;
     private checkSelectAll;
@@ -791,6 +808,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private refreshPlaceHolder;
     private removeAllItems;
     private invokeCheckboxSelection;
+    private isDimColumnWithCustomStyle;
     private removeValue;
     private updateMainList;
     private isFilteringWithRemoteData;
@@ -893,6 +911,9 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      */
     hideSpinner(): void;
     protected updateWrapperText(wrapperType: HTMLElement, wrapperData: string): void;
+    private getSummaryTagThreshold;
+    private getSummaryTagText;
+    private applySummaryTagWidth;
     private updateDelimView;
     private checkClearIconWidth;
     private updateRemainWidth;