@syncfusion/ej2-dropdowns 30.1.39 → 30.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 30.1.39
+*  version : 30.1.41
 *  Copyright Syncfusion Inc. 2001 - 2024. 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": "30.1.39",
+  "version": "30.1.41",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -9,12 +9,12 @@
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
     "@syncfusion/ej2-base": "~30.1.38",
-    "@syncfusion/ej2-data": "~30.1.38",
-    "@syncfusion/ej2-inputs": "~30.1.38",
-    "@syncfusion/ej2-lists": "~30.1.37",
-    "@syncfusion/ej2-navigations": "~30.1.39",
+    "@syncfusion/ej2-data": "~30.1.40",
+    "@syncfusion/ej2-inputs": "~30.1.40",
+    "@syncfusion/ej2-lists": "~30.1.41",
+    "@syncfusion/ej2-navigations": "~30.1.41",
     "@syncfusion/ej2-notifications": "~30.1.37",
-    "@syncfusion/ej2-popups": "~30.1.37"
+    "@syncfusion/ej2-popups": "~30.1.40"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -197,6 +197,10 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     private scrollTimer;
     protected list: HTMLElement;
     protected fixedHeaderElement: HTMLElement;
+    protected isFilterAction: boolean;
+    private isUpdateGroupTemplate;
+    private groupHeaderItems;
+    private fiteredGroupHeaderItems;
     protected keyboardModule: KeyboardEvents;
     protected enableRtlElements: HTMLElement[];
     protected rippleFun: Function;
@@ -578,6 +582,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      * @returns {void}
      */
     private setListData;
+    private updateGroupHeaderItems;
     protected handleVirtualKeyboardActions(e: KeyboardEventArgs, pageCount: number): void;
     protected updatePopupState(): void;
     protected updatePopupPosition(): void;
@@ -633,6 +638,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected scrollStop(e?: Event, isDownkey?: boolean): void;
     protected getPageCount(returnExactCount?: boolean): number;
     private updateGroupHeader;
+    private updateFixedGroupTemplateHader;
     private updateGroupFixedHeader;
     protected getValidLi(): HTMLElement;
     /**

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

@@ -792,10 +792,15 @@ var DropDownBase = /** @class */ (function (_super) {
                                     _this.totalItemCount = !_this.virtualSelectAll ? e.count : _this.totalItemCount;
                                     ulElement = _this.renderItems(listItems, fields);
                                     _this.appendUncheckList = false;
+                                    _this.isUpdateGroupTemplate = false;
                                     _this.onActionComplete(ulElement, listItems, e);
                                     if (_this.groupTemplate) {
+                                        if (_this.isAngular && _this.getModuleName() === 'multiselect') {
+                                            _this.updateGroupHeaderItems(ulElement);
+                                        }
                                         _this.renderGroupTemplate(ulElement);
                                     }
+                                    _this.isUpdateGroupTemplate = true;
                                     _this.isRequested = false;
                                     _this.bindChildItems(listItems, ulElement, fields, e);
                                     if (_this.getInitialData) {
@@ -898,10 +903,15 @@ var DropDownBase = /** @class */ (function (_super) {
                             }
                             if (!localDataArgs.cancel) {
                                 ulElement = _this.renderItems(localDataArgs.result, fields);
+                                _this.isUpdateGroupTemplate = false;
                                 _this.onActionComplete(ulElement, localDataArgs.result, event);
                                 if (_this.groupTemplate) {
+                                    if (_this.isAngular && _this.getModuleName() === 'multiselect') {
+                                        _this.updateGroupHeaderItems(ulElement);
+                                    }
                                     _this.renderGroupTemplate(ulElement);
                                 }
+                                _this.isUpdateGroupTemplate = true;
                                 _this.bindChildItems(localDataArgs.result, ulElement, fields);
                                 if (_this.getInitialData) {
                                     _this.getInitialData = false;
@@ -920,6 +930,20 @@ var DropDownBase = /** @class */ (function (_super) {
             });
         }
     };
+    DropDownBase.prototype.updateGroupHeaderItems = function (ulElement) {
+        var headerElements = ulElement.querySelectorAll('.' + dropDownBaseClasses.group);
+        var clonedHeaders = [];
+        for (var i = 0; i < headerElements.length; i++) {
+            clonedHeaders.push(headerElements[i].cloneNode ? headerElements[i].cloneNode(true) :
+                headerElements[i]);
+        }
+        if (!this.isFilterAction) {
+            this.groupHeaderItems = clonedHeaders;
+        }
+        else {
+            this.fiteredGroupHeaderItems = clonedHeaders;
+        }
+    };
     DropDownBase.prototype.handleVirtualKeyboardActions = function (e, pageCount) {
         // Used this method in component side.
     };
@@ -1056,6 +1080,21 @@ var DropDownBase = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.list)) {
             if (!this.isVirtualizationEnabled) {
                 this.list.innerHTML = '';
+                if (this.isUpdateGroupTemplate && this.isAngular && this.groupTemplate && this.getModuleName() === 'multiselect') {
+                    var headerItems = ulElement.querySelectorAll('.' + dropDownBaseClasses.group);
+                    if (headerItems.length > 0 && this.groupHeaderItems.length > 0) {
+                        var groupHeaderMap = {};
+                        for (var i = 0; i < this.groupHeaderItems.length; i++) {
+                            groupHeaderMap[this.groupHeaderItems[i].id] = this.groupHeaderItems[i].innerHTML;
+                        }
+                        for (var i = 0; i < headerItems.length; i++) {
+                            if (Object.prototype.hasOwnProperty.call(groupHeaderMap, headerItems[i].id)) {
+                                headerItems[i].innerHTML = groupHeaderMap[headerItems[i].id];
+                            }
+                        }
+                    }
+                    this.renderGroupTemplate(ulElement);
+                }
                 this.list.appendChild(ulElement);
                 this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
                 this.ulElement = this.list.querySelector('ul');
@@ -1151,7 +1190,9 @@ var DropDownBase = /** @class */ (function (_super) {
         if (this.fields.groupBy !== null && this.dataSource || this.element.querySelector('.' + dropDownBaseClasses.group)) {
             var dataSource = this.dataSource;
             var option = { groupTemplateID: this.groupTemplateId, isStringTemplate: this.isStringTemplate };
-            var headerItems = listEle.querySelectorAll('.' + dropDownBaseClasses.group);
+            var headerItems = this.isAngular && this.getModuleName() === 'multiselect' && !isNullOrUndefined(listEle) &&
+                listEle.classList.contains(dropDownBaseClasses.fixedHead) ? [listEle] :
+                listEle.querySelectorAll('.' + dropDownBaseClasses.group);
             var groupcheck = this.templateCompiler(this.groupTemplate);
             if (typeof this.groupTemplate !== 'function' && groupcheck) {
                 var groupValue = select(this.groupTemplate, document).innerHTML.trim();
@@ -1294,10 +1335,38 @@ var DropDownBase = /** @class */ (function (_super) {
             return false;
         }
     };
+    DropDownBase.prototype.updateFixedGroupTemplateHader = function (element) {
+        var groupData = element.cloneNode ? element.cloneNode(true) : element;
+        var isGroupDataUpdated = false;
+        if (this.groupHeaderItems && this.groupHeaderItems.length > 0) {
+            for (var i = 0; i < this.groupHeaderItems.length; i++) {
+                if (groupData.id === this.groupHeaderItems[i].id) {
+                    groupData.innerHTML = this.groupHeaderItems[i].innerHTML;
+                    isGroupDataUpdated = true;
+                    break;
+                }
+            }
+        }
+        if (!isGroupDataUpdated && this.fiteredGroupHeaderItems && this.fiteredGroupHeaderItems.length > 0) {
+            for (var i = 0; i < this.fiteredGroupHeaderItems.length; i++) {
+                if (groupData.id === this.fiteredGroupHeaderItems[i].id) {
+                    groupData.innerHTML = this.fiteredGroupHeaderItems[i].innerHTML;
+                    break;
+                }
+            }
+        }
+        this.fixedHeaderElement.innerHTML = groupData.innerHTML;
+        this.renderGroupTemplate(this.fixedHeaderElement);
+    };
     DropDownBase.prototype.updateGroupFixedHeader = function (element, target) {
         if (this.fixedHeaderElement) {
             if (!isNullOrUndefined(element.innerHTML)) {
-                this.fixedHeaderElement.innerHTML = element.innerHTML;
+                if (this.groupTemplate && this.isAngular && this.getModuleName() === 'multiselect') {
+                    this.updateFixedGroupTemplateHader(element);
+                }
+                else {
+                    this.fixedHeaderElement.innerHTML = element.innerHTML;
+                }
             }
             this.fixedHeaderElement.style.position = 'fixed';
             this.fixedHeaderElement.style.top = (this.list.parentElement.offsetTop + this.list.offsetTop) - window.scrollY + 'px';
@@ -1487,7 +1556,12 @@ var DropDownBase = /** @class */ (function (_super) {
         setStyleAttribute(this.fixedHeaderElement, { zIndex: 10 });
         var firstLi = this.ulElement.querySelector('.' + dropDownBaseClasses.group + ':not(.e-hide-listitem)');
         if (!isNullOrUndefined(firstLi)) {
-            this.fixedHeaderElement.innerHTML = firstLi.innerHTML;
+            if (this.groupTemplate && this.isAngular && this.getModuleName() === 'multiselect') {
+                this.updateFixedGroupTemplateHader(firstLi);
+            }
+            else {
+                this.fixedHeaderElement.innerHTML = firstLi.innerHTML;
+            }
         }
     };
     DropDownBase.prototype.getSortedDataSource = function (dataSource) {
@@ -2043,6 +2117,8 @@ var DropDownBase = /** @class */ (function (_super) {
         this.ulElement = null;
         this.list = null;
         this.enableRtlElements = null;
+        this.groupHeaderItems = null;
+        this.fiteredGroupHeaderItems = null;
         this.rippleFun = null;
         _super.prototype.destroy.call(this);
     };

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

@@ -2324,7 +2324,14 @@ var DropDownList = /** @class */ (function (_super) {
             return;
         }
         if (this.getInitialData) {
-            this.updateActionCompleteDataValues(ulElement, list);
+            if (this.itemTemplate && this.element.tagName === 'EJS-COMBOBOX' && this.allowFiltering) {
+                setTimeout(function () {
+                    _this.updateActionCompleteDataValues(ulElement, list);
+                }, 0);
+            }
+            else {
+                this.updateActionCompleteDataValues(ulElement, list);
+            }
             if (this.enableVirtualization) {
                 this.updateSelectElementData(this.allowFiltering);
             }

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

@@ -264,6 +264,9 @@ var ListBox = /** @class */ (function (_super) {
             this.tBListBox = getComponent(document.getElementById(scope), this.getModuleName());
             this.tBListBox.updateToolBarState();
         }
+        else if (this.refreshing) {
+            this.updateToolBarState();
+        }
     };
     ListBox.prototype.createButtons = function (toolElem) {
         var _this = this;
@@ -1289,7 +1292,6 @@ var ListBox = /** @class */ (function (_super) {
             }
             this.inputString = this.filterInput.value;
             this.filterWireEvents();
-            this.ulElement.style.setProperty('height', 'calc(100% - ' + (this.filterParent.offsetHeight) + 'px)', 'important');
             return filterInputObj;
         }
     };

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

@@ -661,7 +661,6 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private keyCode;
     private beforePopupOpen;
     private remoteCustomValue;
-    private filterAction;
     private remoteFilterAction;
     private selectAllEventData;
     private selectAllEventEle;

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

@@ -890,7 +890,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 return filterQuery;
             }
         }
-        if (this.filterAction) {
+        if (this.isFilterAction) {
             if ((this.targetElement() !== null && !this.enableVirtualization) || (this.enableVirtualization &&
                 this.targetElement() !== null && this.targetElement().trim() !== '')) {
                 var dataType = this.typeOfData(this.dataSource).typeof;
@@ -1178,6 +1178,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 tempData[0] = (typeof customData === 'boolean') ?
                     (tempData[0] === 'true' ? true : (tempData[0] === 'false' ? false : tempData[0])) : tempData[0];
                 this.resetList(tempData, field);
+                this.focusAtLastListItem(value);
             }
         }
         else if (this.listData && this.mainData && !dataChecks && this.allowCustomValue) {
@@ -1356,7 +1357,9 @@ var MultiSelect = /** @class */ (function (_super) {
             this.ulElement = this.mainList;
         }
         this.checkPlaceholderSize();
-        Input.createSpanElement(this.overAllWrapper, this.createElement);
+        if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+            Input.createSpanElement(this.overAllWrapper, this.createElement);
+        }
         this.calculateWidth();
         if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
@@ -2548,6 +2551,9 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         else {
             this.setFloatLabelType();
+            if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+                Input.createSpanElement(this.overAllWrapper, this.createElement);
+            }
         }
         this.expandTextbox();
     };
@@ -3398,7 +3404,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.clearAllCallback(e);
             }
             this.checkAndResetCache();
-            Input.createSpanElement(this.overAllWrapper, this.createElement);
+            if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+                Input.createSpanElement(this.overAllWrapper, this.createElement);
+            }
             this.calculateWidth();
             if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] && this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
                 this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
@@ -3554,7 +3562,7 @@ var MultiSelect = /** @class */ (function (_super) {
             _this.isFilterPrevented = eventArgs.cancel;
             if (!eventArgs.cancel) {
                 if (!_this.isFiltered && !eventArgs.preventDefaultAction) {
-                    _this.filterAction = true;
+                    _this.isFilterAction = true;
                     _this.isFilteringAction = true;
                     if (_this.dataSource instanceof DataManager && _this.allowCustomValue) {
                         _this.isCustomRendered = false;
@@ -3710,7 +3718,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.initializeData = function () {
         this.mainListCollection = [];
         this.beforePopupOpen = false;
-        this.filterAction = false;
+        this.isFilterAction = false;
         this.remoteFilterAction = false;
         this.isFirstClick = false;
         this.mobFilter = true;
@@ -4044,7 +4052,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.updateDataList = function () {
-        if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction || this.targetElement().trim())) {
+        if (this.mainList && this.ulElement && !(this.isFiltered || this.isFilterAction || this.targetElement().trim())) {
             var isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
             var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 &&
                 this.ulElement.children[0].childElementCount > 0) &&
@@ -5283,7 +5291,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.isDynamicDataChange = true;
         }
         if (this.getModuleName() === 'multiselect') {
-            this.filterAction = false;
+            this.isFilterAction = false;
             this.setUpdateInitial(['fields', 'query', 'dataSource'], newProp);
         }
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -5389,7 +5397,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 case 'floatLabelType':
                     this.setFloatLabelType();
                     this.addValidInputClass();
-                    Input.createSpanElement(this.overAllWrapper, this.createElement);
+                    if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+                        Input.createSpanElement(this.overAllWrapper, this.createElement);
+                    }
                     this.calculateWidth();
                     if (!isNullOrUndefined(this.overAllWrapper) &&
                         !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
@@ -5984,7 +5994,9 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.element.hasAttribute('data-val')) {
             this.element.setAttribute('data-val', 'false');
         }
-        Input.createSpanElement(this.overAllWrapper, this.createElement);
+        if (this.element.querySelector('.e-multiselect .e-float-text-content') === null) {
+            Input.createSpanElement(this.overAllWrapper, this.createElement);
+        }
         this.calculateWidth();
         if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {