@syncfusion/ej2-dropdowns 28.1.41 → 28.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.1.41
+*  version : 28.2.4
 *  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.39",
+  "_id": "@syncfusion/ej2-dropdowns@28.2.3",
   "_inBundle": false,
-  "_integrity": "sha512-//F+3tKpHvooXKrEpdaelWdehcgo92MbgKaI4QOyCn3zBaXTAH4CJ3pEqUNCTz4ML3EhOvDFyRFYWMemRFCP1g==",
+  "_integrity": "sha512-WulRpVG/X8MKND+b8VTrUWqLsSAuAuKBXGfbE+MjWzmsCBEnJGLHs6AXGK/h3nZDkYfnnEls6NzbntieoldQQg==",
   "_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.39.tgz",
-  "_shasum": "2502edc8b2aaac370eb276fbec8f3ab0ae2b0702",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-28.2.3.tgz",
+  "_shasum": "ca88d206fbb04487749275d9457708a7755a54a7",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
@@ -45,13 +45,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.1.33",
-    "@syncfusion/ej2-data": "~28.1.33",
-    "@syncfusion/ej2-inputs": "~28.1.41",
-    "@syncfusion/ej2-lists": "~28.1.37",
-    "@syncfusion/ej2-navigations": "~28.1.41",
-    "@syncfusion/ej2-notifications": "~28.1.33",
-    "@syncfusion/ej2-popups": "~28.1.39"
+    "@syncfusion/ej2-base": "~28.2.3",
+    "@syncfusion/ej2-data": "~28.2.3",
+    "@syncfusion/ej2-inputs": "~28.2.3",
+    "@syncfusion/ej2-lists": "~28.2.3",
+    "@syncfusion/ej2-navigations": "~28.2.4",
+    "@syncfusion/ej2-notifications": "~28.2.3",
+    "@syncfusion/ej2-popups": "~28.2.3"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -76,7 +76,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "28.1.41",
+  "version": "28.2.4",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/common/virtual-scroll.js

@@ -190,7 +190,7 @@ var VirtualScroll = /** @class */ (function () {
                 endIndex = this.parent.viewPortInfo.endIndex - this.parent.value.length;
                 if (this.parent.viewPortInfo.startIndex === 0) {
                     this.parent.updateVirtualReOrderList(true);
-                    if (this.parent.value.length < this.parent.itemCount) {
+                    if (this.parent.value.length < this.parent.itemCount && this.parent.value.length !== this.parent.totalItemCount) {
                         var oldUlElement = this.parent.list.querySelector('.e-list-parent' + ':not(.e-reorder)');
                         if (oldUlElement) {
                             this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
@@ -253,6 +253,12 @@ var VirtualScroll = /** @class */ (function () {
         if (isListUpdated) {
             for (var i = this.parent.viewPortInfo.startIndex; i < endIndex; i++) {
                 var index = i;
+                if (this.component === 'multiselect' && this.parent.mode === 'CheckBox') {
+                    var oldUlElement = this.parent.list.querySelector('.e-list-parent' + '.e-reorder');
+                    if (oldUlElement) {
+                        this.parent.list.querySelector('.e-virtual-ddl-content').removeChild(oldUlElement);
+                    }
+                }
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var alreadyAddedData = this.parent.generatedDataObject[index];
                 if (this.component === 'multiselect' && this.parent.hideSelectedItem) {

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-tree/drop-down-tree.js

@@ -2631,6 +2631,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) {
@@ -3360,6 +3363,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

@@ -72,6 +72,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private isUpdateFooterHeight;
     private isBlurDispatching;
     private isFilterPrevented;
+    private isFilteringAction;
     /**
      * 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.
@@ -737,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

@@ -105,6 +105,7 @@ var MultiSelect = /** @class */ (function (_super) {
         _this.isUpdateFooterHeight = false;
         _this.isBlurDispatching = false;
         _this.isFilterPrevented = false;
+        _this.isFilteringAction = false;
         _this.isValidKey = false;
         _this.selectAllEventData = [];
         _this.selectAllEventEle = [];
@@ -566,7 +567,7 @@ var MultiSelect = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.totalItemCount = e.count;
         }
-        if (this.value && list && list.length > 0 && this.allowFiltering && this.mode !== 'CheckBox' && !this.enableVirtualization && !this.isFilterPrevented && !this.allowCustomValue) {
+        if (this.value && list && list.length > 0 && this.allowFiltering && this.mode !== 'CheckBox' && !this.enableVirtualization && !this.isFilterPrevented && !this.allowCustomValue && this.isFilteringAction) {
             var allItemsInValue = list.every(function (item) {
                 var itemValue = getValue((_this.fields.value) ? _this.fields.value : '', item);
                 return _this.value.some(function (val) {
@@ -1589,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)) {
@@ -3240,6 +3244,9 @@ var MultiSelect = /** @class */ (function (_super) {
             this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length : this.totalItemCount;
         }
         this.getSkeletonCount();
+        this.skeletonCount = this.totalItemCount !== 0 && this.totalItemCount < this.itemCount * 2 &&
+            ((!(this.dataSource instanceof DataManager)) || ((this.dataSource instanceof DataManager) &&
+                (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;
         this.UpdateSkeleton();
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (this.list.getElementsByClassName('e-virtual-ddl')[0]) {
@@ -3460,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,
@@ -3470,10 +3478,12 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (!eventArgs.cancel) {
                         if (!_this.isFiltered && !eventArgs.preventDefaultAction) {
                             _this.filterAction = true;
+                            _this.isFilteringAction = true;
                             if (_this.dataSource instanceof DataManager && _this.allowCustomValue) {
                                 _this.isCustomRendered = false;
                             }
                             _this.dataUpdater(_this.dataSource, null, _this.fields);
+                            _this.isFilteringAction = false;
                         }
                     }
                 });