@syncfusion/ej2-dropdowns 28.2.3 → 28.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.2.3
+*  version : 28.2.5
 *  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,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-dropdowns@*",
-  "_id": "@syncfusion/ej2-dropdowns@28.1.41",
+  "_id": "@syncfusion/ej2-dropdowns@28.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-XHQSq89yLShgV5vMeiTTFCUt2tQ+wyqf7v3t/paW5IDkCrxAlfiU56sTuv5XyuZ3rBECWpmlDmIDP6kPz2bPMw==",
+  "_integrity": "sha512-wNFdoVKhrqgBPo0G2N2ic+Kzc0gUdRC/pgcwKGt2aCIH0kA8fdYR7iJEwwx0omyK3vTtEt4Hc3xBiLiyAiLJAw==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -36,8 +36,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-28.1.41.tgz",
-  "_shasum": "1d5b644c7717243d23cd17fa544fb0a9810b7b99",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-28.2.4.tgz",
+  "_shasum": "57f885c886d4f3cf9f2066fa1665c5bbacab7e74",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -45,11 +45,11 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.2.3",
+    "@syncfusion/ej2-base": "~28.2.5",
     "@syncfusion/ej2-data": "~28.2.3",
     "@syncfusion/ej2-inputs": "~28.2.3",
     "@syncfusion/ej2-lists": "~28.2.3",
-    "@syncfusion/ej2-navigations": "~28.2.3",
+    "@syncfusion/ej2-navigations": "~28.2.5",
     "@syncfusion/ej2-notifications": "~28.2.3",
     "@syncfusion/ej2-popups": "~28.2.3"
   },
@@ -76,7 +76,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "28.2.3",
+  "version": "28.2.5",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -294,6 +294,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected preventDefActionFilter: boolean;
     protected isDynamicData: boolean;
     protected isPrimitiveData: boolean;
+    protected isCustomFiltering: boolean;
     protected virtualListInfo: VirtualInfo;
     protected viewPortInfo: VirtualInfo;
     protected selectedValueInfo: VirtualInfo;
@@ -577,6 +578,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     private setListData;
     protected handleVirtualKeyboardActions(e: KeyboardEventArgs, pageCount: number): void;
     protected updatePopupState(): void;
+    protected updatePopupPosition(): void;
     protected virtualSelectionAll(state: boolean, li: NodeListOf<HTMLElement> | HTMLElement[], event: MouseEvent | KeyboardEventArgs): void;
     protected updateRemoteData(): void;
     private bindChildItems;

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

@@ -136,6 +136,7 @@ var DropDownBase = /** @class */ (function (_super) {
         _this.CurrentEvent = null;
         _this.isDynamicData = false;
         _this.isPrimitiveData = false;
+        _this.isCustomFiltering = false;
         _this.virtualListInfo = {
             currentPageNumber: null,
             direction: null,
@@ -724,7 +725,7 @@ var DropDownBase = /** @class */ (function (_super) {
                                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                                 newQuery.queries[queryElements].e.nos = e.count;
                                             }
-                                            if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal')) {
+                                            if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal') && !_this.isCustomFiltering) {
                                                 isReOrder = false;
                                             }
                                         }
@@ -748,6 +749,7 @@ var DropDownBase = /** @class */ (function (_super) {
                             _this.trigger('actionComplete', e, function (e) {
                                 if (!e.cancel) {
                                     _this.isRequesting = false;
+                                    _this.isCustomFiltering = false;
                                     var listItems = e.result;
                                     if (_this.isIncrementalRequest) {
                                         ulElement = _this.renderItems(listItems, fields);
@@ -785,6 +787,7 @@ var DropDownBase = /** @class */ (function (_super) {
                                     }
                                     if (_this.isVirtualizationEnabled) {
                                         _this.getFilteringSkeletonCount();
+                                        _this.updatePopupPosition();
                                     }
                                     if (_this.virtualSelectAll && _this.virtualSelectAllData) {
                                         _this.virtualSelectionAll(_this.virtualSelectAllState, _this.liCollections, _this.CurrentEvent);
@@ -826,7 +829,7 @@ var DropDownBase = /** @class */ (function (_super) {
                                             newQuery.queries[queryElements].e.nos = listItems.count;
                                             listItems = (newQuery).executeLocal(dataManager);
                                         }
-                                        if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal')) {
+                                        if (_this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal') && !_this.isCustomFiltering) {
                                             isReOrder = false;
                                         }
                                     }
@@ -859,6 +862,7 @@ var DropDownBase = /** @class */ (function (_super) {
                         var localDataArgs = { cancel: false, result: listItems };
                         _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                         _this.trigger('actionComplete', localDataArgs, function (localDataArgs) {
+                            _this.isCustomFiltering = false;
                             if (_this.isIncrementalRequest) {
                                 ulElement = _this.renderItems(localDataArgs.result, fields);
                                 return;
@@ -893,6 +897,9 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.updatePopupState = function () {
         // Used this method in component side.
     };
+    DropDownBase.prototype.updatePopupPosition = function () {
+        // Used this method in component side.
+    };
     DropDownBase.prototype.virtualSelectionAll = function (state, li, event) {
         // Used this method in component side.
     };

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

@@ -2564,6 +2564,7 @@ var DropDownList = /** @class */ (function (_super) {
         }
         var args = { cancel: false };
         this.trigger('beforeOpen', args, function (args) {
+            var initialPopupHeight;
             if (!args.cancel) {
                 var popupEle = _this.createElement('div', {
                     id: _this.element.id + '_popup', className: 'e-ddl e-popup ' + (_this.cssClass !== null ? _this.cssClass : '')
@@ -2584,6 +2585,7 @@ var DropDownList = /** @class */ (function (_super) {
                 }
                 document.body.appendChild(popupEle);
                 popupEle.style.top = '0px';
+                initialPopupHeight = popupEle.clientHeight;
                 if (_this.enableVirtualization && _this.itemTemplate) {
                     var listitems = popupEle.querySelectorAll('li.e-list-item:not(.e-virtual-list)');
                     _this.listItemHeight = listitems.length > 0 ? Math.ceil(listitems[0].getBoundingClientRect().height) +
@@ -2781,7 +2783,7 @@ var DropDownList = /** @class */ (function (_super) {
                     // Add the resizer div to the popup
                     if (_this.list && _this.list.parentElement) {
                         _this.list.parentElement.classList.add('e-resize');
-                        if (_this.popupHeight.toString().toLowerCase() !== 'auto') {
+                        if (_this.popupHeight.toString().toLowerCase() !== 'auto' && initialPopupHeight > parseInt(_this.popupHeight.toString(), 10)) {
                             _this.list.parentElement.style.height = '100%';
                         }
                         _this.list.parentElement.style.paddingBottom = (_this.getModuleName() === 'dropdownlist' && _this.allowFiltering && _this.searchBoxHeight) ? (_this.searchBoxHeight + resizePaddingBottom).toString() + 'px' : resizePaddingBottom.toString() + 'px';

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

@@ -1347,7 +1347,7 @@ var DropDownTree = /** @class */ (function (_super) {
         this.inputEle.setAttribute('aria-label', this.getModuleName());
         var id = this.element.getAttribute('id');
         this.hiddenElement.id = id + '_hidden';
-        this.inputWrapper.setAttribute('tabindex', '0');
+        this.inputWrapper.setAttribute('tabindex', this.inputWrapper.classList.contains('e-disabled') ? '-1' : '0');
         this.inputWrapper.setAttribute('aria-label', this.getModuleName());
         attributes(this.inputWrapper, this.getAriaAttributes());
     };
@@ -1715,9 +1715,11 @@ var DropDownTree = /** @class */ (function (_super) {
                 removeClass([_this.popupEle], DDTHIDEICON);
                 _this.updatePopupHeight();
                 _this.popupObj.refreshPosition();
-                if (!(_this.showCheckBox && _this.showSelectAll) && (!_this.popupDiv.classList.contains(NODATA)
-                    && _this.treeItems.length > 0)) {
-                    var focusedElement = _this.value != null && _this.text != null ? _this.treeObj.element.querySelector('[data-uid="' + _this.value[0] + '"]') : null;
+                if (_this.showSelectAll && !_this.allowFiltering) {
+                    _this.checkAllParent.focus();
+                }
+                if ((!_this.popupDiv.classList.contains(NODATA) && _this.treeItems.length > 0)) {
+                    var focusedElement = _this.value != null || _this.text != null ? _this.treeObj.element.querySelector('[data-uid="' + _this.value[0] + '"]') : null;
                     if (focusedElement) {
                         _this.treeObj.element.querySelector('li').setAttribute('tabindex', '-1');
                         focusedElement.setAttribute('tabindex', '0');
@@ -2057,7 +2059,9 @@ var DropDownTree = /** @class */ (function (_super) {
             this.updateTemplate();
         }
         this.treeObj.fields = this.getTreeFields(this.fields);
+        this.setProperties({ value: this.oldValue }, true);
         this.treeObj.dataBind();
+        this.updateValue(this.value);
     };
     DropDownTree.prototype.getEventArgs = function (args) {
         var checkData = args.data;
@@ -2631,6 +2635,9 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         chip.appendChild(chipContent);
         this.chipCollection.appendChild(chip);
+        if (this.isReact) {
+            this.renderReactTemplates();
+        }
     };
     DropDownTree.prototype.setSelectAllWrapper = function (state) {
         if (this.isFirstRender) {
@@ -3071,8 +3078,10 @@ var DropDownTree = /** @class */ (function (_super) {
                     this.updateFilterPlaceHolder();
                     break;
                 case 'value':
-                    this.oldValue = oldProp.value;
-                    this.updateValue(newProp.value);
+                    if (JSON.stringify(oldProp.value) !== JSON.stringify(newProp.value)) {
+                        this.oldValue = oldProp.value;
+                        this.updateValue(newProp.value);
+                    }
                     break;
                 case 'text':
                     this.updateText(newProp.text);
@@ -3360,6 +3369,9 @@ var DropDownTree = /** @class */ (function (_super) {
                     addClass([this.inputWrapper], [INPUTFOCUS]);
                 }
             }
+            if (this.isFilteredData) {
+                this.treeObj['treeData'] = this.treeData;
+            }
             if (this.destroyPopupOnHide) {
                 this.isFirstRender = true;
                 this.destroyPopup();

package/src/list-box/list-box.d.ts

@@ -120,6 +120,7 @@ export declare class ListBox extends DropDownBase {
     private popupWrapper;
     private targetInputElement;
     private isValidKey;
+    private isBackSpace;
     private isFiltered;
     private clearFilterIconElem;
     private remoteFilterAction;

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

@@ -100,6 +100,7 @@ var ListBox = /** @class */ (function (_super) {
     function ListBox(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.isValidKey = false;
+        _this.isBackSpace = false;
         _this.isDataSourceUpdate = false;
         _this.keyDownStatus = false;
         return _this;
@@ -368,6 +369,7 @@ var ListBox = /** @class */ (function (_super) {
         }
     };
     ListBox.prototype.onActionComplete = function (ulElement, list, e) {
+        var _this = this;
         var searchEle;
         var filterElem;
         var txtLength;
@@ -434,8 +436,9 @@ var ListBox = /** @class */ (function (_super) {
                 }
                 filterElem.selectionStart = txtLength;
                 filterElem.selectionEnd = txtLength;
-                if (filterElem.value !== '') {
+                if (filterElem.value !== '' || (filterElem.value === '' && this.isBackSpace)) {
                     filterElem.focus();
+                    setTimeout(function () { _this.isBackSpace = false; });
                 }
             }
         }
@@ -2040,7 +2043,7 @@ var ListBox = /** @class */ (function (_super) {
     };
     ListBox.prototype.KeyUp = function (e) {
         var _this = this;
-        if (this.allowFiltering && ((e.ctrlKey && e.keyCode === 65) || (e.keyCode === 8 && !this.filterInput.value))) {
+        if (this.allowFiltering && e.ctrlKey && e.keyCode === 65) {
             e.preventDefault();
             return;
         }
@@ -2049,6 +2052,7 @@ var ListBox = /** @class */ (function (_super) {
         if (!isNullOrUndefined(isWordCharacter)) {
             this.isValidKey = true;
         }
+        this.isBackSpace = e.keyCode === 8;
         this.isValidKey = (e.keyCode === 8) || (e.keyCode === 46) || this.isValidKey;
         if (this.isValidKey) {
             this.isValidKey = false;

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

@@ -738,6 +738,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private refreshPopup;
     private checkTextLength;
     private popupKeyActions;
+    protected updatePopupPosition(): void;
     private updateAriaAttribute;
     private homeNavigation;
     private updateSelectionList;

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

@@ -1590,6 +1590,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 break;
         }
     };
+    MultiSelect.prototype.updatePopupPosition = function () {
+        this.refreshPopup();
+    };
     MultiSelect.prototype.updateAriaAttribute = function () {
         var focusedItem = this.list.querySelector('.' + dropDownBaseClasses.focus);
         if (!isNullOrUndefined(focusedItem)) {
@@ -3464,6 +3467,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         _this.isFiltered = true;
                         _this.customFilterQuery = query;
                         _this.remoteFilterAction = true;
+                        _this.isCustomFiltering = true;
                         _this.dataUpdater(dataSource, query, fields);
                     },
                     event: e,