@syncfusion/ej2-dropdowns 31.2.2 → 31.2.4

package/dist/global/index.d.ts

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

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

@@ -212,7 +212,9 @@ var ComboBox = /** @class */ (function (_super) {
                                 _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 });
+                                _this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value }, true);
+                                _this.setHiddenValue();
+                                Input.setValue(_this.text, _this.inputElement, _this.floatLabelType, _this.showClearButton);
                             }
                         }
                         else if (_this.allowCustom) {

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

@@ -757,6 +757,11 @@ var DropDownBase = /** @class */ (function (_super) {
                                 if (_this.isVirtualizationEnabled && (e.count !== 0 && e.count < (_this.itemCount * 2))) {
                                     if (newQuery) {
                                         for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                            if (_this.getModuleName() === 'multiselect' && _this.isCheckBoxSelection && (newQuery.queries[queryElements].e && (newQuery.queries[queryElements].e.operator === 'notequal' ||
+                                                newQuery.queries[queryElements].e.operator === 'equal' || newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.condition === 'and') && !_this.isCustomFiltering)) {
+                                                isReOrder = false;
+                                                break;
+                                            }
                                             if (newQuery.queries[queryElements].fn === 'onTake') {
                                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                                 newQuery.queries[queryElements].e.nos = e.count;
@@ -868,6 +873,11 @@ var DropDownBase = /** @class */ (function (_super) {
                                 listItems.count < (_this.itemCount * 2)) && !_this.appendUncheckList) {
                                 if (newQuery) {
                                     for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                                        if (_this.getModuleName() === 'multiselect' && _this.isCheckBoxSelection && (newQuery.queries[queryElements].e && (newQuery.queries[queryElements].e.operator === 'notequal' ||
+                                            newQuery.queries[queryElements].e.operator === 'equal' || newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.condition === 'and') && !_this.isCustomFiltering)) {
+                                            isReOrder = false;
+                                            break;
+                                        }
                                         if (newQuery.queries[queryElements].fn === 'onTake') {
                                             // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                             newQuery.queries[queryElements].e.nos = listItems.count;

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

@@ -658,6 +658,8 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected setReadOnly(): void;
     protected setInputValue(newProp?: any, oldProp?: any): void;
     private setCssClass;
+    private getRightIconsWidth;
+    private updateFloatLabelOverflowWidth;
     /**
      * Return the module name of this component.
      *

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

@@ -541,6 +541,7 @@ var DropDownList = /** @class */ (function (_super) {
             this.onChangeEvent(e);
         }
         this.floatLabelChange();
+        this.updateFloatLabelOverflowWidth();
         this.dispatchEvent(this.hiddenElement, 'change');
         if (this.getModuleName() === 'dropdownlist' && this.element.tagName !== 'INPUT') {
             this.dispatchEvent(this.inputElement, 'blur');
@@ -557,6 +558,12 @@ var DropDownList = /** @class */ (function (_super) {
             this.trigger('focus', args);
         }
         this.updateIconState();
+        if (this.floatLabelType !== 'Never' && this.inputWrapper && this.inputWrapper.container) {
+            var label = this.inputWrapper.container.querySelector('.e-float-text');
+            if (label) {
+                label.removeAttribute('style');
+            }
+        }
         this.isFocused = true;
     };
     DropDownList.prototype.resizingWireEvent = function () {
@@ -2386,7 +2393,7 @@ var DropDownList = /** @class */ (function (_super) {
                                 _this.checkFieldValue(x, fieldValue_1) === value_1 : x[checkField_1] === value_1;
                         });
                     }
-                    if (!checkVal) {
+                    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) {
@@ -3536,6 +3543,7 @@ var DropDownList = /** @class */ (function (_super) {
             this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never') {
             this.inputWrapper.container.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
         }
+        this.updateFloatLabelOverflowWidth();
         this.wireEvent();
         this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
         this.element.removeAttribute('tabindex');
@@ -4105,6 +4113,24 @@ var DropDownList = /** @class */ (function (_super) {
             Input.setCssClass(newClass, [this.popupObj.element], oldClass);
         }
     };
+    DropDownList.prototype.getRightIconsWidth = function () {
+        var container = this.inputWrapper.container;
+        var width = 0;
+        var iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        var icons = container.querySelectorAll(iconSelectors);
+        for (var index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        return width;
+    };
+    DropDownList.prototype.updateFloatLabelOverflowWidth = function () {
+        var container = this.inputWrapper.container;
+        var label = container.querySelector('.e-float-text');
+        var calculateWidth = (container.clientWidth - this.getRightIconsWidth());
+        if (label && calculateWidth) {
+            label.style.width = calculateWidth + 'px';
+        }
+    };
     /**
      * Return the module name of this component.
      *

package/src/mention/mention.js

@@ -420,7 +420,7 @@ var Mention = /** @class */ (function (_super) {
                 : lastWordRange.replace(this.mentionChar, '');
         }
         if (this.mentionChar.charCodeAt(0) === lastWordRange.charCodeAt(0) &&
-            this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && !this.lineBreak) {
+            this.queryString !== '' && e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 8 && !this.lineBreak) {
             this.searchLists(e);
             if (!this.isPopupOpen && this.queryString.length >= this.minLength) {
                 if (!this.isContentEditable(this.inputElement)) {

package/src/multi-select/multi-select.d.ts

@@ -682,6 +682,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private updateListItems;
     private loadTemplate;
     private setScrollPosition;
+    private updatePopupHeightOnFilter;
     private focusAtFirstListItem;
     private focusAtLastListItem;
     protected getAriaAttributes(): {
@@ -956,6 +957,8 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      * @returns {void}
      */
     selectAll(state: boolean): void;
+    private getRightIconsWidth;
+    private updateFloatLabelOverflowWidth;
     /**
      * Return the module name of this component.
      *

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

@@ -375,6 +375,27 @@ var MultiSelect = /** @class */ (function (_super) {
             this.scrollBottom(focusedItem, undefined, false, null, true);
         }
     };
+    MultiSelect.prototype.updatePopupHeightOnFilter = function () {
+        if (this.allowFiltering && this.allowResize && this.keyboardEvent) {
+            if (this.allowResize && this.popupObj && this.list) {
+                var filterText = this.inputElement && this.inputElement.value;
+                var filteredItems = this.list.querySelectorAll('li.e-list-item:not(.e-hide-listitem):not(.e-disabled)');
+                var isFiltering = filterText && filterText.length > 0;
+                if (isFiltering && filteredItems.length > 0) {
+                    var itemHeight = filteredItems[0].offsetHeight;
+                    var newHeight = filteredItems.length * itemHeight;
+                    this.popupObj.element.style.maxHeight = newHeight + 16 + 'px';
+                    this.list.style.maxHeight = newHeight + 'px';
+                }
+                else if (!isFiltering) {
+                    var restoreHeight = this.resizeHeight || parseInt(this.popupHeight, 10);
+                    this.popupObj.element.style.maxHeight = restoreHeight + 'px';
+                    this.list.style.maxHeight = restoreHeight + 'px';
+                    this.setResize();
+                }
+            }
+        }
+    };
     MultiSelect.prototype.focusAtFirstListItem = function (isOpen) {
         if (this.ulElement && this.ulElement.querySelector('li.'
             + dropDownBaseClasses.li)) {
@@ -1105,7 +1126,7 @@ var MultiSelect = /** @class */ (function (_super) {
             this.getFilteringSkeletonCount();
         }
         this.refreshPopup();
-        if (this.allowResize) {
+        if (this.allowResize && !this.isFilteringAction) {
             this.setResize();
         }
         if (this.mode === 'CheckBox') {
@@ -1292,6 +1313,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.onBlurHandler = function (eve, isDocClickFromCheck) {
         var target;
+        this.updatePopupHeightOnFilter();
         if (this.isBlurDispatching && this.isAngular) {
             this.isBlurDispatching = false;
             return;
@@ -1372,6 +1394,7 @@ var MultiSelect = /** @class */ (function (_super) {
             Input.createSpanElement(this.overAllWrapper, this.createElement);
         }
         this.calculateWidth();
+        this.updateFloatLabelOverflowWidth();
         if (!isNullOrUndefined(this.overAllWrapper) && !isNullOrUndefined(this.overAllWrapper.getElementsByClassName('e-ddl-icon')[0] &&
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0] && this.floatLabelType !== 'Never')) {
             this.overAllWrapper.getElementsByClassName('e-float-text-content')[0].classList.add('e-icon');
@@ -1574,6 +1597,12 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.searchWrapper.classList.remove(ZERO_SIZE);
             }
             this.checkPlaceholderSize();
+            if (this.floatLabelType !== 'Never' && this.overAllWrapper) {
+                var label = this.overAllWrapper.querySelector('.e-float-text');
+                if (label) {
+                    label.removeAttribute('style');
+                }
+            }
             if (this.focused) {
                 var args = { isInteracted: e ? true : false, event: e };
                 this.trigger('focus', args);
@@ -1884,7 +1913,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!(this.mode === 'CheckBox' && this.showSelectAll)) {
             this.refreshPopup();
         }
-        if (this.allowResize) {
+        if (this.allowResize && !this.isFilterAction) {
             this.setResize();
         }
         this.isKeyBoardAction = false;
@@ -3608,6 +3637,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
         });
+        this.updatePopupHeightOnFilter();
     };
     MultiSelect.prototype.search = function (e) {
         this.preventSetCurrentData = false;
@@ -3932,28 +3962,29 @@ var MultiSelect = /** @class */ (function (_super) {
         this.wireListEvents();
     };
     MultiSelect.prototype.initialValueUpdate = function (listItems, isInitialVirtualData) {
+        var _this = this;
         if (this.list) {
             var text = void 0;
             var element = void 0;
-            var value = void 0;
+            var value_2;
             if (this.chipCollectionWrapper) {
                 this.chipCollectionWrapper.innerHTML = '';
             }
             this.removeListSelection();
             if (!isNullOrUndefined(this.value)) {
                 for (var index = 0; !isNullOrUndefined(this.value[index]); index++) {
-                    value = this.allowObjectBinding ?
+                    value_2 = this.allowObjectBinding ?
                         getValue(((this.fields.value) ? this.fields.value : ''), this.value[index]) :
                         this.value[index];
-                    element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value);
+                    element = this.findListElement(this.hideSelectedItem ? this.ulElement : this.list, 'li', 'data-value', value_2);
                     var isCustomData = false;
                     if (this.enableVirtualization) {
                         text = null;
                         if (listItems != null && listItems.length > 0) {
                             for (var i = 0; i < listItems.length; i++) {
-                                if ((this.isPrimitiveData && listItems[i] === value) || (!this.isPrimitiveData
+                                if ((this.isPrimitiveData && listItems[i] === value_2) || (!this.isPrimitiveData
                                     && getValue((this.fields.value ? this.fields.value :
-                                        'value'), listItems[i]) === value)) {
+                                        'value'), listItems[i]) === value_2)) {
                                     text = this.isPrimitiveData ? listItems[i] :
                                         getValue(this.fields.text, listItems[i]);
                                     if (this.enableVirtualization) {
@@ -3979,7 +4010,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         if ((isNullOrUndefined(text) && this.allowCustomValue) &&
                             ((!(this.dataSource instanceof DataManager)) ||
                                 (this.dataSource instanceof DataManager && isInitialVirtualData))) {
-                            text = this.getTextByValue(value);
+                            text = this.getTextByValue(value_2);
                             isCustomData = true;
                         }
                         else if ((isNullOrUndefined(text) && !this.allowCustomValue) &&
@@ -3990,30 +4021,39 @@ var MultiSelect = /** @class */ (function (_super) {
                         }
                     }
                     else {
-                        text = this.getTextByValue(value);
+                        text = this.getTextByValue(value_2);
                     }
                     if (((element && (element.getAttribute('aria-selected') !== 'true')) ||
                         (element && (element.getAttribute('aria-selected') === 'true' && this.hideSelectedItem) &&
                             (this.mode === 'Box' || this.mode === 'Default'))) ||
-                        (this.enableVirtualization && value != null && text != null && !isCustomData)) {
+                        (this.enableVirtualization && value_2 != null && text != null && !isCustomData)) {
                         var currentText = [];
                         var textValues = this.isDynamicRemoteVirtualData && text != null && text !== '' && index === 0 ? text : this.text != null && this.text !== '' && !this.text.includes(text) ? this.text + this.delimiterChar + text : text;
                         currentText.push(textValues);
                         this.setProperties({ text: currentText.toString() }, true);
-                        this.addChip(text, value);
+                        this.addChip(text, value_2);
                         this.addListSelection(element);
                     }
-                    else if ((!this.enableVirtualization && value && this.allowCustomValue) ||
+                    else if ((!this.enableVirtualization && value_2 && this.allowCustomValue) ||
                         (this.enableVirtualization &&
-                            value &&
+                            value_2 &&
                             this.allowCustomValue &&
                             ((!(this.dataSource instanceof DataManager)) ||
                                 (this.dataSource instanceof DataManager && isInitialVirtualData)))) {
                         var indexItem = this.listData.length;
                         var newValue = {};
-                        setValue(this.fields.text, value, newValue);
-                        setValue(this.fields.value, value, newValue);
+                        setValue(this.fields.text, value_2, newValue);
+                        setValue(this.fields.value, value_2, newValue);
                         var noDataEle = this.popupWrapper.querySelector('.' + dropDownBaseClasses.noData);
+                        if (newValue && this.allowObjectBinding && this.allowCustomValue && this.value.length > 0 && typeof this.value[0] === 'object') {
+                            var valueArray = this.value;
+                            var filteredItems = valueArray.filter(function (valObj) {
+                                return valObj[_this.fields.value] === value_2;
+                            });
+                            if (filteredItems.length > 0) {
+                                newValue = filteredItems[0]; // Take the first matching item
+                            }
+                        }
                         if (!this.enableVirtualization) {
                             this.addItem(newValue, indexItem);
                         }
@@ -4026,7 +4066,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             }
                         }
                         element = element ? element : this.findListElement(this.hideSelectedItem ?
-                            this.ulElement : this.list, 'li', 'data-value', value);
+                            this.ulElement : this.list, 'li', 'data-value', value_2);
                         if (this.popupWrapper.contains(noDataEle)) {
                             this.list.setAttribute('style', noDataEle.getAttribute('style'));
                             this.popupWrapper.replaceChild(this.list, noDataEle);
@@ -4036,7 +4076,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         var textValues = this.text != null && this.text !== '' ? this.text + this.delimiterChar + text : text;
                         currentText.push(textValues);
                         this.setProperties({ text: currentText.toString() }, true);
-                        this.addChip(text, value);
+                        this.addChip(text, value_2);
                         this.addListSelection(element);
                     }
                 }
@@ -5873,6 +5913,24 @@ var MultiSelect = /** @class */ (function (_super) {
         this.isSelectAll = true;
         this.selectAllItems(state);
     };
+    MultiSelect.prototype.getRightIconsWidth = function () {
+        var container = this.overAllWrapper;
+        var width = 0;
+        var iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        var icons = container.querySelectorAll(iconSelectors);
+        for (var index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        return width;
+    };
+    MultiSelect.prototype.updateFloatLabelOverflowWidth = function () {
+        var container = this.overAllWrapper;
+        var label = container.querySelector('.e-float-text');
+        var calculateWidth = (container.clientWidth - this.getRightIconsWidth());
+        if (label && calculateWidth) {
+            label.style.width = calculateWidth + 'px';
+        }
+    };
     /**
      * Return the module name of this component.
      *
@@ -6037,6 +6095,7 @@ var MultiSelect = /** @class */ (function (_super) {
             closest(this.element, 'fieldset').disabled) {
             this.enabled = false;
         }
+        this.updateFloatLabelOverflowWidth();
         this.wireEvent();
         this.enable(this.enabled);
         this.enableRTL(this.enableRtl);

package/styles/bds-lite.css

@@ -781,6 +781,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bds.css

@@ -916,6 +916,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap-dark-lite.css

@@ -574,6 +574,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap-dark.css

@@ -649,6 +649,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap-lite.css

@@ -574,6 +574,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap.css

@@ -649,6 +649,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap4-lite.css

@@ -612,6 +612,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap4.css

@@ -691,6 +691,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap5-dark-lite.css

@@ -627,6 +627,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap5-dark.css

@@ -716,6 +716,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap5-lite.css

@@ -627,6 +627,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap5.3-lite.css

@@ -631,6 +631,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap5.3.css

@@ -720,6 +720,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/bootstrap5.css

@@ -716,6 +716,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

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

@@ -180,6 +180,10 @@
     display: flex;
   }
 
+  .e-disabled.e-ddl.e-static-clear .e-clear-icon {
+    pointer-events: none;
+  }
+
   .e-ddl.e-input-group {
     .e-input-value,
     .e-input-value:focus {

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

@@ -454,6 +454,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

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

@@ -277,6 +277,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

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

@@ -277,6 +277,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

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

@@ -315,6 +315,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

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

@@ -324,6 +324,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;

package/styles/drop-down-list/bootstrap5.3.css

@@ -328,6 +328,10 @@
   display: flex;
 }
 
+.e-disabled.e-ddl.e-static-clear .e-clear-icon {
+  pointer-events: none;
+}
+
 .e-ddl.e-input-group .e-input-value,
 .e-ddl.e-input-group .e-input-value:focus {
   font-family: inherit;