@syncfusion/ej2-dropdowns 20.3.57 → 20.3.59

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.57
+*  version : 20.3.59
 *  Copyright Syncfusion Inc. 2001 - 2020. 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@20.3.50",
+  "_id": "@syncfusion/ej2-dropdowns@20.3.58",
   "_inBundle": false,
-  "_integrity": "sha512-ym3A3174og0vVoRiHoAy2FuJLV3JmHW9TB0/tu+kM1ksLWMufHV5Q7JAx+gKWVxQNhfm6s86HHVnlFA3OgniYQ==",
+  "_integrity": "sha512-pwXw+I7D7g8FQSCdAPVJf3V9W+h0qIXytD3FKQHi7qQYrxdRhDIHH/CGEHQ7sxYgpNKJElYQjlpMrKoPZLIo9g==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.3.50.tgz",
-  "_shasum": "8c78326483125c14898e4f1b333adffc0f787a18",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-20.3.58.tgz",
+  "_shasum": "a74ca36401f4774bd62c42f7c345de22e3e05e41",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -46,8 +46,8 @@
     "@syncfusion/ej2-data": "~20.3.56",
     "@syncfusion/ej2-inputs": "~20.3.57",
     "@syncfusion/ej2-lists": "~20.3.56",
-    "@syncfusion/ej2-navigations": "~20.3.57",
-    "@syncfusion/ej2-popups": "~20.3.57"
+    "@syncfusion/ej2-navigations": "~20.3.58",
+    "@syncfusion/ej2-popups": "~20.3.59"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -72,6 +72,6 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "20.3.57",
+  "version": "20.3.59",
   "sideEffects": false
 }

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

@@ -275,7 +275,7 @@ var ComboBox = /** @class */ (function (_super) {
         this.itemData = this.getDataByValue(this.value);
         var dataItem = this.getItemData();
         if (!(this.allowCustom && isNullOrUndefined(dataItem.value) && isNullOrUndefined(dataItem.text))) {
-            this.setProperties({ 'value': dataItem.value, 'text': dataItem.text }, !this.allowCustom);
+            this.setProperties({ 'value': dataItem.value }, !this.allowCustom);
         }
     };
     /**

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

@@ -705,18 +705,20 @@ var DropDownBase = /** @class */ (function (_super) {
         return extend({}, options, fields, true);
     };
     DropDownBase.prototype.setFloatingHeader = function (e) {
-        if (isNullOrUndefined(this.fixedHeaderElement)) {
-            this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });
-            if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
-                this.fixedHeaderElement.style.display = 'none';
+        if (!isNullOrUndefined(this.list) && !this.list.classList.contains(dropDownBaseClasses.noData)) {
+            if (isNullOrUndefined(this.fixedHeaderElement)) {
+                this.fixedHeaderElement = this.createElement('div', { className: dropDownBaseClasses.fixedHead });
+                if (!this.list.querySelector('li').classList.contains(dropDownBaseClasses.group)) {
+                    this.fixedHeaderElement.style.display = 'none';
+                }
+                prepend([this.fixedHeaderElement], this.list);
+                this.setFixedHeader();
             }
-            prepend([this.fixedHeaderElement], this.list);
-            this.setFixedHeader();
-        }
-        if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {
-            this.setFixedHeader();
+            if (!isNullOrUndefined(this.fixedHeaderElement) && this.fixedHeaderElement.style.zIndex === '0') {
+                this.setFixedHeader();
+            }
+            this.scrollStop(e);
         }
-        this.scrollStop(e);
     };
     DropDownBase.prototype.scrollStop = function (e) {
         var target = !isNullOrUndefined(e) ? e.target : this.list;

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

@@ -498,7 +498,6 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected isPopupButton(): boolean;
     protected setScrollPosition(e?: KeyboardEventArgs): void;
     private clearText;
-    private listScroll;
     private setEleWidth;
     private closePopup;
     private destroyPopup;

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

@@ -1018,10 +1018,16 @@ var DropDownList = /** @class */ (function (_super) {
             this.setScrollPosition(e);
         }
         if (Browser.info.name !== 'mozilla') {
-            attributes(this.inputElement, { 'aria-label': this.inputElement.value });
+            attributes(this.targetElement(), { 'aria-label': this.inputElement.value });
             attributes(this.targetElement(), { 'aria-describedby': this.inputElement.id != '' ? this.inputElement.id : this.element.id });
             this.targetElement().removeAttribute('aria-live');
         }
+        if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+            attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
+        }
+        else if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-active')[0])) {
+            attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-active')[0].id });
+        }
     };
     DropDownList.prototype.dropdownCompiler = function (dropdownTemplate) {
         var checkTemplate = false;
@@ -1214,6 +1220,9 @@ var DropDownList = /** @class */ (function (_super) {
                         this.preventAutoFill = false;
                     }
                     this.preventAltUp = false;
+                    if (this.getModuleName() === 'autocomplete' && !isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+                        attributes(this.targetElement(), { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
+                    }
                     e.preventDefault();
                     break;
                 case 46: //delete
@@ -1707,19 +1716,13 @@ var DropDownList = /** @class */ (function (_super) {
                     var element = scrollParentElements_1[_i];
                     EventHandler.add(element, 'scroll', _this.scrollHandler, _this);
                 }
-                if (Browser.isDevice && _this.isFilterLayout()) {
-                    EventHandler.add(_this.list, 'scroll', _this.listScroll, _this);
-                }
                 if (!isNullOrUndefined(_this.list)) {
                     _this.unWireListEvents();
                     _this.wireListEvents();
                 }
                 _this.selectedElementID = _this.selectedLI ? _this.selectedLI.id : null;
-                attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options', 'aria-activedescendant': _this.selectedElementID });
+                attributes(_this.targetElement(), { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });
                 _this.inputElement.setAttribute('aria-expanded', 'true');
-                if (_this.selectedElementID == null) {
-                    _this.targetElement().removeAttribute('aria-activedescendant');
-                }
                 var inputParent = _this.isFiltering() ? _this.filterInput.parentElement : _this.inputWrapper.container;
                 addClass([inputParent], [dropDownListClasses.inputFocus]);
                 var animModel = { name: 'FadeIn', duration: 100 };
@@ -1788,6 +1791,12 @@ var DropDownList = /** @class */ (function (_super) {
                 var actionList = _this.actionCompleteData && _this.actionCompleteData.ulElement &&
                     _this.actionCompleteData.ulElement.querySelector('li');
                 var ulElement = _this.list.querySelector('ul li');
+                if (!isNullOrUndefined(_this.ulElement) && !isNullOrUndefined(_this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+                    attributes(_this.targetElement(), { 'aria-activedescendant': _this.ulElement.getElementsByClassName('e-item-focus')[0].id });
+                }
+                else if (!isNullOrUndefined(_this.ulElement) && !isNullOrUndefined(_this.ulElement.getElementsByClassName('e-active')[0])) {
+                    attributes(_this.targetElement(), { 'aria-activedescendant': _this.ulElement.getElementsByClassName('e-active')[0].id });
+                }
                 if (_this.isFiltering() && _this.itemTemplate && (_this.element.tagName === _this.getNgDirective()) &&
                     (actionList && ulElement && actionList.textContent !== ulElement.textContent) &&
                     _this.element.tagName !== 'EJS-COMBOBOX') {
@@ -1943,9 +1952,6 @@ var DropDownList = /** @class */ (function (_super) {
         this.filterInput.value = this.typedString = '';
         this.searchLists(null);
     };
-    DropDownList.prototype.listScroll = function () {
-        this.filterInput.blur();
-    };
     DropDownList.prototype.setEleWidth = function (width) {
         if (!isNullOrUndefined(width)) {
             if (typeof width === 'number') {
@@ -1974,7 +1980,6 @@ var DropDownList = /** @class */ (function (_super) {
         }
         if (Browser.isDevice && this.isFilterLayout()) {
             removeClass([document.body, this.popupObj.element], dropDownListClasses.popupFullScreen);
-            EventHandler.remove(this.list, 'scroll', this.listScroll);
         }
         if (this.isFilterLayout()) {
             if (!Browser.isDevice) {
@@ -2588,10 +2593,6 @@ var DropDownList = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.list.children[0]) || this.list.classList.contains(dropDownBaseClasses.noData)) {
             this.renderPopup(e);
         }
-        attributes(this.targetElement(), { 'aria-activedescendant': this.selectedElementID });
-        if (this.selectedElementID == null) {
-            this.targetElement().removeAttribute('aria-activedescendant');
-        }
     };
     DropDownList.prototype.renderHightSearch = function () {
         // update high light search

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

@@ -1139,12 +1139,12 @@ var ListBox = /** @class */ (function (_super) {
         if (li && li.parentElement) {
             currSelIdx = [].slice.call(li.parentElement.children).indexOf(li);
             if (!this.selectionSettings.showCheckbox) {
-                if ((e.ctrlKey || Browser.isDevice) && this.isSelected(li)) {
+                if ((e.ctrlKey || e.metaKey || Browser.isDevice) && this.isSelected(li)) {
                     li.classList.remove(cssClass.selected);
                     li.removeAttribute('aria-selected');
                     isSelect = false;
                 }
-                else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || Browser.isDevice))) {
+                else if (!(this.selectionSettings.mode === 'Multiple' && (e.ctrlKey || e.metaKey || Browser.isDevice))) {
                     this.getSelectedItems().forEach(function (ele) {
                         ele.removeAttribute('aria-selected');
                     });
@@ -1616,12 +1616,21 @@ var ListBox = /** @class */ (function (_super) {
         }
         return listObj;
     };
-    ListBox.prototype.getGrabbedItems = function () {
+    ListBox.prototype.getGrabbedItems = function (args) {
+        var grabbItems = false;
         for (var i = 0; i < this.value.length; i++) {
-            var liColl = this.list.querySelectorAll('[aria-selected="true"]');
-            for (var j = 0; j < liColl.length; j++) {
-                if (this.value[i] === liColl[j].textContent) {
-                    liColl[j].classList.add('e-grabbed');
+            if (this.value[i] === this.getFormattedValue(args.target.getAttribute('data-value'))) {
+                grabbItems = true;
+                break;
+            }
+        }
+        if (grabbItems) {
+            for (var i = 0; i < this.value.length; i++) {
+                var liColl = this.list.querySelectorAll('[aria-selected="true"]');
+                for (var j = 0; j < liColl.length; j++) {
+                    if (this.value[i] === this.getFormattedValue(liColl[j].getAttribute('data-value'))) {
+                        liColl[j].classList.add('e-grabbed');
+                    }
                 }
             }
         }
@@ -1635,7 +1644,7 @@ var ListBox = /** @class */ (function (_super) {
         return elems;
     };
     ListBox.prototype.getDragArgs = function (args, isDragEnd) {
-        var elems = this.getGrabbedItems();
+        var elems = this.getGrabbedItems(args);
         if (elems.length) {
             if (isDragEnd) {
                 elems.push(args.target);

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

@@ -636,6 +636,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private validateValues;
     private updateValueState;
     private updateTempValue;
+    private updateAriaActiveDescendant;
     private getPagingCount;
     private pageUpSelection;
     private pageDownSelection;

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

@@ -252,12 +252,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 _this.renderReactTemplates();
                 _this.popupObj.show(eventArgs.animation, (_this.zIndex === 1000) ? _this.element : null);
                 attributes(_this.inputElement, { 'aria-expanded': 'true', 'aria-owns': _this.inputElement.id + '_options' });
-                if (_this.selectedElementID == null) {
-                    _this.inputElement.removeAttribute('aria-activedescendant');
-                }
-                else {
-                    attributes(_this.inputElement, { 'aria-activedescendant': _this.selectedElementID });
-                }
+                _this.updateAriaActiveDescendant();
                 if (_this.isFirstClick) {
                     _this.loadTemplate();
                 }
@@ -407,13 +402,23 @@ var MultiSelect = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
             for (var i = 0; i < this.value.length; i++) {
                 var checkEle = this.findListElement(((this.allowFiltering && !isNullOrUndefined(this.mainList)) ? this.mainList : ulElement), 'li', 'data-value', proxy.value[i]);
-                if (!checkEle) {
+                if (!checkEle && !(this.dataSource instanceof DataManager)) {
                     this.value.splice(i, 1);
                     i -= 1;
                 }
             }
         }
-        this.updateActionList(ulElement, list, e);
+        var valuecheck = [];
+        if (!isNullOrUndefined(this.value) && !this.allowCustomValue) {
+            valuecheck = this.presentItemValue(this.ulElement);
+        }
+        if (valuecheck.length > 0 && this.dataSource instanceof DataManager && !isNullOrUndefined(this.value)
+            && this.listData != null) {
+            this.addNonPresentItems(valuecheck, this.ulElement, this.listData);
+        }
+        else {
+            this.updateActionList(ulElement, list, e);
+        }
         if (this.dataSource instanceof DataManager && this.mode === 'CheckBox' && this.allowFiltering) {
             this.removeFocus();
         }
@@ -495,6 +500,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             dropDownBaseClasses.li + ':not(.' + HIDE_LIST + ')');
                         if (listEle.length > 0) {
                             addClass([listEle[0]], dropDownBaseClasses.focus);
+                            this.updateAriaActiveDescendant();
                         }
                         else {
                             //EJ2-57588 - for this task, we prevent the ul element cloning ( this.ulElement = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
@@ -942,6 +948,11 @@ var MultiSelect = /** @class */ (function (_super) {
             this.tempValues = this.value.slice();
         }
     };
+    MultiSelect.prototype.updateAriaActiveDescendant = function () {
+        if (!isNullOrUndefined(this.ulElement) && !isNullOrUndefined(this.ulElement.getElementsByClassName('e-item-focus')[0])) {
+            attributes(this.inputElement, { 'aria-activedescendant': this.ulElement.getElementsByClassName('e-item-focus')[0].id });
+        }
+    };
     MultiSelect.prototype.getPagingCount = function () {
         var height = this.list.classList.contains(dropDownBaseClasses.noData) ? null :
             getComputedStyle(this.getItems()[0], null).getPropertyValue('height');
@@ -1085,6 +1096,7 @@ var MultiSelect = /** @class */ (function (_super) {
             var element = scrollEle[(isHome) ? 0 : (scrollEle.length - 1)];
             element.classList.add(dropDownBaseClasses.focus);
             this.scrollBottom(element);
+            this.updateAriaActiveDescendant();
         }
     };
     MultiSelect.prototype.onKeyDown = function (e) {
@@ -1586,7 +1598,7 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.invokeCheckboxSelection = function (element, eve, isClearAll) {
         this.notify('updatelist', { module: 'CheckBoxSelection', enable: this.mode === 'CheckBox', li: element, e: eve });
-        attributes(this.inputElement, { 'aria-activedescendant': element.id });
+        this.updateAriaActiveDescendant();
         if ((this.value && this.value.length !== this.mainData.length)
             && (this.mode === 'CheckBox' && this.showSelectAll && !(this.isSelectAll || isClearAll))) {
             this.notify('checkSelectAll', {
@@ -2609,10 +2621,12 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.enabled && this.isValidLI(element)) {
             this.removeFocus();
             addClass([element], dropDownBaseClasses.focus);
+            this.updateAriaActiveDescendant();
         }
         else {
             if (this.enableGroupCheckBox && this.mode === 'CheckBox' && !isNullOrUndefined(this.fields.groupBy)) {
                 addClass([element], dropDownBaseClasses.focus);
+                this.updateAriaActiveDescendant();
             }
         }
     };
@@ -3181,6 +3195,7 @@ var MultiSelect = /** @class */ (function (_super) {
                         target.classList.remove('e-active');
                     }
                     target.classList.add('e-item-focus');
+                    this.updateAriaActiveDescendant();
                 }
                 this.textboxValueUpdate();
                 this.checkPlaceholderSize();
@@ -3571,7 +3586,9 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.addNonPresentItems = function (valuecheck, ulElement, list, event) {
         var _this = this;
         this.dataSource.executeQuery(this.getForQuery(valuecheck)).then(function (e) {
-            _this.addItem(e.result, list.length);
+            if (e.result.length > 0) {
+                _this.addItem(e.result, list.length);
+            }
             _this.updateActionList(ulElement, list, event);
         });
     };
@@ -3807,7 +3824,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 spellcheck: 'false',
                 type: 'text',
                 autocomplete: 'off',
-                tabindex: '0'
+                tabindex: '0',
+                role: 'combobox'
             }
         });
         if (this.mode === 'Default' || this.mode === 'Box') {

package/styles/bootstrap-dark.css

@@ -2184,6 +2184,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #f0f0f0;
 }

package/styles/bootstrap.css

@@ -2183,6 +2183,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #333;
 }

package/styles/bootstrap4.css

@@ -2346,6 +2346,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }

package/styles/bootstrap5-dark.css

@@ -2351,6 +2351,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }

package/styles/bootstrap5.css

@@ -2351,6 +2351,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #212529;
 }

package/styles/fabric-dark.css

@@ -2163,6 +2163,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }

package/styles/fabric.css

@@ -2157,6 +2157,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #666;
 }

package/styles/fluent-dark.css

@@ -2391,6 +2391,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #f3f2f1;
 }

package/styles/fluent.css

@@ -2391,6 +2391,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #201f1e;
 }

package/styles/highcontrast-light.css

@@ -2262,6 +2262,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }

package/styles/highcontrast.css

@@ -2268,6 +2268,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #000;
 }

package/styles/material-dark.css

@@ -3549,6 +3549,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }

package/styles/material.css

@@ -3606,6 +3606,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }

package/styles/multi-select/_layout.scss

@@ -2000,3 +2000,7 @@ ejs-multiselect {
 .e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container.e-input-group :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon {
   display: none;
 }
+
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}

package/styles/multi-select/bootstrap-dark.css

@@ -1027,6 +1027,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #f0f0f0;
 }

package/styles/multi-select/bootstrap.css

@@ -1025,6 +1025,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #333;
 }

package/styles/multi-select/bootstrap4.css

@@ -1126,6 +1126,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }

package/styles/multi-select/bootstrap5-dark.css

@@ -1106,6 +1106,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }

package/styles/multi-select/bootstrap5.css

@@ -1106,6 +1106,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #212529;
 }

package/styles/multi-select/fabric-dark.css

@@ -1028,6 +1028,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }

package/styles/multi-select/fabric.css

@@ -1028,6 +1028,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #666;
 }

package/styles/multi-select/fluent-dark.css

@@ -1146,6 +1146,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #f3f2f1;
 }

package/styles/multi-select/fluent.css

@@ -1146,6 +1146,10 @@ ejs-multiselect {
   display: none;
 }
 
+.e-multiselect.e-input-group.e-control-wrapper .e-input-group-icon {
+  margin-right: 0;
+}
+
 .e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #201f1e;
 }