@syncfusion/ej2-dropdowns 33.2.5 → 33.2.7

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.2.5
+*  version : 33.2.7
 *  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": "33.2.5",
+  "version": "33.2.7",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -12,9 +12,9 @@
     "@syncfusion/ej2-data": "~33.2.5",
     "@syncfusion/ej2-inputs": "~33.2.5",
     "@syncfusion/ej2-lists": "~33.2.3",
-    "@syncfusion/ej2-navigations": "~33.2.4",
-    "@syncfusion/ej2-notifications": "~33.2.3",
-    "@syncfusion/ej2-popups": "~33.2.5"
+    "@syncfusion/ej2-navigations": "~33.2.7",
+    "@syncfusion/ej2-notifications": "~33.2.7",
+    "@syncfusion/ej2-popups": "~33.2.7"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -2251,7 +2251,8 @@ var DropDownBase = /** @class */ (function (_super) {
             else {
                 for (var _b = 0, _c = this.listData; _b < _c.length; _b++) {
                     var item = _c[_b];
-                    if (!isNullOrUndefined(item) && getValue((this.fields.value ? this.fields.value : 'value'), item) === value) {
+                    if (!isNullOrUndefined(item) && (getValue((this.fields.value ? this.fields.value : 'value'), item) === value
+                        || this.getModuleName() === 'multiselect' && this.isVirtualizationEnabled && this.properties.allowCustomValue && getValue((this.fields.value ? this.fields.value : 'value'), item) === value.toString())) {
                         return item;
                     }
                 }

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

@@ -2467,7 +2467,7 @@ var DropDownList = /** @class */ (function (_super) {
             }
             else if (this.enableVirtualization && this.getModuleName() !== 'autocomplete' && !this.isFiltering()) {
                 var value = this.getItemData().value;
-                this.activeIndex = this.getIndexByValue(value);
+                this.activeIndex = !isNullOrUndefined(value) ? this.getIndexByValue(value) : this.activeIndex;
                 var element = this.findListElement(this.list, 'li', 'data-value', value);
                 this.selectedLI = element;
                 element = null;
@@ -3707,14 +3707,16 @@ var DropDownList = /** @class */ (function (_super) {
             if (this.enableVirtualization) {
                 this.listItemHeight = this.getListHeight();
                 this.getSkeletonCount();
+                this.skeletonCount = this.totalItemCount < (this.itemCount * 2) && ((!(this.dataSource instanceof DataManager)) ||
+                    ((this.dataSource instanceof DataManager) && (this.totalItemCount <= this.itemCount))) ? 0 : this.skeletonCount;
                 this.updateVirtualizationProperties(this.itemCount, this.allowFiltering);
-                if (this.index !== null) {
-                    this.activeIndex = this.index + this.skeletonCount;
-                }
             }
             this.initValue();
             this.selectedValueInfo = this.viewPortInfo;
             if (this.enableVirtualization) {
+                if (this.index !== null) {
+                    this.activeIndex = this.index + this.skeletonCount;
+                }
                 this.activeIndex = this.activeIndex + this.skeletonCount;
             }
         }

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

@@ -338,6 +338,7 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
     private isFromFilterChange;
     private valueTemplateContainer;
     private previousFilterText;
+    private fallbackValue;
     /**
      * Specifies the template that renders to the popup list content of the
      * Dropdown Tree component when the data fetch request from the remote server fails.

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

@@ -176,6 +176,7 @@ var DropDownTree = /** @class */ (function (_super) {
         // Specifies if the checkAll method has been called
         _this.isCheckAllCalled = false;
         _this.isFromFilterChange = false;
+        _this.fallbackValue = [];
         return _this;
     }
     /**
@@ -1444,6 +1445,10 @@ var DropDownTree = /** @class */ (function (_super) {
     };
     DropDownTree.prototype.setTreeValue = function () {
         if (this.value !== null && this.value.length !== 0) {
+            var dataReady = this.treeItems && this.treeItems.length > 0;
+            if (!dataReady && this.fallbackValue.length === 0) {
+                this.fallbackValue = this.value.slice();
+            }
             var data = void 0;
             if (this.showCheckBox || this.allowMultiSelection) {
                 for (var i = this.value.length - 1; i >= 0; i--) {
@@ -3097,6 +3102,7 @@ var DropDownTree = /** @class */ (function (_super) {
      * @private
      */
     DropDownTree.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var _this = this;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
@@ -3117,6 +3123,13 @@ var DropDownTree = /** @class */ (function (_super) {
                     break;
                 case 'fields':
                     this.setFields();
+                    setTimeout(function () {
+                        if (_this.value.length === 0 && _this.fallbackValue.length > 0) {
+                            _this.value = _this.fallbackValue;
+                            _this.updateValue(_this.fallbackValue);
+                            _this.fallbackValue = [];
+                        }
+                    }, 1);
                     break;
                 case 'readonly':
                     Input.setReadonly(newProp.readonly, this.inputEle);

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

@@ -161,7 +161,6 @@ var ListBox = /** @class */ (function (_super) {
         this.list.classList.add('e-wrapper');
         this.list.classList.add('e-lib');
         if (this.element.tagName === 'EJS-LISTBOX') {
-            this.element.setAttribute('tabindex', '0');
             if (this.initLoad) {
                 this.element.appendChild(this.list);
             }

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

@@ -646,7 +646,7 @@ var MultiSelect = /** @class */ (function (_super) {
         else {
             this.updateActionList(ulElement, list, e);
         }
-        if (this.dataSource instanceof DataManager && this.allowCustomValue && !this.isCustomRendered &&
+        if (this.dataSource instanceof DataManager && this.allowCustomValue && (!this.isCustomRendered || this.enableVirtualization) &&
             this.inputElement.value && this.inputElement.value !== '') {
             var query = new Query();
             query = this.allowFiltering ? query.where(this.fields.text, 'startswith', this.inputElement.value, this.ignoreCase, this.ignoreAccent) : query;
@@ -1173,7 +1173,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (this.enableVirtualization) {
                     this.virtualCustomData = dataItem_1;
                     var tempData = this.dataSource instanceof DataManager ?
-                        JSON.parse(JSON.stringify(this.listData)) : JSON.parse(JSON.stringify(this.dataSource));
+                        JSON.parse(JSON.stringify(this.mainData)) : JSON.parse(JSON.stringify(this.dataSource));
                     var totalData = [];
                     if (this.virtualCustomSelectData && this.virtualCustomSelectData.length > 0) {
                         totalData = tempData.concat(this.virtualCustomSelectData);
@@ -4101,7 +4101,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             this.allowCustomValue &&
                             ((!(this.dataSource instanceof DataManager)) ||
                                 (this.dataSource instanceof DataManager && isInitialVirtualData)))) {
-                        var indexItem = this.listData.length;
+                        var indexItem = this.dataSource instanceof DataManager ? this.totalItemCount : this.listData.length;
                         var newValue = {};
                         setValue(this.fields.text, value_2, newValue);
                         setValue(this.fields.value, value_2, newValue);
@@ -5597,6 +5597,10 @@ var MultiSelect = /** @class */ (function (_super) {
                     if (this.fields.disabled) {
                         this.removeDisabledItemsValue(this.value);
                     }
+                    if (this.enableVirtualization && !isNullOrUndefined(oldProp.value) && !isNullOrUndefined(newProp.value)
+                        && !this.validateValues(newProp.value, oldProp.value)) {
+                        return;
+                    }
                     this.updateVal(this.value, oldProp.value, 'value', this.enableVirtualization);
                     this.addValidInputClass();
                     if (!this.closePopupOnSelect && this.isPopupOpen()) {
@@ -6576,6 +6580,10 @@ var MultiSelect = /** @class */ (function (_super) {
                             }, 100);
                             _this.initStatus = true;
                         }
+                        else {
+                            _this.initialValueUpdate(_this.value, true, isInitialRender);
+                            _this.initialUpdate();
+                        }
                     });
                 }
                 else {

package/styles/bds-lite.css

@@ -1597,7 +1597,7 @@ ejs-dropdownlist {
           box-sizing: border-box;
   cursor: text;
   line-height: normal;
-  min-height: 28px;
+  min-height: 30px;
   padding: 0 32px 0 0;
   position: relative;
   -webkit-user-select: none;
@@ -2181,7 +2181,7 @@ ejs-multiselect {
 }
 
 .e-small .e-multi-select-wrapper {
-  min-height: 24px;
+  min-height: 26px;
 }
 
 .e-small .e-multi-select-wrapper.e-delimiter .e-searcher,

package/styles/bds.css

@@ -2081,7 +2081,7 @@ ejs-dropdownlist {
           box-sizing: border-box;
   cursor: text;
   line-height: normal;
-  min-height: 28px;
+  min-height: 30px;
   padding: 0 32px 0 0;
   position: relative;
   -webkit-user-select: none;
@@ -2665,7 +2665,7 @@ ejs-multiselect {
 }
 
 .e-small .e-multi-select-wrapper {
-  min-height: 24px;
+  min-height: 26px;
 }
 
 .e-small .e-multi-select-wrapper.e-delimiter .e-searcher,
@@ -3139,7 +3139,7 @@ ejs-multiselect {
 }
 
 .e-bigger .e-multi-select-wrapper {
-  min-height: 36px;
+  min-height: 40px;
 }
 
 .e-bigger .e-multi-select-wrapper .e-chips {
@@ -3297,7 +3297,7 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
-  min-height: 28px;
+  min-height: 34px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper input[type=text] {

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

@@ -34,8 +34,8 @@ $ddl-chip-collection-top: 0 !default;
 $ddl-input-height: 28px !default;
 $ddl-input-bigger-height: 36px !default;
 $ddl-input-mob-height: 30px !default;
-$ddl-control-height: 28px !default;
-$ddl-control-bigger-height: 36px !default;
+$ddl-control-height: 30px !default;
+$ddl-control-bigger-height: 40px !default;
 $ddl-delimviewheight: 28px !default;
 $ddl-delimviewheight-bigger: 36px !default;
 $ddl-closer-hooker-font: $text-lg !default;
@@ -190,7 +190,7 @@ $ddl-chip-small-font-size: $text-xs !default;
 $ddl-small-chip-close-square: $text-sm !default;
 $ddl-small-chip-close-width: $text-sm !default;
 $ddl-small-chip-close-font: $text-sm !default;
-$ddl-control-small-height: 24px !default;
+$ddl-control-small-height: 26px !default;
 $ddl-small-input-height: 24px !default;
 $ddl-delim-small-font-size: $text-xs !default;
 $ddl-small-closer-margin-top: -1.65em !default;
@@ -213,7 +213,7 @@ $ddl-bigger-small-chip-height: 26px !default;
 $ddl-bigger-small-chip-close-square: $text-lg !default;
 $ddl-bigger-small-chip-close-width: $text-lg !default;
 $ddl-bigger-small-chip-close-font: $text-lg !default;
-$ddl-control-bigger-small-height: 28px !default;
+$ddl-control-bigger-small-height: 34px !default;
 $ddl-bigger-small-input-height: 32px !default;
 $ddl-delim-bigger-small-font-size: $text-sm !default;
 $ddl-delimviewheight-bigger-small: 32px !default;

package/styles/multi-select/bds.css

@@ -348,7 +348,7 @@
           box-sizing: border-box;
   cursor: text;
   line-height: normal;
-  min-height: 28px;
+  min-height: 30px;
   padding: 0 32px 0 0;
   position: relative;
   -webkit-user-select: none;
@@ -932,7 +932,7 @@ ejs-multiselect {
 }
 
 .e-small .e-multi-select-wrapper {
-  min-height: 24px;
+  min-height: 26px;
 }
 
 .e-small .e-multi-select-wrapper.e-delimiter .e-searcher,
@@ -1406,7 +1406,7 @@ ejs-multiselect {
 }
 
 .e-bigger .e-multi-select-wrapper {
-  min-height: 36px;
+  min-height: 40px;
 }
 
 .e-bigger .e-multi-select-wrapper .e-chips {
@@ -1564,7 +1564,7 @@ ejs-multiselect {
 }
 
 .e-bigger.e-small .e-multi-select-wrapper {
-  min-height: 28px;
+  min-height: 34px;
 }
 
 .e-bigger.e-small .e-multi-select-wrapper input[type=text] {