@syncfusion/ej2-dropdowns 30.2.5 → 31.1.17

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 30.2.5
+*  version : 31.1.17
 *  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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "30.2.5",
+  "version": "31.1.17",
   "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": "~30.2.4",
-    "@syncfusion/ej2-data": "~30.2.4",
-    "@syncfusion/ej2-inputs": "~30.2.4",
-    "@syncfusion/ej2-lists": "~30.2.4",
-    "@syncfusion/ej2-navigations": "~30.2.5",
-    "@syncfusion/ej2-notifications": "~30.2.4",
-    "@syncfusion/ej2-popups": "~30.2.4"
+    "@syncfusion/ej2-base": "~31.1.17",
+    "@syncfusion/ej2-data": "~31.1.17",
+    "@syncfusion/ej2-inputs": "~31.1.17",
+    "@syncfusion/ej2-lists": "~31.1.17",
+    "@syncfusion/ej2-navigations": "~31.1.17",
+    "@syncfusion/ej2-notifications": "~31.1.17",
+    "@syncfusion/ej2-popups": "~31.1.17"
   },
   "devDependencies": {},
   "keywords": [

package/src/combo-box/combo-box.js

@@ -202,13 +202,16 @@ var ComboBox = /** @class */ (function (_super) {
                 if (this.dataSource instanceof DataManager) {
                     this.dataSource.executeQuery(new Query().where(new Predicate(fields, 'equal', currentValue_1)))
                         .then(function (e) {
-                        if (e.result.length > 0) {
+                        if (e && e.result && e.result.length > 0) {
                             _this.itemData = e.result[0];
                             var dataItem = _this.getItemData();
                             var value = _this.allowObjectBinding ?
-                                _this.getDataByValue(dataItem.value) : dataItem.value;
-                            if ((_this.value === dataItem.value && _this.text !== dataItem.text.toString()) ||
-                                (_this.value !== dataItem.value && _this.text === dataItem.text.toString())) {
+                                _this.itemData : dataItem.value;
+                            var valueFieldValue = _this.allowObjectBinding &&
+                                !isNullOrUndefined(_this.value) ? getValue((_this.fields.value) ?
+                                _this.fields.value : '', _this.value) : _this.value;
+                            if ((valueFieldValue === dataItem.value && _this.text !== dataItem.text.toString()) ||
+                                (valueFieldValue !== dataItem.value && _this.text === dataItem.text.toString())) {
                                 _this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });
                             }
                         }
@@ -258,7 +261,7 @@ var ComboBox = /** @class */ (function (_super) {
                 this.customValue();
             }
         }
-        else {
+        else if (!isNullOrUndefined(this.activeIndex) && !isNullOrUndefined(this.liCollections[this.activeIndex])) {
             this.setSelection(this.liCollections[this.activeIndex], null);
         }
         this.setHiddenValue();

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

@@ -544,11 +544,13 @@ var DropDownBase = /** @class */ (function (_super) {
             else {
                 item = this.typeOfData(this.listData);
             }
-            if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number' ||
+            if (!isNullOrUndefined(item.item) &&
+                typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'number' ||
                 item.typeof === 'number') {
                 return parseFloat(value);
             }
-            if (typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean' ||
+            if (!isNullOrUndefined(item.item) &&
+                typeof getValue((this.fields.value ? this.fields.value : 'value'), item.item) === 'boolean' ||
                 item.typeof === 'boolean') {
                 return ((value === 'true') || ('' + value === 'true'));
             }
@@ -1441,7 +1443,7 @@ var DropDownBase = /** @class */ (function (_super) {
         this.renderGroupTemplate(this.fixedHeaderElement);
     };
     DropDownBase.prototype.updateGroupFixedHeader = function (element, target) {
-        if (this.fixedHeaderElement) {
+        if (this.fixedHeaderElement && this.list && this.list.parentElement) {
             if (!isNullOrUndefined(element.innerHTML)) {
                 if (this.groupTemplate && this.isAngular && this.getModuleName() === 'multiselect') {
                     this.updateFixedGroupTemplateHader(element);
@@ -2191,7 +2193,13 @@ var DropDownBase = /** @class */ (function (_super) {
      */
     DropDownBase.prototype.destroy = function () {
         if (document) {
-            EventHandler.remove(document, 'scroll', this.updateGroupFixedHeader);
+            if (this.fields && this.fields.groupBy) {
+                var elements = this.getScrollableParent();
+                for (var i = 0; i < elements.length; i++) {
+                    var ele = elements[i];
+                    EventHandler.remove(ele, 'scroll', this.updateGroupFixedHeader);
+                }
+            }
             if (document.body.contains(this.list)) {
                 EventHandler.remove(this.list, 'scroll', this.setFloatingHeader);
                 if (!isNullOrUndefined(this.rippleFun)) {

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

@@ -30,6 +30,11 @@ export interface ChangeEventArgs extends SelectEventArgs {
      * Specifies the original event arguments.
      */
     event: MouseEvent | KeyboardEvent | TouchEvent;
+    /**
+     * Illustrates whether the current action needs to be prevented or not.
+
+     */
+    cancel?: boolean;
 }
 export interface GeneratedData {
     [key: string]: Object;
@@ -70,7 +75,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     private popupObj;
     private backIconElement;
     private clearIconElement;
-    private containerStyle;
     protected previousValue: string | number | boolean | object;
     protected activeIndex: number;
     protected filterInput: HTMLInputElement;

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

@@ -2573,6 +2573,13 @@ var DropDownList = /** @class */ (function (_super) {
         }
         else {
             this.removeFocus();
+            if (this.allowFiltering && this.actionCompleteData && this.actionCompleteData.ulElement &&
+                this.dataSource instanceof DataManager) {
+                var focus_1 = this.actionCompleteData.ulElement.querySelector('.e-item-focus');
+                if (focus_1) {
+                    removeClass(focus_1, dropDownListClasses.focus);
+                }
+            }
             this.list.querySelector('.' + dropDownBaseClasses.li).classList.add(dropDownListClasses.focus);
         }
     };

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

@@ -710,6 +710,10 @@ var DropDownTree = /** @class */ (function (_super) {
     };
     /* Handles touch events specifically for iOS devices */
     DropDownTree.prototype.handleIosTouch = function (e) {
+        var target = e.target;
+        if (target && target.classList.contains('e-clear-icon')) {
+            return;
+        }
         e.preventDefault();
         this.dropDownClick(e);
     };
@@ -1958,11 +1962,15 @@ var DropDownTree = /** @class */ (function (_super) {
         }
     };
     DropDownTree.prototype.restoreFilterSelection = function () {
+        if (this.treeObj.checkedNodes) {
+            this.treeObj.checkedNodes = [];
+        }
+        var nodeIds = Array.isArray(this.value) ? this.value : [];
         if (this.showCheckBox) {
-            this.treeObj.checkedNodes = this.value ? this.value : [];
+            this.treeObj.checkedNodes = nodeIds;
         }
         else {
-            this.treeObj.selectedNodes = this.value ? this.value : [];
+            this.treeObj.selectedNodes = nodeIds;
         }
     };
     /* To set cssclass for the dropdowntree */
@@ -2490,12 +2498,16 @@ var DropDownTree = /** @class */ (function (_super) {
         if (!this.valueTemplate) {
             return null;
         }
-        if (this.valueTemplateContainer) {
+        if (this.isReact && !isNOU(this.valueTemplateContainer)) {
+            detach(this.valueTemplateContainer);
+            this.valueTemplateContainer = null;
+        }
+        else if (this.valueTemplateContainer) {
             while (this.valueTemplateContainer.firstChild) {
                 this.valueTemplateContainer.removeChild(this.valueTemplateContainer.firstChild);
             }
         }
-        else {
+        if (isNOU(this.valueTemplateContainer)) {
             this.valueTemplateContainer = this.createElement('span', { className: OVERFLOW_VIEW + ' ' + SHOW_TEXT + ' ' + 'e-input-value' + ' ' + HIDEICON });
         }
         this.inputWrapper.insertBefore(this.valueTemplateContainer, this.inputEle);

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

@@ -996,7 +996,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.dataUpdater = function (dataSource, query, fields) {
         this.isDataFetched = false;
         var isNoData = this.list.classList.contains(dropDownBaseClasses.noData);
-        if (this.targetElement().trim() === '') {
+        if (this.targetElement().trim() === '' && (!this.allowCustomValue || this.mode === 'CheckBox' || this.targetElement() === '')) {
             var list = this.enableVirtualization ? this.list.cloneNode(true) : this.mainList.cloneNode ?
                 this.mainList.cloneNode(true) : this.mainList;
             if (this.backCommand || (this.enableVirtualization && this.mode === 'CheckBox' && this.value && this.value.length > 0)) {
@@ -3207,7 +3207,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             var ulElement = _this.list.querySelector('ul');
                             if (ulElement) {
                                 if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
-                                    _this.targetElement().trim() !== '')) {
+                                    (_this.targetElement().trim() !== '' || (_this.targetElement() !== '' && _this.allowCustomValue)))) {
                                     _this.mainList = ulElement.cloneNode ? ulElement.cloneNode(true) : ulElement;
                                 }
                             }
@@ -3215,7 +3215,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         }
                         _this.popupObj.wireScrollEvents();
                         if (!(_this.mode !== 'CheckBox' && (_this.allowFiltering || _this.allowCustomValue) &&
-                            _this.targetElement().trim() !== '') && !_this.enableVirtualization) {
+                            (_this.targetElement().trim() !== '' || (_this.targetElement() !== '' && _this.allowCustomValue))) && !_this.enableVirtualization) {
                             _this.loadTemplate();
                             if (_this.enableVirtualization && _this.mode === 'CheckBox') {
                                 _this.UpdateSkeleton();

package/styles/auto-complete/bootstrap4.css

@@ -79,6 +79,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;

package/styles/bds-lite.css

@@ -1169,10 +1169,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 7px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bds.css

@@ -1402,10 +1402,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 7px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap-dark-lite.css

@@ -970,10 +970,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 10px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap-dark.css

@@ -1147,10 +1147,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 10px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap-lite.css

@@ -973,10 +973,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 10px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap.css

@@ -1150,10 +1150,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 10px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap4-lite.css

@@ -432,6 +432,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -1006,10 +1014,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 8px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap4.css

@@ -511,6 +511,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
@@ -1201,10 +1209,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 8px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }
@@ -2763,13 +2770,13 @@ ejs-multiselect {
 }
 
 .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before {
-  font-size: 12px;
+  font-size: 18px;
   top: 9px;
 }
 
 .e-bigger .e-multi-select-wrapper .e-chips .e-chips-close::before,
 .e-bigger.e-multi-select-wrapper .e-chips .e-chips-close::before {
-  top: 1px;
+  top: 5px;
 }
 
 .e-small.e-bigger .e-multi-select-wrapper .e-close-hooker::before {

package/styles/bootstrap5-dark-lite.css

@@ -1025,10 +1025,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 8px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap5-dark.css

@@ -1212,10 +1212,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 8px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap5-lite.css

@@ -1025,10 +1025,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 8px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap5.3-lite.css

@@ -1012,10 +1012,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 8px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/bootstrap5.3.css

@@ -1199,10 +1199,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 8px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }
@@ -1256,7 +1255,7 @@ ejs-dropdownlist {
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-chip.e-show-dd-icon .e-clear-icon,
 .e-ddt.e-bigger.e-float-input.e-control-wrapper.e-show-text.e-show-dd-icon .e-clear-icon {
   bottom: auto;
-  right: 36px;
+  right: 30px;
 }
 .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-input-group.e-control-wrapper.e-show-text .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-chip .e-ddt-icon, .e-bigger .e-ddt.e-float-input.e-control-wrapper.e-show-text .e-ddt-icon,
 .e-ddt.e-bigger.e-input-group.e-control-wrapper.e-show-chip .e-ddt-icon,

package/styles/bootstrap5.css

@@ -1212,10 +1212,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 8px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/combo-box/bootstrap4.css

@@ -79,6 +79,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;

package/styles/drop-down-base/_fluent2-definition.scss

@@ -17,8 +17,8 @@ $ddl-list-header-padding-left: 12px !default;
 $ddl-list-header-small-padding-left: 8px !default;
 $ddl-list-header-bigger-small-padding-left: 14px !default;
 $ddl-list-header-bigger-padding-left: 0 !default;
-$ddl-list-text-indent: 12px !default;
-$ddl-bigger-text-indent: 16px !default;
+$ddl-list-text-indent: 8px !default;
+$ddl-bigger-text-indent: 12px !default;
 $ddl-list-rtl-padding-right: 0 !default;
 $ddl-list-padding-right: 16px !default;
 $ddl-list-rtl-padding-left: 16px !default;

package/styles/drop-down-base/fluent2.css

@@ -181,7 +181,7 @@
   line-height: 32px;
   min-height: 32px;
   padding-right: 16px;
-  text-indent: 12px;
+  text-indent: 8px;
   background-color: var(--color-sf-flyout-bg-color);
   margin-bottom: 2px;
 }
@@ -308,7 +308,7 @@
   border-color: var(--color-sf-border-light);
   color: var(--color-sf-content-text-color);
   font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
-  text-indent: 12px;
+  text-indent: 8px;
   font-size: 14px;
   padding-right: 16px;
 }
@@ -341,14 +341,14 @@
 .e-bigger .e-dropdownbase .e-list-item,
 .e-dropdownbase.e-bigger .e-list-item {
   line-height: 40px;
-  text-indent: 16px;
+  text-indent: 12px;
 }
 
 .e-bigger .e-dropdownbase .e-list-group-item, .e-bigger .e-dropdownbase .e-fixed-head,
 .e-dropdownbase.e-bigger .e-list-group-item,
 .e-dropdownbase.e-bigger .e-fixed-head {
   line-height: 40px;
-  text-indent: 16px;
+  text-indent: 12px;
 }
 
 .e-bigger .e-dropdownbase .e-list-item .e-list-icon,

package/styles/drop-down-list/_bootstrap4-definition.scss

@@ -115,6 +115,14 @@ $ddl-bigger-small-list-font-size: 14px !default;
     font-size: 12px;
   }
 
+  .e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+  .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+  .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+  .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+    background: transparent;
+    color: $ddl-list-icon-color;
+  }
+
   .e-small .e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon,
   .e-small.e-input-group .e-control#{&}.e-dropdownlist~.e-ddl-icon {
     font-size: 10px;

package/styles/drop-down-list/bootstrap4.css

@@ -135,6 +135,14 @@
   font-size: 12px;
 }
 
+.e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
+.e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
+  background: transparent;
+  color: #495057;
+}
+
 .e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
 .e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;

package/styles/drop-down-tree/_bigger.scss

@@ -66,12 +66,18 @@
           @else if $ddt-skin-name == 'bootstrap4' {
             right: 33px;
           }
-          @else if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'bootstrap5.3' or $ddt-skin-name == 'FluentUI' or $ddt-skin-name == 'tailwind3' {
+          @else if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'FluentUI' or $ddt-skin-name == 'tailwind3' {
             @include icon-style(auto, 36px);
           }
-          @else if $ddt-skin-name != 'Material3' {
+          @else if $ddt-skin-name != 'Material3' and $ddt-skin-name != 'bootstrap5.3' and $ddt-skin-name != 'fluent2' {
             right: $ddt-dd-icon-bigger-width;
           }
+          @else if $ddt-skin-name == 'fluent2' {
+            right: 30px;
+          }
+          @else if $ddt-skin-name == 'bootstrap5.3' {
+            @include icon-style(auto, 30px);
+          }
           @if ($ddt-skin-name =='tailwind3') {
             bottom: 0;
             right: 24px;

package/styles/drop-down-tree/_layout.scss

@@ -934,9 +934,26 @@
         }
       }
     }
+    
     &.e-float-input {
-      .e-float-text.e-label-top {
-        top: 15px;
+      @if $ddt-skin-name !='Material3' and $ddt-skin-name !='material' and $ddt-skin-name !='material-dark' and $ddt-skin-name !='fluent2' {
+        &.e-control-wrapper.e-input-group {
+          .e-float-text.e-label-top {
+            top: 15px;
+          }
+        }
+      }
+    }
+    
+    &.e-popup {
+      .e-treeview {
+        .e-list-item {
+          .e-ul {
+            @if $ddt-skin-name == 'fluent2' {
+              padding: 0 0 0 14px;
+            }
+          }
+        }
       }
     }
   }

package/styles/drop-down-tree/bds.css

@@ -540,10 +540,9 @@
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 7px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }

package/styles/drop-down-tree/bootstrap-dark.css

@@ -360,10 +360,9 @@
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 10px;
 }
-.e-ddt.e-float-input .e-float-text.e-label-top {
+.e-ddt.e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top {
   top: 15px;
 }
-
 .e-ddt-icon-hide {
   display: none;
 }