@syncfusion/ej2-dropdowns 27.1.48 → 27.1.50

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.1.48
+*  version : 27.1.50
 *  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@18.66.23",
+  "_id": "@syncfusion/ej2-dropdowns@27.1.48",
   "_inBundle": false,
-  "_integrity": "sha512-HJgyDrAeM/vGegwcZ+WwjVVhrTzq1f2KdlYK6ui3Qa+rv1iGdlj7q4i6rplW7CafrMJb9Ky3k2BRFcAsC+V2CQ==",
+  "_integrity": "sha512-yXBzRSQUFyq8m1WpqdZO09nFfx7e2oQ+xMIE4ZMaOFUTSKNfhSvhFZyy5ZKbTtG5OF3K8yS+Gwma9XWJqCaE0g==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -36,8 +36,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-18.66.23.tgz",
-  "_shasum": "8b7747dcc684bcc3d1de2c931a0a1acbdcfa7f89",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-27.1.48.tgz",
+  "_shasum": "3a2629ba43646e25b3720200f1b1c83f028ba800",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
@@ -45,14 +45,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.1.48",
-    "@syncfusion/ej2-data": "~27.1.48",
-    "@syncfusion/ej2-inputs": "~27.1.48",
-    "@syncfusion/ej2-lists": "~27.1.48",
-    "@syncfusion/ej2-navigations": "~27.1.48",
-    "@syncfusion/ej2-notifications": "~27.1.48",
-    "@syncfusion/ej2-popups": "~27.1.48",
-    "markdown-spellcheck": "^1.3.1"
+    "@syncfusion/ej2-base": "~27.1.50",
+    "@syncfusion/ej2-data": "~27.1.50",
+    "@syncfusion/ej2-inputs": "~27.1.50",
+    "@syncfusion/ej2-lists": "~27.1.50",
+    "@syncfusion/ej2-navigations": "~27.1.50",
+    "@syncfusion/ej2-notifications": "~27.1.50",
+    "@syncfusion/ej2-popups": "~27.1.50"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -77,7 +76,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "27.1.48",
+  "version": "27.1.50",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -291,6 +291,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
         [key: string]: Object;
     }[] | string[] | number[] | boolean[];
     protected firstItem: string | number | boolean | object;
+    protected preventDefActionFilter: boolean;
     protected virtualListInfo: VirtualInfo;
     protected viewPortInfo: VirtualInfo;
     protected selectedValueInfo: VirtualInfo;

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

@@ -1098,7 +1098,7 @@ var DropDownBase = /** @class */ (function (_super) {
                 }
                 addClass([this.list], dropDownBaseClasses.grouping);
             }
-            else {
+            else if (this.getModuleName() !== 'listbox' || (this.getModuleName() === 'listbox' && !this.preventDefActionFilter)) {
                 dataSource = this.getSortedDataSource(dataSource);
             }
             var options = this.listOption(dataSource, fields);
@@ -1704,7 +1704,6 @@ var DropDownBase = /** @class */ (function (_super) {
             }
             if (this.getModuleName() === 'listbox') {
                 this.updateActionCompleteData(li, item, isListboxEmpty ? null : index + i);
-                isListboxEmpty = true;
             }
             else {
                 this.updateActionCompleteData(li, item, index);

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

@@ -1728,7 +1728,10 @@ var DropDownList = /** @class */ (function (_super) {
             }
             else {
                 if (!isNullOrUndefined(this.hiddenElement)) {
-                    this.hiddenElement.innerHTML = '<option selected>' + this.text + '</option>';
+                    var option = document.createElement('option');
+                    option.text = this.text;
+                    option.setAttribute('selected', '');
+                    this.hiddenElement.appendChild(option);
                     var selectedElement = this.hiddenElement.querySelector('option');
                     selectedElement.setAttribute('value', value.toString());
                 }

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

@@ -1724,7 +1724,7 @@ var DropDownTree = /** @class */ (function (_super) {
                         addClass([focusedElement], ['e-node-focus']);
                     }
                 }
-                if (_this.treeObj.checkedNodes.length > 0) {
+                if (_this.treeObj.checkedNodes.length > 0 && !_this.isFilterRestore) {
                     var nodes = _this.treeObj.element.querySelectorAll('li');
                     var checkedNodes = _this.treeObj.element.querySelectorAll('li[aria-checked=true]');
                     if ((checkedNodes.length === nodes.length || _this.checkSelectAll) && _this.checkBoxElement) {

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

@@ -434,7 +434,9 @@ var ListBox = /** @class */ (function (_super) {
                 }
                 filterElem.selectionStart = txtLength;
                 filterElem.selectionEnd = txtLength;
-                filterElem.focus();
+                if (filterElem.value !== '') {
+                    filterElem.focus();
+                }
             }
         }
         if (this.toolbarSettings.items.length && this.scope && this.scope.indexOf('#') > -1 && !isNullOrUndefined(e)) {
@@ -886,33 +888,24 @@ var ListBox = /** @class */ (function (_super) {
             items = (items instanceof Array ? items : [items]);
             var fields = this.fields;
             var dataValue = void 0;
-            var objValue = void 0;
+            var objValue = {};
             var dupData = [];
-            var itemIdx = void 0;
             extend(dupData, [], this.jsonData);
             var removeIdxes = [];
             var removeLiIdxes = [];
+            for (var i = 0; i < dupData.length; i++) {
+                var value = (dupData[i] instanceof Object) ? dupData[i][fields.value] :
+                    dupData[i].toString();
+                objValue[value] = i;
+            }
             for (var j = 0; j < items.length; j++) {
-                if (items[j] instanceof Object) {
-                    dataValue = getValue(fields.value, items[j]);
-                }
-                else {
-                    dataValue = items[j].toString();
-                }
-                for (var i = 0, len = dupData.length; i < len; i++) {
-                    if (dupData[i] instanceof Object) {
-                        objValue = getValue(fields.value, dupData[i]);
-                    }
-                    else {
-                        objValue = dupData[i].toString();
-                    }
-                    if (objValue === dataValue) {
-                        itemIdx = this.getIndexByValue(dataValue);
-                        var idx = itemIdx === i ? itemIdx : i;
-                        liCollections.push(liElement[idx]);
-                        removeIdxes.push(idx);
-                        removeLiIdxes.push(idx);
-                    }
+                dataValue = (items[j] instanceof Object) ? items[j][fields.value] :
+                    items[j].toString();
+                if (Object.prototype.hasOwnProperty.call(objValue, dataValue)) {
+                    var idx = objValue[dataValue];
+                    liCollections.push(liElement[idx]);
+                    removeIdxes.push(idx);
+                    removeLiIdxes.push(idx);
                 }
             }
             var validRemoveIdxes = removeIdxes.sort(function (a, b) { return b - a; });
@@ -1746,7 +1739,7 @@ var ListBox = /** @class */ (function (_super) {
         }
         flistboxarray = newFlistboxArray;
         moveTo(fListBox.ulElement, tListBox.ulElement, flistboxarray, index);
-        this.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
+        fListBox.trigger('actionComplete', { items: tempItems, eventName: this.toolbarAction });
         if (isKey) {
             this.list.focus();
         }
@@ -1795,8 +1788,8 @@ var ListBox = /** @class */ (function (_super) {
             fListBox.listData = fListBox.sortedData = fListBox.jsonData = tempData;
         }
         else if (fListBox.allowFiltering) {
+            var disabledData_1 = [];
             if (tempLiColl.length > 0) {
-                var disabledData_1 = [];
                 for (var i = 0; i < tempLiColl.length; i++) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     disabledData_1.push(this.getDataByValue(tempLiColl[i].getAttribute('data-value')));
@@ -1813,7 +1806,13 @@ var ListBox = /** @class */ (function (_super) {
                     }
                 }
             }
-            fListBox.listData = fListBox.sortedData = [];
+            if (tempLiColl.length > 0) {
+                fListBox.listData = disabledData_1;
+                fListBox.sortedData = [];
+            }
+            else {
+                fListBox.listData = fListBox.sortedData = [];
+            }
         }
         if (isRefresh) {
             var sourceElem = tListBox.renderItems(listData, tListBox.fields);
@@ -2037,7 +2036,9 @@ var ListBox = /** @class */ (function (_super) {
                                 }
                                 _this.isFiltered = true;
                                 _this.remoteFilterAction = true;
+                                _this.preventDefActionFilter = eventArgsData_1.preventDefaultAction;
                                 _this.dataUpdater(dataSource, query, fields);
+                                _this.preventDefActionFilter = false;
                             },
                             event: e,
                             cancel: false
@@ -2047,6 +2048,7 @@ var ListBox = /** @class */ (function (_super) {
                             if (args.cancel || (_this.filterInput.value !== '' && _this.isFiltered)) {
                                 return;
                             }
+                            _this.preventDefActionFilter = false;
                             if (!args.cancel && !_this.isCustomFiltering && !args.preventDefaultAction) {
                                 _this.inputString = _this.filterInput.value;
                                 _this.filteringAction(_this.jsonData, new Query(), _this.fields);
@@ -2457,7 +2459,9 @@ var ListBox = /** @class */ (function (_super) {
                         this.initDraggable();
                     }
                     else {
-                        getComponent(this.ulElement, 'sortable').destroy();
+                        if (this.ulElement.classList.contains('e-sortable')) {
+                            getComponent(this.ulElement, 'sortable').destroy();
+                        }
                     }
                     break;
                 case 'allowFiltering':

package/styles/bootstrap-dark-lite.css

@@ -620,6 +620,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 /* stylelint-disable */
@@ -2011,8 +2012,10 @@ ejs-multiselect {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/bootstrap-dark.css

@@ -695,6 +695,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {
@@ -2569,8 +2570,10 @@ ejs-multiselect {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/bootstrap-lite.css

@@ -620,6 +620,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 /*! TreeView's bootstrap theme wise override definitions and variables */
@@ -2010,8 +2011,10 @@ ejs-multiselect {
 .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
   width: 86% !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/bootstrap.css

@@ -695,6 +695,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {
@@ -2568,8 +2569,10 @@ ejs-multiselect {
 .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
   width: 86% !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/bootstrap4-lite.css

@@ -2115,8 +2115,10 @@ ejs-multiselect {
 .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
   width: 86% !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/bootstrap4.css

@@ -2798,8 +2798,10 @@ ejs-multiselect {
 .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
   width: 86% !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/bootstrap5-dark-lite.css

@@ -1001,6 +1001,9 @@ ejs-dropdownlist {
   background: transparent;
   color: #adb5bd;
 }
+.e-ddt.e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-clear-icon, .e-ddt.e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {
+  background: transparent;
+}
 .e-ddt.e-popup {
   background: #343a40;
   border-color: #444c54;
@@ -2084,8 +2087,10 @@ ejs-multiselect {
 .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
   width: 84% !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/bootstrap5-dark.css

@@ -1188,6 +1188,9 @@ ejs-dropdownlist {
   background: transparent;
   color: #adb5bd;
 }
+.e-ddt.e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-clear-icon, .e-ddt.e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {
+  background: transparent;
+}
 .e-ddt.e-popup {
   background: #343a40;
   border-color: #444c54;
@@ -2738,8 +2741,10 @@ ejs-multiselect {
 .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
   width: 84% !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/bootstrap5-lite.css

@@ -1001,6 +1001,9 @@ ejs-dropdownlist {
   background: transparent;
   color: #6c757d;
 }
+.e-ddt.e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-clear-icon, .e-ddt.e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {
+  background: transparent;
+}
 .e-ddt.e-popup {
   background: #fff;
   border-color: #dee2e6;
@@ -2084,8 +2087,10 @@ ejs-multiselect {
 .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
   width: 84% !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/bootstrap5.3-lite.css

@@ -994,6 +994,9 @@ ejs-dropdownlist {
   background: transparent;
   color: var(--color-sf-icon-color);
 }
+.e-ddt.e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-clear-icon, .e-ddt.e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {
+  background: transparent;
+}
 .e-ddt.e-popup {
   background: var(--color-sf-flyout-bg-color);
   border-color: var(--color-sf-border-light);
@@ -2078,8 +2081,10 @@ ejs-multiselect {
 .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
   width: 84% !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/bootstrap5.3.css

@@ -1181,6 +1181,9 @@ ejs-dropdownlist {
   background: transparent;
   color: var(--color-sf-icon-color);
 }
+.e-ddt.e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-clear-icon, .e-ddt.e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {
+  background: transparent;
+}
 .e-ddt.e-popup {
   background: var(--color-sf-flyout-bg-color);
   border-color: var(--color-sf-border-light);
@@ -2674,8 +2677,10 @@ ejs-multiselect {
 .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
   width: 84% !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/bootstrap5.css

@@ -1188,6 +1188,9 @@ ejs-dropdownlist {
   background: transparent;
   color: #6c757d;
 }
+.e-ddt.e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-clear-icon, .e-ddt.e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {
+  background: transparent;
+}
 .e-ddt.e-popup {
   background: #fff;
   border-color: #dee2e6;
@@ -2738,8 +2741,10 @@ ejs-multiselect {
 .e-listboxtool-wrapper.e-listboxtool-container .e-list-wrap {
   width: 84% !important; /* stylelint-disable-line declaration-no-important */
 }
-.e-listbox-wrapper:focus,
+.e-listbox-wrapper .e-list-wrap:focus-visible, .e-listbox-wrapper:focus,
+.e-listbox-container .e-list-wrap:focus-visible,
 .e-listbox-container:focus,
+.e-listboxtool-wrapper .e-list-wrap:focus-visible,
 .e-listboxtool-wrapper:focus {
   outline: none;
 }

package/styles/drop-down-list/_theme.scss

@@ -10,8 +10,6 @@
 
   .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
     border-color: transparent;
-    @if $skin-name == 'bootstrap4' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'highcontrast' {
-      background: none;
-    }
+    background: none;
   }
 }

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

@@ -327,6 +327,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

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

@@ -327,6 +327,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

package/styles/drop-down-list/fabric-dark.css

@@ -303,6 +303,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

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

@@ -303,6 +303,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

package/styles/drop-down-list/fluent-dark.css

@@ -368,6 +368,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

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

@@ -368,6 +368,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

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

@@ -549,6 +549,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

package/styles/drop-down-list/highcontrast-light.css

@@ -324,6 +324,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

package/styles/drop-down-list/material-dark.css

@@ -366,6 +366,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

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

@@ -389,6 +389,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

package/styles/drop-down-list/material3-dark.css

@@ -404,6 +404,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

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

@@ -406,6 +406,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

package/styles/drop-down-list/tailwind-dark.css

@@ -344,6 +344,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

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

@@ -344,6 +344,7 @@ ejs-dropdownlist {
 
 .e-ddl.e-popup .e-filter-parent .e-input-group input.e-input-filter {
   border-color: transparent;
+  background: none;
 }
 
 .e-bigger .e-input-group.e-ddl .e-input-filter, .e-bigger .e-input-group.e-ddl .e-input-filter:focus {

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

@@ -97,6 +97,11 @@
             color: $icon-color;
           }
         }
+        ~ span.e-clear-icon {
+          @if $ddt-skin-name == 'bootstrap5' or $ddt-skin-name == 'bootstrap5.3' {
+            background: transparent;
+          }
+        }
       }
 
       &.e-disabled {

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

@@ -386,6 +386,9 @@
   background: transparent;
   color: #adb5bd;
 }
+.e-ddt.e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-clear-icon, .e-ddt.e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {
+  background: transparent;
+}
 .e-ddt.e-popup {
   background: #343a40;
   border-color: #444c54;