@syncfusion/ej2-dropdowns 35.1.37 → 35.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 35.1.37
+*  version : 35.1.41
 *  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": "35.1.37",
+  "version": "35.1.41",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -10,11 +10,11 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~35.1.37",
     "@syncfusion/ej2-data": "~35.1.37",
-    "@syncfusion/ej2-inputs": "~35.1.37",
+    "@syncfusion/ej2-inputs": "~35.1.41",
     "@syncfusion/ej2-lists": "~35.1.37",
-    "@syncfusion/ej2-navigations": "~35.1.37",
+    "@syncfusion/ej2-navigations": "~35.1.40",
     "@syncfusion/ej2-notifications": "~35.1.37",
-    "@syncfusion/ej2-popups": "~35.1.37"
+    "@syncfusion/ej2-popups": "~35.1.39"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -113,6 +113,9 @@ export declare class DropDownList extends DropDownBase implements IInput {
     };
     protected isCustomFilter: boolean;
     private isSecondClick;
+    private filterGeneration;
+    private pendingFilterRequests;
+    private isStaleFilter;
     protected isListSearched: boolean;
     protected preventChange: boolean;
     protected selectedElementID: string;

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

@@ -86,6 +86,9 @@ var DropDownList = /** @class */ (function (_super) {
      */
     function DropDownList(options, element) {
         var _this = _super.call(this, options, element) || this;
+        _this.filterGeneration = null;
+        _this.pendingFilterRequests = 0;
+        _this.isStaleFilter = false;
         _this.isListSearched = false;
         _this.preventChange = false;
         _this.isTouched = false;
@@ -138,6 +141,9 @@ var DropDownList = /** @class */ (function (_super) {
         this.preventAltUp = false;
         this.isCustomFilter = false;
         this.isSecondClick = false;
+        this.filterGeneration = null;
+        this.pendingFilterRequests = 0;
+        this.isStaleFilter = false;
         this.previousValue = null;
         this.keyConfigure = {
             tab: 'tab',
@@ -192,7 +198,7 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.floatLabelChange = function () {
         if (this.getModuleName() === 'dropdownlist' && this.floatLabelType === 'Auto') {
             var floatElement = this.inputWrapper.container.querySelector('.e-float-text');
-            if (floatElement && this.inputElement.value !== '' || this.isInteracted) {
+            if (floatElement && (this.inputElement.value !== '' || this.isInteracted)) {
                 classList(floatElement, ['e-label-top'], ['e-label-bottom']);
             }
             else if (floatElement) {
@@ -1554,6 +1560,10 @@ var DropDownList = /** @class */ (function (_super) {
         li = null;
     };
     DropDownList.prototype.selectEventCallback = function (li, e, preventSelect, selectedData, value) {
+        if (this.getModuleName() === 'dropdownlist' && this.allowFiltering &&
+            this.dataSource instanceof DataManager && this.filterGeneration) {
+            this.isStaleFilter = true;
+        }
         this.previousItemData = (!isNullOrUndefined(this.itemData)) ? this.itemData : null;
         if (this.itemData !== selectedData) {
             this.previousValue = (!isNullOrUndefined(this.itemData)) ? typeof this.itemData == 'object' &&
@@ -1600,7 +1610,11 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.setValue = function (e, autofill) {
         var dataItem = this.getItemData();
         this.isTouched = !isNullOrUndefined(e);
-        if (dataItem.value === null) {
+        if (dataItem.value === null && !isNullOrUndefined(this.item) &&
+            this.item.getAttribute('data-value') === 'null') {
+            Input.setValue('null', this.inputElement, this.floatLabelType, this.showClearButton);
+        }
+        else if (dataItem.value === null) {
             Input.setValue(null, this.inputElement, this.floatLabelType, this.showClearButton);
         }
         else {
@@ -1645,6 +1659,10 @@ var DropDownList = /** @class */ (function (_super) {
         }
     };
     DropDownList.prototype.setSelection = function (li, e) {
+        if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.dataSource instanceof DataManager &&
+            this.pendingFilterRequests > 0 && this.isValidLI(li)) {
+            this.isStaleFilter = true;
+        }
         if (this.isValidLI(li) && (!li.classList.contains(dropDownBaseClasses.selected) || (this.isPopupOpen && this.isSelected
             && li.classList.contains(dropDownBaseClasses.selected)))) {
             this.updateSelectedItem(li, e, false, true);
@@ -2217,7 +2235,21 @@ var DropDownList = /** @class */ (function (_super) {
                     this.previousStartIndex = 0;
                     this.virtualListInfo = null;
                 }
+                if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && dataSource instanceof DataManager) {
+                    this.filterGeneration = {
+                        value: this.value
+                    };
+                    this.pendingFilterRequests++;
+                }
                 this.resetList(dataSource, fields, query);
+                if (this.getModuleName() === 'dropdownlist' && this.allowFiltering &&
+                    dataSource instanceof DataManager && !this.isRequesting) {
+                    this.pendingFilterRequests--;
+                    if (this.pendingFilterRequests === 0) {
+                        this.filterGeneration = null;
+                        this.isStaleFilter = false;
+                    }
+                }
                 if (this.getModuleName() === 'dropdownlist' && this.list.classList.contains(dropDownBaseClasses.noData)) {
                     this.popupContentElement.setAttribute('role', 'status');
                     this.popupContentElement.setAttribute('id', 'no-record');
@@ -2345,6 +2377,14 @@ var DropDownList = /** @class */ (function (_super) {
         });
     };
     DropDownList.prototype.onActionFailure = function (e) {
+        if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.dataSource instanceof DataManager &&
+            this.pendingFilterRequests > 0) {
+            this.pendingFilterRequests--;
+            if (this.pendingFilterRequests === 0) {
+                this.filterGeneration = null;
+                this.isStaleFilter = false;
+            }
+        }
         _super.prototype.onActionFailure.call(this, e);
         if (this.beforePopupOpen) {
             this.renderPopup();
@@ -2356,6 +2396,26 @@ var DropDownList = /** @class */ (function (_super) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     DropDownList.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
         var _this = this;
+        if (this.getModuleName() === 'dropdownlist' && this.allowFiltering && this.dataSource instanceof DataManager &&
+            !isNullOrUndefined(e) && this.pendingFilterRequests > 0) {
+            this.pendingFilterRequests--;
+            if (this.filterGeneration && (this.isStaleFilter || this.filterGeneration.value !== this.value)) {
+                if (this.actionCompleteData.ulElement && this.actionCompleteData.list) {
+                    ulElement = this.actionCompleteData.ulElement.cloneNode(true);
+                    list = this.actionCompleteData.list;
+                    e = null;
+                    this.typedString = '';
+                    this.isTyped = false;
+                    if (this.filterInput) {
+                        this.filterInput.value = '';
+                    }
+                }
+            }
+            if (this.pendingFilterRequests === 0) {
+                this.filterGeneration = null;
+                this.isStaleFilter = false;
+            }
+        }
         if (this.dataSource instanceof DataManager && !isNullOrUndefined(e) && !this.virtualGroupDataSource) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.totalItemCount = e.count;
@@ -2623,7 +2683,16 @@ var DropDownList = /** @class */ (function (_super) {
                 return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value_1) ||
                     (getValue(_this.fields.value, data) === value_1));
             });
-            if (!isExist) {
+            var isRemoteFilteredDropDownList = this.getModuleName() === 'dropdownlist' && this.allowFiltering &&
+                this.dataSource instanceof DataManager;
+            var isExistInCachedList = Boolean(isRemoteFilteredDropDownList && this.actionCompleteData.list &&
+                this.actionCompleteData.list.some(function (data) {
+                    return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value_1) ||
+                        (getValue(_this.fields.value, data) === value_1));
+                }));
+            var isExistInCachedElement = Boolean(isRemoteFilteredDropDownList && this.actionCompleteData.ulElement &&
+                Array.prototype.some.call(this.actionCompleteData.ulElement.querySelectorAll('li[data-value]'), function (item) { return item.getAttribute('data-value') === String(value_1); }));
+            if (!isExist && (!isRemoteFilteredDropDownList || (!isExistInCachedList && !isExistInCachedElement))) {
                 this.addItem(this.itemData);
             }
         }
@@ -3984,6 +4053,47 @@ var DropDownList = /** @class */ (function (_super) {
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this_1.inputElement);
+                    if (this_1.getModuleName() === 'dropdownlist') {
+                        if (!newProp.placeholder || newProp.placeholder.trim() === '') {
+                            var label = this_1.inputWrapper.container.querySelector('.e-float-text');
+                            if (label) {
+                                label.remove();
+                            }
+                            this_1.inputElement.removeAttribute('aria-labelledby');
+                        }
+                        else if (this_1.floatLabelType !== 'Never' && !this_1.value) {
+                            var floatLabel = this_1.inputWrapper.container
+                                .querySelector('.e-float-text');
+                            if (!floatLabel) {
+                                floatLabel = this_1.createElement('label');
+                                floatLabel.classList.add('e-float-text');
+                                if (this_1.floatLabelType === 'Auto') {
+                                    floatLabel.classList.add('e-label-bottom');
+                                }
+                                else if (this_1.floatLabelType === 'Always') {
+                                    floatLabel.classList.add('e-label-top');
+                                }
+                                floatLabel.id = 'label_' + this_1.inputElement.id;
+                                floatLabel.setAttribute('for', this_1.inputElement.id);
+                                var floatLine = this_1.inputWrapper.container
+                                    .querySelector('.e-float-line');
+                                var icon = this_1.inputWrapper.container
+                                    .querySelector('.e-input-group-icon');
+                                if (floatLine) {
+                                    floatLine.insertAdjacentElement('afterend', floatLabel);
+                                }
+                                else if (icon) {
+                                    this_1.inputWrapper.container.insertBefore(floatLabel, icon);
+                                }
+                                else {
+                                    this_1.inputWrapper.container.appendChild(floatLabel);
+                                }
+                            }
+                            floatLabel.style.width = this_1.inputElement.offsetWidth + 'px';
+                            floatLabel.textContent = newProp.placeholder;
+                            this_1.inputElement.setAttribute('aria-labelledby', floatLabel.id);
+                        }
+                    }
                     break;
                 case 'filterBarPlaceholder':
                     if (this_1.filterInput) {
@@ -4308,6 +4418,10 @@ var DropDownList = /** @class */ (function (_super) {
                 label.style.width = calculateWidth + 'px';
             }
         }
+        if (label && this.getModuleName() === 'dropdownlist' && (!this.placeholder || this.placeholder.trim() === '')) {
+            label.remove();
+            this.inputElement.removeAttribute('aria-labelledby');
+        }
     };
     /**
      * Return the module name of this component.
@@ -4572,6 +4686,9 @@ var DropDownList = /** @class */ (function (_super) {
      */
     DropDownList.prototype.destroy = function () {
         this.isActive = false;
+        this.isStaleFilter = false;
+        this.filterGeneration = null;
+        this.pendingFilterRequests = 0;
         if (this.showClearButton) {
             this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
         }

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

@@ -345,6 +345,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private previousFilterText;
     private fallbackValue;
     private uncheckedNodeId;
+    private isTotalCountClicked;
     /**
      * Specifies the template that renders to the popup list content of the
      * Dropdown Tree component when the data fetch request from the remote server fails.
@@ -849,6 +850,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private renderTree;
     private updateIndeterminateNodes;
     private renderPopup;
+    protected getAppendToElement(): HTMLElement;
     private checkCollision;
     private removeFocus;
     private updateFocus;

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

@@ -179,6 +179,7 @@ var DropDownTree = /** @class */ (function (_super) {
         _this.isFromFilterChange = false;
         _this.fallbackValue = [];
         _this.uncheckedNodeId = null;
+        _this.isTotalCountClicked = false;
         return _this;
     }
     /**
@@ -319,7 +320,7 @@ var DropDownTree = /** @class */ (function (_super) {
         this.tree = this.createElement('div', { id: this.element.id + '_tree' });
         this.popupDiv.appendChild(this.tree);
         if (!this.destroyPopupOnHide) {
-            document.body.appendChild(this.popupDiv);
+            this.getAppendToElement().appendChild(this.popupDiv);
         }
         this.wireTreeEvents();
         addClass([this.popupDiv], DDTHIDEICON);
@@ -409,6 +410,11 @@ var DropDownTree = /** @class */ (function (_super) {
                             _this.hidePopup();
                         }
                         break;
+                    case 'tab':
+                        if (_this.isPopupOpen && !isNOU(_this.popupDiv) && _this.popupDiv.classList.contains('e-no-data')) {
+                            _this.hidePopup();
+                        }
+                        break;
                     case 'shiftTab':
                         addClass([_this.inputWrapper], [INPUTFOCUS]);
                         break;
@@ -1829,7 +1835,7 @@ var DropDownTree = /** @class */ (function (_super) {
                     });
                     _this.popupEle.setAttribute('role', 'region');
                     _this.popupEle.setAttribute('aria-label', _this.element.id);
-                    document.body.appendChild(_this.popupEle);
+                    _this.getAppendToElement().appendChild(_this.popupEle);
                     _this.createPopup(_this.popupEle);
                 }
                 else {
@@ -1922,6 +1928,16 @@ var DropDownTree = /** @class */ (function (_super) {
             }
         });
     };
+    DropDownTree.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element && this.element.closest ? this.element.closest('.cdk-overlay-pane') : null;
+            var popoverEl = this.element && this.element.closest ? this.element.closest('[popover]') : null;
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     DropDownTree.prototype.checkCollision = function (popupEle) {
         var collision = isCollide(popupEle);
         if (collision.length > 0) {
@@ -2045,6 +2061,12 @@ var DropDownTree = /** @class */ (function (_super) {
         var isScroller = target.classList.contains(DROPDOWN) ? true :
             (matches(target, '.e-ddt .e-popup') || matches(target, '.e-ddt .e-treeview'));
         var isSelectAllArea = target.classList.contains('e-ripple-container');
+        if (this.overFlowWrapper && !this.overFlowWrapper.classList.contains(HIDEICON) && !this.isPopupOpen) {
+            this.isTotalCountClicked = true;
+        }
+        else {
+            this.isTotalCountClicked = false;
+        }
         if ((this.isPopupOpen && ((!isNOU(this.inputWrapper) &&
             this.inputWrapper.contains(target)) || isTree || isScroller || isHeader || isFooter || isSelectAllArea)) ||
             ((this.allowMultiSelection || this.showCheckBox) && (this.isPopupOpen && target.classList.contains(CHIP_CLOSE) ||
@@ -3092,7 +3114,8 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.removeChip = function (e) {
-        if (!this.enabled || this.readonly) {
+        if (!this.enabled || this.readonly || this.isTotalCountClicked) {
+            this.isTotalCountClicked = false;
             return;
         }
         if (e.target.classList.contains('e-chips-close') && !this.isPopupOpen) {

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

@@ -192,7 +192,9 @@ var ListBox = /** @class */ (function (_super) {
             this.selectAllText = l10nSelect.getConstant('selectAllText');
             this.unSelectAllText = l10nSelect.getConstant('unSelectAllText');
             this.popupWrapper = this.list;
-            this.checkBoxSelectionModule.checkAllParent = null;
+            if (this.checkBoxSelectionModule) {
+                this.checkBoxSelectionModule.checkAllParent = null;
+            }
             if (this.filterParent) {
                 var parentNode = this.filterParent.parentNode;
                 if (parentNode) {
@@ -2425,7 +2427,9 @@ var ListBox = /** @class */ (function (_super) {
                 this.selectAllText = l10nShow.getConstant('selectAllText');
                 this.unSelectAllText = l10nShow.getConstant('unSelectAllText');
                 this.popupWrapper = this.list;
-                this.checkBoxSelectionModule.checkAllParent = null;
+                if (this.checkBoxSelectionModule) {
+                    this.checkBoxSelectionModule.checkAllParent = null;
+                }
                 this.notify('selectAll', {});
                 this.checkSelectAll();
             }
@@ -2436,7 +2440,10 @@ var ListBox = /** @class */ (function (_super) {
             }
             for (index; index < liCollLen; index++) {
                 if (liColl[index].classList.contains('e-list-item')) {
-                    liColl[index].removeChild(liColl[index].getElementsByClassName('e-checkbox-wrapper')[0]);
+                    var checkboxElem = liColl[index].getElementsByClassName('e-checkbox-wrapper')[0];
+                    if (checkboxElem) {
+                        liColl[index].removeChild(checkboxElem);
+                    }
                 }
                 if (liColl[index].hasAttribute('aria-selected')) {
                     liColl[index].removeAttribute('aria-selected');
@@ -2625,7 +2632,13 @@ var ListBox = /** @class */ (function (_super) {
                         this.showSelectAll = showSelectAll;
                         if (this.showSelectAll) {
                             var l10nSel = new L10n(this.getModuleName(), { selectAllText: 'Select All', unSelectAllText: 'Unselect All' }, this.locale);
-                            this.checkBoxSelectionModule.checkAllParent = null;
+                            var selectAllElem = this.list.querySelector('.e-selectall-parent');
+                            if (this.checkBoxSelectionModule) {
+                                this.checkBoxSelectionModule.checkAllParent = null;
+                            }
+                            if (selectAllElem) {
+                                detach(selectAllElem);
+                            }
                             this.showSelectAll = true;
                             this.selectAllText = l10nSel.getConstant('selectAllText');
                             this.unSelectAllText = l10nSel.getConstant('selectAllText');

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

@@ -175,12 +175,14 @@ var CheckBoxSelection = /** @class */ (function () {
         var target;
         if (!isNullOrUndefined(args.e)) {
             var frameElm = args.li.querySelector('.e-checkbox-wrapper .e-frame');
-            target = !isNullOrUndefined(args.e.target) ?
-                (args.e.target.classList.contains('e-frame')
-                    && (!this.parent.showSelectAll
-                        || (this.checkAllParent && !this.checkAllParent.contains(args.e.target)))) ?
-                    args.e.target : args.li.querySelector('.e-checkbox-wrapper').childNodes[1]
-                : args.li.querySelector('.e-checkbox-wrapper').childNodes[1];
+            var checkboxWrapper = args.li.querySelector('.e-checkbox-wrapper');
+            target = !isNullOrUndefined(args.e.target)
+                ? (args.e.target.classList.contains('e-frame') &&
+                    (!this.parent.showSelectAll ||
+                        (this.checkAllParent && !this.checkAllParent.contains(args.e.target))))
+                    ? args.e.target
+                    : (checkboxWrapper ? checkboxWrapper.childNodes[1] : null)
+                : (checkboxWrapper ? checkboxWrapper.childNodes[1] : null);
         }
         else {
             var checkboxWrapper = args.li.querySelector('.e-checkbox-wrapper');

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

@@ -16,8 +16,9 @@ export declare function createFloatLabel(overAllWrapper: HTMLDivElement, searchW
  *
  * @param {string[] | number[] | boolean[]} value - Value of the MultiSelect.
  * @param {HTMLElement} label - Float label element.
+ * @param {FloatLabelType} floatlabeltype - specify the float label type.
  */
-export declare function updateFloatLabelState(value: string[] | number[] | boolean[] | object[], label: HTMLElement): void;
+export declare function updateFloatLabelState(value: string[] | number[] | boolean[] | object[], label: HTMLElement, floatlabeltype?: FloatLabelType): void;
 /**
  * Function to remove Float Label element.
  *

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

@@ -44,7 +44,7 @@ export function createFloatLabel(overAllWrapper, searchWrapper, element, inputEl
     searchWrapper.appendChild(floatLinelement);
     searchWrapper.appendChild(floatLabelElement);
     overAllWrapper.classList.add('e-float-input');
-    updateFloatLabelState(value, floatLabelElement);
+    updateFloatLabelState(value, floatLabelElement, floatLabelType);
     if (floatLabelType === 'Always') {
         if (floatLabelElement.classList.contains(LABELBOTTOM)) {
             removeClass([floatLabelElement], LABELBOTTOM);
@@ -57,9 +57,13 @@ export function createFloatLabel(overAllWrapper, searchWrapper, element, inputEl
  *
  * @param {string[] | number[] | boolean[]} value - Value of the MultiSelect.
  * @param {HTMLElement} label - Float label element.
+ * @param {FloatLabelType} floatlabeltype - specify the float label type.
  */
-export function updateFloatLabelState(value, label) {
-    if (value && value.length > 0) {
+export function updateFloatLabelState(value, label, floatlabeltype) {
+    var floatElement = label.closest('.e-float-input');
+    var isFocused = floatElement &&
+        floatElement.classList.contains('e-input-focus');
+    if ((value && value.length > 0) || (isFocused && floatElement.closest('.e-multiselect') && floatlabeltype === 'Auto')) {
         addClass([label], LABELTOP);
         removeClass([label], LABELBOTTOM);
     }

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

@@ -851,7 +851,6 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     protected preRender(): void;
     protected getLocaleName(): string;
     private initializeData;
-    private sanitizeData;
     private updateData;
     private initialTextUpdate;
     protected renderList(isEmptyData?: boolean): void;