@syncfusion/ej2-dropdowns 25.2.7 → 26.1.35

package/src/mention/mention.js

@@ -296,6 +296,9 @@ var Mention = /** @class */ (function (_super) {
         }
     };
     Mention.prototype.updateUpDownAction = function (e) {
+        if (this.fields.disabled && this.list && this.list.querySelectorAll('.e-list-item:not(.e-disabled)').length === 0) {
+            return;
+        }
         var focusEle = this.list.querySelector('.' + dropDownBaseClasses.focus);
         if (this.isSelectFocusItem(focusEle)) {
             this.setSelection(focusEle, e);
@@ -316,6 +319,17 @@ var Mention = /** @class */ (function (_super) {
                 this.setSelection(nextItem, e);
             }
         }
+        var itemIndex;
+        for (var index = 0; index < this.liCollections.length; index++) {
+            if (this.liCollections[index].classList.contains(dropDownBaseClasses.focus)
+                || this.liCollections[index].classList.contains(dropDownBaseClasses.selected)) {
+                itemIndex = index;
+                break;
+            }
+        }
+        if (itemIndex != null && this.isDisabledElement(this.liCollections[itemIndex])) {
+            this.updateUpDownAction(e);
+        }
         if (this.isPopupOpen) {
             e.preventDefault();
         }
@@ -491,7 +505,7 @@ var Mention = /** @class */ (function (_super) {
             if (!isNullOrUndefined(ulElement)) {
                 attributes(ulElement, { 'id': this.inputElement.id + '_options', 'role': 'listbox', 'aria-hidden': 'false' });
             }
-            var focusItem = ulElement.querySelector('.' + dropDownBaseClasses.li);
+            var focusItem = this.fields.disabled ? ulElement.querySelector('.' + dropDownBaseClasses.li + ':not(.e-disabled)') : ulElement.querySelector('.' + dropDownBaseClasses.li);
             if (focusItem) {
                 focusItem.classList.add(dropDownBaseClasses.selected);
                 this.selectedLI = focusItem;
@@ -720,10 +734,10 @@ var Mention = /** @class */ (function (_super) {
                     }
                 }
                 append([_this.list], popupEle_1);
-                if (_this.inputElement.parentElement && _this.inputElement.parentElement.parentElement &&
-                    _this.inputElement.parentElement.parentElement.classList.contains('e-richtexteditor')) {
-                    if (popupEle_1.firstElementChild && popupEle_1.firstElementChild.childElementCount > 0) {
-                        popupEle_1.firstElementChild.setAttribute('aria-owns', _this.inputElement.parentElement.parentElement.id);
+                if (_this.inputElement.parentElement) {
+                    var rteRootElement = _this.inputElement.parentElement.closest('.e-richtexteditor');
+                    if (rteRootElement && popupEle_1.firstElementChild && popupEle_1.firstElementChild.childElementCount > 0) {
+                        popupEle_1.firstElementChild.setAttribute('aria-owns', rteRootElement.id);
                         addClass([popupEle_1], 'e-rte-elements');
                     }
                 }
@@ -1026,7 +1040,7 @@ var Mention = /** @class */ (function (_super) {
     Mention.prototype.onMouseClick = function (e) {
         var target = e.target;
         var li = closest(target, '.' + dropDownBaseClasses.li);
-        if (!this.isValidLI(li)) {
+        if (!this.isValidLI(li) || this.isDisabledElement(li)) {
             return;
         }
         this.isSelected = true;
@@ -1257,6 +1271,7 @@ var Mention = /** @class */ (function (_super) {
             }
             this.isTyped = false;
             range.deleteContents();
+            range.startContainer.parentElement.normalize();
             var element = this.createElement('div');
             element.innerHTML = value;
             var frag = document.createDocumentFragment();
@@ -1293,10 +1308,10 @@ var Mention = /** @class */ (function (_super) {
         }
         if (this.isContentEditable(this.inputElement)) {
             if (Browser.isAndroid) {
-                return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
+                return '<span contenteditable="true" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : '');
             }
             else {
-                return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : ' ');
+                return '<span contenteditable="false" class="e-mention-chip">' + showChar + value + '</span>'.concat(typeof this.suffixText === 'string' ? this.suffixText : '');
             }
         }
         else {

package/src/multi-select/interface.js

@@ -1 +0,0 @@
-

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

@@ -906,6 +906,13 @@ export declare class MultiSelect extends DropDownBase implements IInput {
      */
     render(): void;
     private getListHeight;
+    /**
+     * Removes disabled values from the given array.
+     *
+     * @param { number[] | string[] | boolean[] | object[] } value - The array to check.
+     * @returns {void}
+     */
+    private removeDisabledItemsValue;
     private checkInitialValue;
     private checkAutoFocus;
     private updatevirtualizationList;
@@ -913,6 +920,14 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private addValidInputClass;
     private dropDownIcon;
     private initialUpdate;
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+
+     */
+    disableItem(item: string | number | object | HTMLLIElement): void;
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *

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

@@ -358,13 +358,26 @@ var MultiSelect = /** @class */ (function (_super) {
             }
             else {
                 if (this.enableVirtualization) {
-                    element = this.ulElement.querySelector('li.'
-                        + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                    if (this.fields.disabled) {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)' + ':not(.' + DISABLED + ')');
+                    }
+                    else {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.e-virtual-list)' + ':not(.e-hide-listitem)');
+                    }
                 }
                 else {
-                    element = this.ulElement.querySelector('li.'
-                        + dropDownBaseClasses.li + ':not(.'
-                        + HIDE_LIST + ')');
+                    if (this.fields.disabled) {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.'
+                            + HIDE_LIST + ')' + ':not(.' + DISABLED + ')');
+                    }
+                    else {
+                        element = this.ulElement.querySelector('li.'
+                            + dropDownBaseClasses.li + ':not(.'
+                            + HIDE_LIST + ')');
+                    }
                 }
             }
             if (element !== null) {
@@ -2097,6 +2110,21 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
         }
+        var focusedLi = this.list ? this.list.querySelector('.e-item-focus') : null;
+        if (this.isDisabledElement(focusedLi)) {
+            if (this.list.querySelectorAll('.e-list-item:not(.e-hide-listitem):not(.e-disabled)').length === 0) {
+                this.removeFocus();
+                return;
+            }
+            var index = this.getIndexByValue(focusedLi.getAttribute('data-value'));
+            if (index === 0 && this.mode !== 'CheckBox') {
+                position = 1;
+            }
+            if (index === (this.list.querySelectorAll('.e-list-item:not(.e-hide-listitem)').length - 1)) {
+                position = -1;
+            }
+            this.moveByList(position);
+        }
     };
     MultiSelect.prototype.getElementByValue = function (value) {
         var item;
@@ -2287,7 +2315,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     }
                     _this.setProperties({ value: [].concat([], removeVal) }, true);
                     if (_this.enableVirtualization) {
-                        var currentText = index == 0 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index] + _this.delimiterChar, '') : _this.text.replace(_this.delimiterChar + _this.text.split(_this.delimiterChar)[index], '');
+                        var currentText = index == 0 && _this.text.split(_this.delimiterChar) && _this.text.split(_this.delimiterChar).length == 1 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index], '') : index == 0 ? _this.text.replace(_this.text.split(_this.delimiterChar)[index] + _this.delimiterChar, '') : _this.text.replace(_this.delimiterChar + _this.text.split(_this.delimiterChar)[index], '');
                         _this.setProperties({ text: currentText.toString() }, true);
                     }
                     if (element_1 !== null) {
@@ -3679,7 +3707,7 @@ var MultiSelect = /** @class */ (function (_super) {
         }
     };
     MultiSelect.prototype.addListFocus = function (element) {
-        if (this.enabled && this.isValidLI(element)) {
+        if (this.enabled && (this.isValidLI(element) || (this.fields.disabled && this.isDisabledElement(element)))) {
             this.removeFocus();
             addClass([element], dropDownBaseClasses.focus);
             this.updateAriaActiveDescendant();
@@ -4270,14 +4298,14 @@ var MultiSelect = /** @class */ (function (_super) {
         var li;
         if (!isNullOrUndefined(this.list)) {
             li = this.list.querySelectorAll(state ?
-                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-virtual-list)' :
-                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-virtual-list)');
+                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)' :
+                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)');
         }
         if (this.value && this.value.length && event && event.target
             && closest(event.target, '.e-close-hooker') && this.allowFiltering) {
             li = this.mainList.querySelectorAll(state ?
-                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-virtual-list)' :
-                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-virtual-list)');
+                'li.e-list-item:not([aria-selected="true"]):not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)' :
+                'li.e-list-item[aria-selected="true"]:not(.e-reorder-hide):not(.e-disabled):not(.e-virtual-list)');
         }
         if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
             var target = (event ? (this.groupTemplate ? closest(event.target, '.e-list-group-item') : event.target) : null);
@@ -4725,9 +4753,16 @@ var MultiSelect = /** @class */ (function (_super) {
                     this.updateClearButton(newProp.showClearButton);
                     break;
                 case 'text':
+                    if (this.fields.disabled) {
+                        this.text =
+                            this.text && !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
+                    }
                     this.updateVal(this.value, this.value, 'text');
                     break;
                 case 'value':
+                    if (this.fields.disabled) {
+                        this.removeDisabledItemsValue(this.value);
+                    }
                     this.updateVal(this.value, oldProp.value, 'value');
                     this.addValidInputClass();
                     if (!this.closePopupOnSelect && this.isPopupOpen()) {
@@ -5299,8 +5334,33 @@ var MultiSelect = /** @class */ (function (_super) {
         listParent.remove();
         return listItemHeight;
     };
+    /**
+     * Removes disabled values from the given array.
+     *
+     * @param { number[] | string[] | boolean[] | object[] } value - The array to check.
+     * @returns {void}
+     */
+    MultiSelect.prototype.removeDisabledItemsValue = function (value) {
+        if (value) {
+            var data = [];
+            var dataIndex = 0;
+            for (var index = 0; index < value.length; index++) {
+                var indexValue = value[index];
+                if (typeof (indexValue) === 'object') {
+                    indexValue = JSON.parse(JSON.stringify(indexValue))[this.fields.value];
+                }
+                if ((indexValue != null) && !(this.isDisabledItemByIndex(this.getIndexByValue(indexValue)))) {
+                    data[dataIndex++] = value[index];
+                }
+            }
+            this.value = data.length > 0 ? data : null;
+        }
+    };
     MultiSelect.prototype.checkInitialValue = function () {
         var _this = this;
+        if (this.fields.disabled) {
+            this.removeDisabledItemsValue(this.value);
+        }
         var isData = this.dataSource instanceof Array ? (this.dataSource.length > 0)
             : !isNullOrUndefined(this.dataSource);
         if (!(this.value && this.value.length) &&
@@ -5339,6 +5399,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 _super.prototype.render.call(this);
             }
         }
+        if (this.fields.disabled) {
+            this.text = this.text && !this.isDisabledItemByIndex(this.getIndexByValue(this.getValueByText(this.text))) ? this.text : null;
+        }
         if (!isNullOrUndefined(this.text) && (isNullOrUndefined(this.value) || this.value.length === 0)) {
             this.initialTextUpdate();
         }
@@ -5473,6 +5536,66 @@ var MultiSelect = /** @class */ (function (_super) {
         this.refreshInputHight();
         this.checkPlaceholderSize();
     };
+    /**
+     * Method to disable specific item in the popup.
+     *
+     * @param {string | number | object | HTMLLIElement} item - Specifies the item to be disabled.
+     * @returns {void}
+
+     */
+    MultiSelect.prototype.disableItem = function (item) {
+        if (this.fields.disabled) {
+            if (!this.list) {
+                this.renderList();
+            }
+            var itemIndex = -1;
+            if (this.liCollections && this.liCollections.length > 0 && this.listData && this.fields.disabled) {
+                if (typeof (item) === 'string') {
+                    itemIndex = this.getIndexByValue(item);
+                }
+                else if (typeof item === 'object') {
+                    if (item instanceof HTMLLIElement) {
+                        for (var index = 0; index < this.liCollections.length; index++) {
+                            if (this.liCollections[index] === item) {
+                                itemIndex = this.getIndexByValue(item.getAttribute('data-value'));
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        var value = JSON.parse(JSON.stringify(item))[this.fields.value];
+                        for (var index = 0; index < this.listData.length; index++) {
+                            if (JSON.parse(JSON.stringify(this.listData[index]))[this.fields.value] === value) {
+                                itemIndex = this.getIndexByValue(value);
+                                break;
+                            }
+                        }
+                    }
+                }
+                else {
+                    itemIndex = item;
+                }
+                var isValidIndex = itemIndex < this.liCollections.length && itemIndex > -1;
+                if (isValidIndex && !(JSON.parse(JSON.stringify(this.listData[itemIndex]))[this.fields.disabled])) {
+                    var li = this.liCollections[itemIndex];
+                    if (li) {
+                        this.disableListItem(li);
+                        var parsedData = JSON.parse(JSON.stringify(this.listData[itemIndex]));
+                        parsedData[this.fields.disabled] = true;
+                        this.listData[itemIndex] = parsedData;
+                        if (li.classList.contains(dropDownBaseClasses.focus)) {
+                            this.removeFocus();
+                        }
+                        if (li.classList.contains(HIDE_LIST) || li.classList.contains(dropDownBaseClasses.selected)) {
+                            var oldValue = this.value;
+                            this.removeDisabledItemsValue(this.value);
+                            this.updateVal(this.value, oldValue, 'value');
+                        }
+                    }
+                }
+            }
+        }
+    };
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *
@@ -5540,7 +5663,7 @@ var MultiSelect = /** @class */ (function (_super) {
         this.selectAllEventEle = null;
     };
     __decorate([
-        Complex({ text: null, value: null, iconCss: null, groupBy: null }, FieldSettings)
+        Complex({ text: null, value: null, iconCss: null, groupBy: null, disabled: null }, FieldSettings)
     ], MultiSelect.prototype, "fields", void 0);
     __decorate([
         Property(false)

package/styles/auto-complete/_bootstrap5.3-definition.scss

@@ -0,0 +1,2 @@
+//default
+//enddefault

package/styles/auto-complete/_fluent2-definition.scss

@@ -0,0 +1,2 @@
+//default
+//enddefault

package/styles/auto-complete/bootstrap-dark.css

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
   margin-top: 3px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -73,7 +75,8 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-filter-parent {

package/styles/auto-complete/bootstrap.css

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   margin-top: 3px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -73,7 +75,8 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-filter-parent {

package/styles/auto-complete/bootstrap4.css

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: 3px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -91,11 +93,13 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
   background: transparent;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;

package/styles/auto-complete/bootstrap5-dark.css

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: 3px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -102,11 +104,13 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
   background: transparent;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;

package/styles/auto-complete/bootstrap5.css

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: 3px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -102,11 +104,13 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
   background: transparent;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;

package/styles/auto-complete/fabric-dark.css

@@ -1,6 +1,7 @@
 .e-ddl.e-popup {
   border: 0;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26);
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26);
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26);
   margin-top: 1px;
 }
 .e-ddl.e-popup .e-input-group input {
@@ -8,6 +9,7 @@
 }
 
 .e-ddl.e-popup .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;

package/styles/auto-complete/fabric.css

@@ -1,6 +1,7 @@
 .e-ddl.e-popup {
   border: 0;
-  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+          box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
   margin-top: 1px;
 }
 .e-ddl.e-popup .e-input-group input {
@@ -8,6 +9,7 @@
 }
 
 .e-ddl.e-popup .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;

package/styles/auto-complete/fluent-dark.css

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: 1px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -86,11 +88,13 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
   background: none;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;

package/styles/auto-complete/fluent.css

@@ -1,6 +1,7 @@
 .e-popup.e-ddl {
   border-radius: 4px;
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   margin-top: 1px;
 }
 .e-popup.e-ddl .e-input-group {
@@ -15,6 +16,7 @@
 }
 
 .e-popup.e-ddl .e-filter-parent .e-input-group {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   width: auto;
@@ -86,11 +88,13 @@
 .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
-  box-shadow: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
 }
 
 .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
   background: none;
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;