@syncfusion/ej2-dropdowns 23.1.44 → 23.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.1.44
+*  version : 23.2.5
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@23.1.43",
+  "_id": "@syncfusion/ej2-dropdowns@23.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-Xr9PivtmGzoHdHTa7A/OdylJZvAicZq8KjyH32IBZmIu8LXxy4CnqwqZE4iArWew6cieHg2T4iisgBkXfhXM0w==",
+  "_integrity": "sha512-+N2K/8gXy3ibWBluPxSL1E5+GZyle8s0cdnpINl+mCbl/3Z0EUBkvbB5q8+FWa2XM2Dmjg9iN9mu0aNh36i/Zw==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -34,8 +34,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-23.1.43.tgz",
-  "_shasum": "387fcadf249d432ca74bb8349ea730b7bfe7e6b7",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-23.2.4.tgz",
+  "_shasum": "c8328029f62ff189c8c594db04b78ad764143cd5",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -43,13 +43,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.1.41",
-    "@syncfusion/ej2-data": "~23.1.44",
-    "@syncfusion/ej2-inputs": "~23.1.43",
-    "@syncfusion/ej2-lists": "~23.1.43",
-    "@syncfusion/ej2-navigations": "~23.1.44",
-    "@syncfusion/ej2-notifications": "~23.1.40",
-    "@syncfusion/ej2-popups": "~23.1.44"
+    "@syncfusion/ej2-base": "~23.2.4",
+    "@syncfusion/ej2-data": "~23.2.4",
+    "@syncfusion/ej2-inputs": "~23.2.4",
+    "@syncfusion/ej2-lists": "~23.2.4",
+    "@syncfusion/ej2-navigations": "~23.2.5",
+    "@syncfusion/ej2-notifications": "~23.2.5",
+    "@syncfusion/ej2-popups": "~23.2.4"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -74,7 +74,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "23.1.44",
+  "version": "23.2.5",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/common/virtual-scroll.d.ts

@@ -47,6 +47,7 @@ export declare class VirtualScroll {
     private getPageQuery;
     private setGeneratedData;
     private generateAndExecuteQueryAsync;
+    private removeSkipAndTakeEvents;
     setCurrentViewDataAsync(): void;
     private generateQueryAndSetQueryIndexAsync;
     private dataProcessAsync;

package/src/common/virtual-scroll.js

@@ -142,10 +142,22 @@ var VirtualScroll = /** @class */ (function () {
         if (isQueryGenerated === void 0) { isQueryGenerated = false; }
         var dataSource = this.parent.dataSource;
         if (!isQueryGenerated) {
-            query = this.getPageQuery(query, virtualItemStartIndex, virtualItemEndIndex);
+            if (!isNullOrUndefined(this.parent.query)) {
+                var newQuery = this.removeSkipAndTakeEvents(this.parent.query.clone());
+                query = this.getPageQuery(newQuery, virtualItemStartIndex, virtualItemEndIndex);
+            }
+            else {
+                query = this.getPageQuery(query, virtualItemStartIndex, virtualItemEndIndex);
+            }
         }
         this.parent.resetList(dataSource, this.parent.fields, query);
     };
+    VirtualScroll.prototype.removeSkipAndTakeEvents = function (query) {
+        query.queries = query.queries.filter(function (event) {
+            return event.fn !== 'onSkip' && event.fn !== 'onTake';
+        });
+        return query;
+    };
     VirtualScroll.prototype.setCurrentViewDataAsync = function () {
         // eslint-disable-next-line
         var currentData = [];

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

@@ -807,6 +807,9 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.updateUpDownAction = function (e, isVirtualKeyAction) {
         if (this.allowFiltering && !this.enableVirtualization && this.getModuleName() !== 'autocomplete') {
             var value_1 = this.getItemData().value;
+            if (isNullOrUndefined(value_1)) {
+                value_1 = 'null';
+            }
             var filterIndex = this.getIndexByValue(value_1);
             if (!isNullOrUndefined(filterIndex)) {
                 this.activeIndex = filterIndex;
@@ -1035,7 +1038,6 @@ var DropDownList = /** @class */ (function (_super) {
             if (this.inputWrapper.container.classList.contains(dropDownListClasses.inputFocus) || this.isPopupOpen) {
                 this.isDocumentClick = true;
                 var isActive = this.isRequested;
-                this.isInteracted = false;
                 this.hidePopup(e);
                 if (!isActive) {
                     this.onFocusOut();
@@ -3392,6 +3394,7 @@ var DropDownList = /** @class */ (function (_super) {
             this.isSelectCustom = false;
             this.clearAll(e);
         }
+        this.isInteracted = false;
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**

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

@@ -133,6 +133,7 @@ export declare class ListBox extends DropDownBase {
     private isDataSourceUpdate;
     private dragValue;
     private customDraggedItem;
+    private timer;
     /**
      * Sets the CSS classes to root element of this component, which helps to customize the
      * complete styles.
@@ -364,6 +365,8 @@ export declare class ListBox extends DropDownBase {
     private initToolbarAndStyles;
     private triggerDragStart;
     private triggerDrag;
+    private setScrollDown;
+    private stopTimer;
     private beforeDragEnd;
     private dragEnd;
     private updateListItems;

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

@@ -422,6 +422,7 @@ var ListBox = /** @class */ (function (_super) {
         });
     };
     ListBox.prototype.triggerDrag = function (args) {
+        var _this = this;
         var scrollParent;
         var boundRect;
         var scrollMoved = 36;
@@ -441,6 +442,7 @@ var ListBox = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var event = args.event;
         var wrapper;
+        this.stopTimer();
         if (args.target && (args.target.classList.contains('e-listbox-wrapper') || args.target.classList.contains('e-list-item')
             || args.target.classList.contains('e-filter-parent') || args.target.classList.contains('e-input-group')
             || args.target.closest('.e-list-item'))) {
@@ -460,10 +462,10 @@ var ListBox = /** @class */ (function (_super) {
             }
             boundRect = scrollParent.getBoundingClientRect();
             if ((boundRect.y + scrollParent.offsetHeight) - (event.clientY + scrollMoved) < 1) {
-                scrollParent.scrollTop = scrollParent.scrollTop + scrollHeight;
+                this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, true); }, 70);
             }
             else if ((event.clientY - scrollMoved) - boundRect.y < 1) {
-                scrollParent.scrollTop = scrollParent.scrollTop - scrollHeight;
+                this.timer = window.setInterval(function () { _this.setScrollDown(scrollParent, scrollHeight, false); }, 70);
             }
         }
         if (args.target === null) {
@@ -471,7 +473,19 @@ var ListBox = /** @class */ (function (_super) {
         }
         this.trigger('drag', this.getDragArgs(args));
     };
+    ListBox.prototype.setScrollDown = function (scrollElem, scrollPixel, isScrollDown) {
+        if (isScrollDown) {
+            scrollElem.scrollTop = scrollElem.scrollTop + scrollPixel;
+        }
+        else {
+            scrollElem.scrollTop = scrollElem.scrollTop - scrollPixel;
+        }
+    };
+    ListBox.prototype.stopTimer = function () {
+        window.clearInterval(this.timer);
+    };
     ListBox.prototype.beforeDragEnd = function (args) {
+        this.stopTimer();
         var items = [];
         this.dragValue = this.getFormattedValue(args.droppedElement.getAttribute('data-value'));
         if (this.value.indexOf(this.dragValue) > -1) {
@@ -1922,6 +1936,9 @@ var ListBox = /** @class */ (function (_super) {
             var list = this.mainList.cloneNode ? this.mainList.cloneNode(true) : this.mainList;
             if (backCommand) {
                 this.remoteCustomValue = false;
+                if (this.isAngular && this.itemTemplate) {
+                    list = this.renderItems(this.listData, fields);
+                }
                 this.onActionComplete(list, this.jsonData);
                 this.notify('reOrder', { module: 'CheckBoxSelection', enable: this.selectionSettings.showCheckbox, e: this });
             }

package/src/mention/mention.js

@@ -459,6 +459,9 @@ var Mention = /** @class */ (function (_super) {
                 var value = this.getFormattedValue(focusItem.getAttribute('data-value'));
                 this.selectEventCallback(focusItem, this.getDataByValue(value), value, true);
             }
+            if (this.beforePopupOpen) {
+                this.renderPopup();
+            }
         }
     };
     Mention.prototype.setDataIndex = function () {

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

@@ -2615,7 +2615,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.updateDataList = function () {
         if (this.mainList && this.ulElement && !(this.isFiltered || this.filterAction || this.targetElement().trim())) {
             var isDynamicGroupItemUpdate = this.mainList.childElementCount < this.ulElement.childElementCount;
-            var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
+            var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount)));
             var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 && !(this.ulElement.childElementCount < this.mainList.childElementCount) && (this.ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
             if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
                 //EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)

package/styles/bootstrap-dark.css

@@ -1218,6 +1218,11 @@ ejs-dropdownlist {
   width: 40px;
 }
 
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
+  color: #fff;
+}
+
 .e-multiselect.e-input-group .e-ddl-icon::before {
   content: "\e969";
   font-family: "e-icons";

package/styles/bootstrap5-dark.css

@@ -1331,7 +1331,8 @@ ejs-dropdownlist {
   width: 24px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #fff;
   height: 100%;
 }

package/styles/bootstrap5.css

@@ -1331,7 +1331,8 @@ ejs-dropdownlist {
   width: 24px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #212529;
   height: 100%;
 }

package/styles/fabric-dark.css

@@ -1187,6 +1187,11 @@ ejs-dropdownlist {
   margin: 2px 2px 2px 0;
 }
 
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
+  color: #fff;
+}
+
 .e-multiselect.e-input-group .e-ddl-icon::before {
   content: "\e966";
   font-family: "e-icons";

package/styles/fluent-dark.css

@@ -1331,7 +1331,8 @@ ejs-dropdownlist {
   width: 24px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #f3f2f1;
   height: 100%;
 }

package/styles/fluent.css

@@ -1331,7 +1331,8 @@ ejs-dropdownlist {
   width: 24px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #201f1e;
   height: 100%;
 }

package/styles/highcontrast.css

@@ -1285,6 +1285,11 @@ ejs-dropdownlist {
   width: 30px;
 }
 
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
+  color: #fff;
+}
+
 .e-multiselect.e-input-group .e-ddl-icon::before {
   content: "\e966";
   font-family: "e-icons";

package/styles/multi-select/_bootstrap-dark-definition.scss

@@ -195,4 +195,9 @@ $ddl-closer-margin-top-bigger-small: -4em !default;
     height: $ddl-chip-hooker-square;
     width: $ddl-chip-hooker-square;
   }
+
+  .e-multi-select-wrapper .e-searcher input[type = 'text'],
+  .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
+    color: $grey-light-font;
+  }
 }

package/styles/multi-select/_bootstrap5-definition.scss

@@ -218,7 +218,8 @@ $ddl-close-down-icon-left: 35px !default;
     width: $ddl-chip-hooker-square;
   }
 
-  .e-multi-select-wrapper .e-searcher input[type = 'text'] {
+  .e-multi-select-wrapper .e-searcher input[type = 'text'],
+  .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
     color: $content-text-color;
     height: 100%;
   }

package/styles/multi-select/_fabric-dark-definition.scss

@@ -184,4 +184,9 @@ $ddl-closer-margin-top-bigger-small: -3.2em !default;
   .e-small .e-multi-select-wrapper .e-chips {
     margin: 2px 2px 2px 0;
   }
+
+  .e-multi-select-wrapper .e-searcher input[type = 'text'],
+  .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
+    color: #fff;
+  }
 }

package/styles/multi-select/_fluent-definition.scss

@@ -229,7 +229,8 @@ $ddl-small-clear-icon-width: 12px !default;
     width: $ddl-chip-hooker-square;
   }
 
-  .e-multi-select-wrapper .e-searcher input[type = 'text'] {
+  .e-multi-select-wrapper .e-searcher input[type = 'text'],
+  .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
     color: $content-text-color;
     height: 100%;
   }

package/styles/multi-select/_highcontrast-definition.scss

@@ -295,4 +295,9 @@ $ddl-closer-margin-top-bigger-small: -3.4em !default;
     height: 30px;
     width: 30px;
   }
+
+  .e-multi-select-wrapper .e-searcher input[type = 'text'],
+  .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
+    color: #fff;
+  }
 }

package/styles/multi-select/_tailwind-definition.scss

@@ -227,7 +227,8 @@ $ddl-close-icon-hover-color: $icon-color-hover !default;
     width: $ddl-chip-hooker-square;
   }
 
-  .e-multi-select-wrapper .e-searcher input[type = 'text'] {
+  .e-multi-select-wrapper .e-searcher input[type = 'text'],
+  .e-multi-select-wrapper .e-multi-searcher input[type = 'text'] {
     color: $content-text-color;
     height: 100%;
   }

package/styles/multi-select/bootstrap-dark.css

@@ -57,6 +57,11 @@
   width: 40px;
 }
 
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
+  color: #fff;
+}
+
 .e-multiselect.e-input-group .e-ddl-icon::before {
   content: "\e969";
   font-family: "e-icons";

package/styles/multi-select/bootstrap5-dark.css

@@ -82,7 +82,8 @@
   width: 24px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #fff;
   height: 100%;
 }

package/styles/multi-select/bootstrap5.css

@@ -82,7 +82,8 @@
   width: 24px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #212529;
   height: 100%;
 }

package/styles/multi-select/fabric-dark.css

@@ -48,6 +48,11 @@
   margin: 2px 2px 2px 0;
 }
 
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
+  color: #fff;
+}
+
 .e-multiselect.e-input-group .e-ddl-icon::before {
   content: "\e966";
   font-family: "e-icons";

package/styles/multi-select/fluent-dark.css

@@ -82,7 +82,8 @@
   width: 24px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #f3f2f1;
   height: 100%;
 }

package/styles/multi-select/fluent.css

@@ -82,7 +82,8 @@
   width: 24px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #201f1e;
   height: 100%;
 }

package/styles/multi-select/highcontrast.css

@@ -144,6 +144,11 @@
   width: 30px;
 }
 
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
+  color: #fff;
+}
+
 .e-multiselect.e-input-group .e-ddl-icon::before {
   content: "\e966";
   font-family: "e-icons";

package/styles/multi-select/tailwind-dark.css

@@ -91,7 +91,8 @@
   width: 28px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #fff;
   height: 100%;
 }

package/styles/multi-select/tailwind.css

@@ -91,7 +91,8 @@
   width: 28px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #111827;
   height: 100%;
 }

package/styles/tailwind-dark.css

@@ -1347,7 +1347,8 @@ ejs-dropdownlist {
   width: 28px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #fff;
   height: 100%;
 }

package/styles/tailwind.css

@@ -1347,7 +1347,8 @@ ejs-dropdownlist {
   width: 28px;
 }
 
-.e-multi-select-wrapper .e-searcher input[type=text] {
+.e-multi-select-wrapper .e-searcher input[type=text],
+.e-multi-select-wrapper .e-multi-searcher input[type=text] {
   color: #111827;
   height: 100%;
 }