@syncfusion/ej2-dropdowns 32.2.3 → 32.2.6

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 32.2.3
+*  version : 32.2.4
 *  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": "32.2.3",
+  "version": "32.2.6",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~32.2.3",
+    "@syncfusion/ej2-base": "~32.2.6",
     "@syncfusion/ej2-data": "~32.2.3",
     "@syncfusion/ej2-inputs": "~32.2.3",
-    "@syncfusion/ej2-lists": "~32.2.3",
-    "@syncfusion/ej2-navigations": "~32.2.3",
+    "@syncfusion/ej2-lists": "~32.2.6",
+    "@syncfusion/ej2-navigations": "~32.2.6",
     "@syncfusion/ej2-notifications": "~32.2.3",
-    "@syncfusion/ej2-popups": "~32.2.3"
+    "@syncfusion/ej2-popups": "~32.2.6"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -591,6 +591,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     }[], e?: Object, isUpdated?: boolean): void;
     private isValueInList;
     private checkFieldValue;
+    private checkAndFetchItemData;
     private updateActionCompleteDataValues;
     private addNewItem;
     protected updateActionCompleteData(li: HTMLElement, item: {

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

@@ -2382,37 +2382,10 @@ var DropDownList = /** @class */ (function (_super) {
                 this.activeIndex = this.index;
                 this.initialRemoteRender = false;
                 if (this.value && this.dataSource instanceof DataManager) {
-                    var checkField_1 = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
-                    var value_1 = this.allowObjectBinding && !isNullOrUndefined(this.value) ?
-                        getValue(checkField_1, this.value) : this.value;
-                    var fieldValue_1 = this.fields.value.split('.');
-                    var checkVal = list.some(function (x) {
-                        return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ?
-                            _this.checkFieldValue(x, fieldValue_1) === value_1 : x[checkField_1] === value_1;
-                    });
-                    if (this.enableVirtualization && this.virtualGroupDataSource) {
-                        checkVal = this.virtualGroupDataSource.some(function (x) {
-                            return isNullOrUndefined(x[checkField_1]) && fieldValue_1.length > 1 ?
-                                _this.checkFieldValue(x, fieldValue_1) === value_1 : x[checkField_1] === value_1;
-                        });
-                    }
-                    if (!checkVal && !this.enableVirtualization) {
-                        this.dataSource.executeQuery(this.getQuery(this.query).where(new Predicate(checkField_1, 'equal', value_1)))
-                            .then(function (e) {
-                            if (e.result.length > 0) {
-                                if (!_this.enableVirtualization) {
-                                    _this.addItem(e.result, list.length);
-                                }
-                                _this.updateValues();
-                            }
-                            else {
-                                _this.updateValues();
-                            }
-                        });
-                    }
-                    else {
-                        this.updateValues();
-                    }
+                    var checkField = isNullOrUndefined(this.fields.value) ? this.fields.text : this.fields.value;
+                    var value = this.allowObjectBinding && !isNullOrUndefined(this.value) ?
+                        getValue(checkField, this.value) : this.value;
+                    this.checkAndFetchItemData(list, value, checkField);
                 }
                 else {
                     this.updateValues();
@@ -2520,6 +2493,46 @@ var DropDownList = /** @class */ (function (_super) {
         });
         return checkField;
     };
+    DropDownList.prototype.checkAndFetchItemData = function (list, value, checkField) {
+        var _this = this;
+        var fieldValue = this.fields.value.split('.');
+        var checkVal = list.some(function (x) {
+            return isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
+                _this.checkFieldValue(x, fieldValue) === value : x[checkField] === value;
+        });
+        if (this.enableVirtualization && this.virtualGroupDataSource) {
+            checkVal = this.virtualGroupDataSource.some(function (x) {
+                return isNullOrUndefined(x[checkField]) && fieldValue.length > 1 ?
+                    _this.checkFieldValue(x, fieldValue) === value : x[checkField] === value;
+            });
+        }
+        if (!checkVal && this.dataSource instanceof DataManager) {
+            (this.dataSource).executeQuery(this.getQuery(this.query).where(new Predicate(checkField, 'equal', value)))
+                .then(function (e) {
+                if (e.result.length > 0) {
+                    if (!_this.enableVirtualization) {
+                        _this.addItem(e.result, list.length);
+                    }
+                    else {
+                        _this.itemData = e.result[0];
+                        var dataItem = _this.getItemData();
+                        if ((_this.value === dataItem.value && _this.text !== dataItem.text) ||
+                            (_this.value !== dataItem.value && _this.text === dataItem.text)) {
+                            _this.setProperties({ text: dataItem.text.toString() });
+                            Input.setValue(_this.text, _this.inputElement, _this.floatLabelType, _this.showClearButton);
+                        }
+                    }
+                    _this.updateValues();
+                }
+                else {
+                    _this.updateValues();
+                }
+            });
+        }
+        else {
+            this.updateValues();
+        }
+    };
     DropDownList.prototype.updateActionCompleteDataValues = function (ulElement, list) {
         this.actionCompleteData = { ulElement: ulElement.cloneNode(true), list: list, isUpdated: true };
         if (this.actionData.list !== this.actionCompleteData.list && this.actionCompleteData.ulElement && this.actionCompleteData.list) {
@@ -2529,10 +2542,10 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.addNewItem = function (listData, newElement) {
         var _this = this;
         if (!isNullOrUndefined(this.itemData) && !isNullOrUndefined(newElement)) {
-            var value_2 = this.getItemData().value;
+            var value_1 = this.getItemData().value;
             var isExist = listData.some(function (data) {
-                return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value_2) ||
-                    (getValue(_this.fields.value, data) === value_2));
+                return (((typeof data === 'string' || typeof data === 'number' || typeof data === 'boolean') && data === value_1) ||
+                    (getValue(_this.fields.value, data) === value_1));
             });
             if (!isExist) {
                 this.addItem(this.itemData);
@@ -3947,6 +3960,12 @@ var DropDownList = /** @class */ (function (_super) {
                         return { value: void 0 };
                     }
                     if (this_1.enableVirtualization) {
+                        if (newProp.value && this_1.dataSource instanceof DataManager) {
+                            var checkField = isNullOrUndefined(this_1.fields.value) ? this_1.fields.text : this_1.fields.value;
+                            var value = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ?
+                                getValue(checkField, newProp.value) : newProp.value;
+                            this_1.checkAndFetchItemData(this_1.listData, value, checkField);
+                        }
                         this_1.updateValues();
                         this_1.updateInputFields();
                         this_1.notify('setCurrentViewDataAsync', {
@@ -3975,9 +3994,9 @@ var DropDownList = /** @class */ (function (_super) {
                                 var listLength_2 = this_1.getItems().length;
                                 var checkField = isNullOrUndefined(this_1.fields.value) ? this_1.fields.text : this_1.fields.value;
                                 this_1.typedString = '';
-                                var value_3 = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ?
+                                var value_2 = this_1.allowObjectBinding && !isNullOrUndefined(newProp.value) ?
                                     getValue(checkField, newProp.value) : newProp.value;
-                                this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', value_3)))
+                                this_1.dataSource.executeQuery(this_1.getQuery(this_1.query).where(new Predicate(checkField, 'equal', value_2)))
                                     .then(function (e) {
                                     if (e.result.length > 0) {
                                         _this.addItem(e.result, listLength_2);

package/styles/list-box/_material3-dark-definition.scss

@@ -2,6 +2,9 @@
 @forward 'ej2-base/styles/definition/material3-dark';
 
 //layout variables
+$list-header-bg-color: $transparent !default;
+$list-header-text-color: rgba($content-text-color-alt1) !default;
+$list-header-icon-color: rgba($icon-color) !default;
 $listbox-font-family: $font-family !default;
 $listbox-icon-margin-right: 16px !default;
 $listbox-icon-line-height: 34px !default;
@@ -111,8 +114,8 @@ $listbox-header-border: rgba($border-light) !default;
 $checkmark-bgcolor: rgba($primary) !default;
 $checkmark-border-color: transparent !default;
 $checkmark-color: rgba($primary-text-color) !default;
-$listbox-groupheader-text-color: rgba($content-text-color-alt1) !default;
-$listbox-groupheader-bg: $content-bg-color-alt2 !default;
+$listbox-groupheader-text-color: $list-header-text-color !default;
+$listbox-groupheader-bg: $list-header-bg-color !default;
 $listbox-groupheader-border: rgba($content-text-color-alt1) !default;
 $listbox-groupheader-icon: rgba($icon-color) !default;
 $listbox-template-multiline-header-color: rgba($content-text-color) !default;

package/styles/list-box/_material3-definition.scss

@@ -2,6 +2,9 @@
 @forward 'ej2-base/styles/definition/material3';
 
 //layout variables
+$list-header-bg-color: $transparent !default;
+$list-header-text-color: rgba($content-text-color-alt1) !default;
+$list-header-icon-color: rgba($icon-color) !default;
 $listbox-font-family: $font-family !default;
 $listbox-icon-margin-right: 16px !default;
 $listbox-icon-line-height: 34px !default;
@@ -111,8 +114,8 @@ $listbox-header-border: rgba($border-light) !default;
 $checkmark-bgcolor: rgba($primary) !default;
 $checkmark-border-color: transparent !default;
 $checkmark-color: rgba($primary-text-color) !default;
-$listbox-groupheader-text-color: rgba($content-text-color-alt1) !default;
-$listbox-groupheader-bg: $content-bg-color-alt2 !default;
+$listbox-groupheader-text-color: $list-header-text-color !default;
+$listbox-groupheader-bg: $list-header-bg-color !default;
 $listbox-groupheader-border: rgba($content-text-color-alt1) !default;
 $listbox-groupheader-icon: rgba($icon-color) !default;
 $listbox-template-multiline-header-color: rgba($content-text-color) !default;

package/styles/list-box/material3-dark.css

@@ -838,7 +838,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;

package/styles/list-box/material3.css

@@ -844,7 +844,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;

package/styles/material3-dark-lite.css

@@ -5628,7 +5628,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;

package/styles/material3-dark.css

@@ -7632,7 +7632,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;

package/styles/material3-lite.css

@@ -5568,7 +5568,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;

package/styles/material3.css

@@ -7582,7 +7582,7 @@ ejs-listbox {
 .e-listbox-wrapper .e-list-group-item,
 .e-listbox-container .e-list-group-item,
 .e-listboxtool-wrapper .e-list-group-item {
-  background-color: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.08), rgba(var(--color-sf-primary), 0.08)), rgba(var(--color-sf-surface));
+  background-color: transparent;
   border-color: rgba(var(--color-sf-outline-variant));
   color: rgba(var(--color-sf-on-surface-variant));
   font-size: 12px;