@syncfusion/ej2-dropdowns 28.1.39 → 28.2.3

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.1.39
+*  version : 28.2.3
 *  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.38",
+  "_id": "@syncfusion/ej2-dropdowns@28.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-FGCpdclni6qQ3LeUi4ZYQp/ziJ/TarJpuufjvLID6+Emm8qvjpqsXHRpBBx7ySxGBqSv9EvFvwwX3tlEU7Q9uw==",
+  "_integrity": "sha512-XHQSq89yLShgV5vMeiTTFCUt2tQ+wyqf7v3t/paW5IDkCrxAlfiU56sTuv5XyuZ3rBECWpmlDmIDP6kPz2bPMw==",
   "_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.38.tgz",
-  "_shasum": "5d383cb4f7b3f08fbaff11b8bb86a5c3320adbab",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-28.1.41.tgz",
+  "_shasum": "1d5b644c7717243d23cd17fa544fb0a9810b7b99",
   "_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.37",
-    "@syncfusion/ej2-lists": "~28.1.37",
-    "@syncfusion/ej2-navigations": "~28.1.39",
-    "@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.3",
+    "@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.39",
+  "version": "28.2.3",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/common/interface.d.ts

@@ -111,4 +111,5 @@ export interface IDropdownlist extends Component<HTMLElement> {
     findListElement(list: HTMLElement, findNode: string, attribute: string, value: string | boolean | number): HTMLElement;
     scrollStop(e?: Event): void;
     targetElement(): string;
+    checkMaxSelection(): void;
 }

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) {
@@ -322,6 +328,7 @@ var VirtualScroll = /** @class */ (function () {
         }
         if (this.component === 'multiselect') {
             this.parent.updatevirtualizationList();
+            this.parent.checkMaxSelection();
         }
         this.parent.getSkeletonCount();
         this.parent.skeletonCount = this.parent.totalItemCount !== 0 && this.parent.totalItemCount < this.parent.itemCount * 2 &&

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

@@ -358,7 +358,9 @@ var DropDownList = /** @class */ (function (_super) {
         };
     };
     DropDownList.prototype.setEnableRtl = function () {
-        Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);
+        if (!isNullOrUndefined(this.inputElement) && !isNullOrUndefined(this.inputElement.parentElement)) {
+            Input.setEnableRtl(this.enableRtl, [this.inputElement.parentElement]);
+        }
         if (this.popupObj) {
             this.popupObj.enableRtl = this.enableRtl;
             this.popupObj.dataBind();
@@ -3309,6 +3311,9 @@ var DropDownList = /** @class */ (function (_super) {
     };
     DropDownList.prototype.updateInitialData = function () {
         var currentData = this.selectData;
+        if (isNullOrUndefined(currentData)) {
+            return;
+        }
         var ulElement = this.renderItems(currentData, this.fields);
         this.list.scrollTop = 0;
         this.virtualListInfo = {
@@ -3341,7 +3346,7 @@ var DropDownList = /** @class */ (function (_super) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
         }
-        else if (!this.list.querySelector('.e-virtual-ddl')) {
+        else if (!this.list.querySelector('.e-virtual-ddl') && this.list.parentElement) {
             var virualElement = this.createElement('div', {
                 id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
             });
@@ -4099,7 +4104,7 @@ var DropDownList = /** @class */ (function (_super) {
         if (this.isReact && this.isFiltering() && this.itemTemplate != null) {
             setTimeout(function () {
                 proxy.cloneElements();
-                proxy.isSecondClick = true;
+                proxy.isSecondClick = proxy.isReact && proxy.isFiltering() && proxy.dataSource instanceof DataManager && !proxy.list.querySelector('ul') ? false : true;
             }, duration);
         }
     };

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

@@ -878,6 +878,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private removeChip;
     private resetValue;
     private clearCheckAll;
+    private setOldValue;
     private selectAllItems;
     private updateTreeSettings;
     private updateCheckBoxState;

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

@@ -347,7 +347,7 @@ var DropDownTree = /** @class */ (function (_super) {
         if (firstUl && firstUl.getAttribute('aria-multiselectable')) {
             firstUl.removeAttribute('aria-multiselectable');
         }
-        this.oldValue = this.value;
+        this.setOldValue();
         if (!this.isRemoteData) {
             this.isInitialized = true;
         }
@@ -775,7 +775,7 @@ var DropDownTree = /** @class */ (function (_super) {
             this.triggerChangeEvent(event);
         }
         this.removeValue = false;
-        this.oldValue = this.value;
+        this.setOldValue();
         this.trigger('blur');
     };
     DropDownTree.prototype.updateView = function () {
@@ -808,7 +808,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 element: this.element
             };
             this.trigger('change', eventArgs);
-            this.oldValue = this.value;
+            this.setOldValue();
         }
     };
     DropDownTree.prototype.ddtCompareValues = function (oldValue, newValue) {
@@ -1297,6 +1297,7 @@ var DropDownTree = /** @class */ (function (_super) {
             frameSpan.classList.add(CHECK);
             ariaState = 'true';
             if (!this.isReverseUpdate) {
+                this.setOldValue();
                 this.isCheckAllCalled = true;
                 this.treeObj.checkAll();
                 if (!this.changeOnBlur) {
@@ -1461,7 +1462,7 @@ var DropDownTree = /** @class */ (function (_super) {
                     }
                 }
                 if (valArr.length !== 0) {
-                    this.oldValue = this.value;
+                    this.setOldValue();
                     this.setProperties({ value: valArr }, true);
                     this.setValidValue();
                 }
@@ -1472,7 +1473,7 @@ var DropDownTree = /** @class */ (function (_super) {
             else {
                 data = this.getItems(this.text);
                 if (!isNOU(data)) {
-                    this.oldValue = this.value;
+                    this.setOldValue();
                     this.setProperties({ value: [data[this.fields.value].toString()] }, true);
                     this.setValidValue();
                 }
@@ -1487,7 +1488,7 @@ var DropDownTree = /** @class */ (function (_super) {
             return;
         }
         if (!this.isInitialized) {
-            this.oldValue = this.value;
+            this.setOldValue();
             if (this.treeObj.selectedNodes.length > 0 && !this.showCheckBox) {
                 this.setProperties({ value: this.treeObj.selectedNodes }, true);
                 if (this.allowMultiSelection) {
@@ -2080,7 +2081,7 @@ var DropDownTree = /** @class */ (function (_super) {
     };
     DropDownTree.prototype.onBeforeSelect = function (args) {
         if (args.isInteracted) {
-            this.oldValue = this.value ? this.value.slice() : this.value;
+            this.setOldValue();
             if (this.value === null) {
                 this.setProperties({ value: [] }, true);
             }
@@ -2201,7 +2202,7 @@ var DropDownTree = /** @class */ (function (_super) {
     };
     DropDownTree.prototype.beforeCheck = function (args) {
         if (args.isInteracted) {
-            this.oldValue = this.value ? this.value.slice() : this.value;
+            this.setOldValue();
         }
     };
     DropDownTree.prototype.onNodeExpanded = function () {
@@ -2752,7 +2753,7 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         Input.setValue(null, this.inputEle, this.floatLabelType);
         if (!isDynamicChange) {
-            this.oldValue = this.value;
+            this.setOldValue();
             this.setProperties({ value: [] }, true);
             this.showOrHideValueTemplate(false);
         }
@@ -2788,6 +2789,9 @@ var DropDownTree = /** @class */ (function (_super) {
             this.setLocale(false);
         }
     };
+    DropDownTree.prototype.setOldValue = function () {
+        this.oldValue = Array.isArray(this.value) ? this.value.slice() : this.value;
+    };
     DropDownTree.prototype.selectAllItems = function (state) {
         if (this.showCheckBox) {
             if (state) {

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.
@@ -646,6 +647,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private header;
     private footer;
     private initStatus;
+    private isInitRemoteVirtualData;
+    private isDynamicRemoteVirtualData;
     private popupWrapper;
     private keyCode;
     private beforePopupOpen;
@@ -656,8 +659,6 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private selectAllEventEle;
     private filterParent;
     private removeIndex;
-    private resetMainList;
-    private resetFilteredData;
     private preventSetCurrentData;
     private virtualCustomData;
     private isSelectAllLoop;

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

@@ -105,11 +105,10 @@ var MultiSelect = /** @class */ (function (_super) {
         _this.isUpdateFooterHeight = false;
         _this.isBlurDispatching = false;
         _this.isFilterPrevented = false;
+        _this.isFilteringAction = false;
         _this.isValidKey = false;
         _this.selectAllEventData = [];
         _this.selectAllEventEle = [];
-        _this.resetMainList = null;
-        _this.resetFilteredData = false;
         _this.preventSetCurrentData = false;
         _this.isSelectAllLoop = false;
         _this.scrollFocusStatus = false;
@@ -568,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) {
@@ -670,6 +669,9 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
                 this.initialValueUpdate();
             }
+            else {
+                this.initialValueUpdate(this.listData, true);
+            }
             this.initialUpdate();
             this.refreshPlaceHolder();
             if (this.mode !== 'CheckBox' && this.changeOnBlur) {
@@ -1281,10 +1283,6 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
         this.updateDataList();
-        if (this.resetMainList) {
-            this.mainList = this.resetMainList;
-            this.resetMainList = null;
-        }
         this.refreshListItems(null);
         if (this.mode !== 'Box' && this.mode !== 'CheckBox') {
             this.updateDelimView();
@@ -3243,6 +3241,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]) {
@@ -3433,7 +3434,6 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.search = function (e) {
         var _this = this;
-        this.resetFilteredData = true;
         this.preventSetCurrentData = false;
         this.firstItem = this.dataSource && this.dataSource.length > 0 ? this.dataSource[0] : null;
         if (!isNullOrUndefined(e)) {
@@ -3474,10 +3474,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;
                         }
                     }
                 });
@@ -3650,7 +3652,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 else {
                     if (this_1.listData) {
                         if (this_1.enableVirtualization) {
-                            if (delim) {
+                            if (delim && !this_1.isDynamicRemoteVirtualData) {
                                 data = this_1.delimiterWrapper && this_1.delimiterWrapper.innerHTML === '' ? data :
                                     this_1.delimiterWrapper.innerHTML;
                             }
@@ -3663,7 +3665,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             }
                             else {
                                 temp = isInitialVirtualData && delim ? this_1.text : this_1.getTextByValue(value);
-                                var textValues = isInitialVirtualData ? this_1.text : (this_1.text && this_1.text !== '' ? this_1.text + this_1.delimiterChar + temp : temp);
+                                var textValues = this_1.isDynamicRemoteVirtualData && value != null && value !== '' ? this_1.getTextByValue(value) : isInitialVirtualData ? this_1.text : (this_1.text && this_1.text !== '' ? this_1.text + this_1.delimiterChar + temp : temp);
                                 data += temp + delimiterChar + ' ';
                                 text.push(textValues);
                                 hiddenElementContent = this_1.hiddenElement.innerHTML;
@@ -3831,7 +3833,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             (this.mode === 'Box' || this.mode === 'Default'))) ||
                         (this.enableVirtualization && value != null && text != null && !isCustomData)) {
                         var currentText = [];
-                        var textValues = this.text != null && this.text !== '' ? this.text + this.delimiterChar + text : text;
+                        var textValues = this.isDynamicRemoteVirtualData && text != null && text !== '' ? text : this.text != null && this.text !== '' ? this.text + this.delimiterChar + text : text;
                         currentText.push(textValues);
                         this.setProperties({ text: currentText.toString() }, true);
                         this.addChip(text, value);
@@ -5145,11 +5147,6 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.onPropertyChanged = function (newProp, oldProp) {
         if (newProp.dataSource && !isNullOrUndefined(Object.keys(newProp.dataSource))
             || newProp.query && !isNullOrUndefined(Object.keys(newProp.query))) {
-            if (this.resetFilteredData) {
-                // The filtered data is not being reset in the component after the user focuses out.
-                this.resetMainList = !this.resetMainList ? this.mainList : this.resetMainList;
-                this.resetFilteredData = false;
-            }
             this.mainList = null;
             this.mainData = null;
             this.isFirstClick = false;
@@ -5418,6 +5415,12 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (!this.enableVirtualization || (this.enableVirtualization && (!(this.dataSource instanceof DataManager)))) {
                     this.initialValueUpdate();
                 }
+                else if (!this.isInitRemoteVirtualData) {
+                    this.isDynamicRemoteVirtualData = true;
+                    this.initialValueUpdate(this.listData, true);
+                    this.isDynamicRemoteVirtualData = false;
+                    this.initialUpdate();
+                }
                 if (this.mode !== 'Box' && !this.inputFocus) {
                     this.updateDelimView();
                 }
@@ -6015,9 +6018,11 @@ var MultiSelect = /** @class */ (function (_super) {
                         if (e.result.length > 0) {
                             listItems_2 = e.result;
                             _this.initStatus = false;
+                            _this.isInitRemoteVirtualData = true;
                             setTimeout(function () {
                                 _this.initialValueUpdate(listItems_2, true);
                                 _this.initialUpdate();
+                                _this.isInitRemoteVirtualData = false;
                             }, 100);
                             _this.initStatus = true;
                         }