@syncfusion/ej2-dropdowns 30.1.41 → 30.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 30.1.41
+*  version : 30.2.4
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-dropdowns",
-  "version": "30.1.41",
+  "version": "30.2.4",
   "description": "Essential JS 2 DropDown Components",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,13 +8,13 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-dropdowns.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~30.1.38",
-    "@syncfusion/ej2-data": "~30.1.40",
-    "@syncfusion/ej2-inputs": "~30.1.40",
-    "@syncfusion/ej2-lists": "~30.1.41",
-    "@syncfusion/ej2-navigations": "~30.1.41",
-    "@syncfusion/ej2-notifications": "~30.1.37",
-    "@syncfusion/ej2-popups": "~30.1.40"
+    "@syncfusion/ej2-base": "~30.2.4",
+    "@syncfusion/ej2-data": "~30.2.4",
+    "@syncfusion/ej2-inputs": "~30.2.4",
+    "@syncfusion/ej2-lists": "~30.2.4",
+    "@syncfusion/ej2-navigations": "~30.2.4",
+    "@syncfusion/ej2-notifications": "~30.2.4",
+    "@syncfusion/ej2-popups": "~30.2.4"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -207,8 +207,8 @@ var ComboBox = /** @class */ (function (_super) {
                             var dataItem = _this.getItemData();
                             var value = _this.allowObjectBinding ?
                                 _this.getDataByValue(dataItem.value) : dataItem.value;
-                            if ((_this.value === dataItem.value && _this.text !== dataItem.text) ||
-                                (_this.value !== dataItem.value && _this.text === dataItem.text)) {
+                            if ((_this.value === dataItem.value && _this.text !== dataItem.text.toString()) ||
+                                (_this.value !== dataItem.value && _this.text === dataItem.text.toString())) {
                                 _this.setProperties({ 'text': dataItem.text ? dataItem.text.toString() : dataItem.text, 'value': value });
                             }
                         }

package/src/common/interface.d.ts

@@ -79,6 +79,7 @@ export interface IDropdownlist extends Component<HTMLElement> {
     appendUncheckList: boolean;
     keyCode: number;
     preventSetCurrentData: boolean;
+    remoteDataCount: number;
     virtualGroupDataSource: {
         [key: string]: Object;
     }[] | DataManager | string[] | number[] | boolean[];

package/src/common/virtual-scroll.js

@@ -156,7 +156,7 @@ var VirtualScroll = /** @class */ (function () {
         if (this.component === 'combobox') {
             var totalData = 0;
             if (this.parent.dataSource instanceof DataManager) {
-                totalData = this.parent.dataSource.dataSource.json.length;
+                totalData = this.parent.remoteDataCount;
             }
             else if (this.parent.dataSource && this.parent.dataSource.length > 0) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -485,6 +485,7 @@ var VirtualScroll = /** @class */ (function () {
                 this.parent.isVirtualScrolling = true;
                 setTimeout(function () {
                     _this.parent.pageCount = _this.parent.getPageCount();
+                    _this.parent.isRequesting = false;
                     _this.virtualScrollRefreshAsync().then(function () {
                         if (_this.parent.popupObj) {
                             _this.parent.list = _this.parent.popupObj.element.querySelector('.' + 'e-content') || select('.' + 'e-content');

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

@@ -200,6 +200,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
     protected isFilterAction: boolean;
     private isUpdateGroupTemplate;
     private groupHeaderItems;
+    protected isCustomReset: boolean;
     private fiteredGroupHeaderItems;
     protected keyboardModule: KeyboardEvents;
     protected enableRtlElements: HTMLElement[];
@@ -583,6 +584,7 @@ export declare class DropDownBase extends Component<HTMLElement> implements INot
      */
     private setListData;
     private updateGroupHeaderItems;
+    private setCustomListData;
     protected handleVirtualKeyboardActions(e: KeyboardEventArgs, pageCount: number): void;
     protected updatePopupState(): void;
     protected updatePopupPosition(): void;

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

@@ -733,11 +733,12 @@ var DropDownBase = /** @class */ (function (_super) {
                             _this.emptyDataRequest(fields);
                             return;
                         }
-                        eventArgs.data.executeQuery(_this.getQuery(eventArgs.query)).then(function (e) {
+                        var query_1 = _this.getQuery(eventArgs.query);
+                        eventArgs.data.executeQuery(query_1).then(function (e) {
                             _this.isPreventChange = _this.isAngular && _this.preventChange ? true : _this.isPreventChange;
                             var isReOrder = true;
                             if (!_this.virtualSelectAll) {
-                                var newQuery = _this.getQuery(eventArgs.query);
+                                var newQuery = query_1.clone();
                                 for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
                                     if (newQuery.queries[queryElements].fn === 'onWhere') {
                                         isWhereExist_1 = true;
@@ -944,6 +945,87 @@ var DropDownBase = /** @class */ (function (_super) {
             this.fiteredGroupHeaderItems = clonedHeaders;
         }
     };
+    DropDownBase.prototype.setCustomListData = function (dataSource, fields, query, event) {
+        var _this = this;
+        fields = fields ? fields : this.fields;
+        var ulElement;
+        this.isActive = true;
+        this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
+        if (!this.isRequesting) {
+            this.isRequesting = true;
+            this.showSpinner();
+            this.isRequesting = false;
+            var isReOrder = true;
+            var listItems = void 0;
+            if (this.isVirtualizationEnabled && !this.virtualGroupDataSource && this.fields.groupBy) {
+                var data = new DataManager(this.dataSource).executeLocal(new Query().group(this.fields.groupBy));
+                this.virtualGroupDataSource = data.records;
+            }
+            var dataManager = this.isVirtualizationEnabled &&
+                this.virtualGroupDataSource
+                && !this.isCustomDataUpdated ? new DataManager(this.virtualGroupDataSource) :
+                new DataManager(dataSource);
+            listItems = (this.getQuery(query)).executeLocal(dataManager);
+            if (!this.virtualSelectAll) {
+                var newQuery = this.getQuery(query);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                if (this.isVirtualizationEnabled && (listItems.count !== 0 &&
+                    listItems.count < (this.itemCount * 2)) && !this.appendUncheckList) {
+                    if (newQuery) {
+                        for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                            if (newQuery.queries[queryElements].fn === 'onTake') {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                newQuery.queries[queryElements].e.nos = listItems.count;
+                                listItems = (newQuery).executeLocal(dataManager);
+                            }
+                            if (this.getModuleName() === 'multiselect' && (newQuery.queries[queryElements].e.condition === 'or' || newQuery.queries[queryElements].e.operator === 'equal') && !this.isCustomFiltering) {
+                                isReOrder = false;
+                            }
+                        }
+                        if (isReOrder) {
+                            listItems = (newQuery).executeLocal(dataManager);
+                            this.isVirtualTrackHeight = (!(this.dataSource instanceof DataManager) &&
+                                !this.isCustomDataUpdated) ? true : false;
+                        }
+                    }
+                }
+                else {
+                    this.isVirtualTrackHeight = false;
+                    if (newQuery) {
+                        for (var queryElements = 0; queryElements < newQuery.queries.length; queryElements++) {
+                            if (this.getModuleName() === 'multiselect' && ((newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.condition === 'or') || (newQuery.queries[queryElements].e && newQuery.queries[queryElements].e.operator === 'equal'))) {
+                                isReOrder = false;
+                            }
+                        }
+                    }
+                }
+            }
+            if (isReOrder && (!(this.dataSource instanceof DataManager) && !this.isCustomDataUpdated) &&
+                !this.virtualSelectAll) {
+                // eslint-disable @typescript-eslint/no-explicit-any
+                this.dataCount = this.totalItemCount = this.virtualSelectAll ? listItems.length :
+                    listItems.count;
+            }
+            listItems = this.isVirtualizationEnabled ? listItems.result : listItems;
+            this.isPreventChange = this.isAngular && this.preventChange ? true : this.isPreventChange;
+            this.isCustomFiltering = false;
+            if (this.isIncrementalRequest) {
+                ulElement = this.renderItems(listItems, fields);
+                return;
+            }
+            ulElement = this.renderItems(listItems, fields);
+            this.onActionComplete(ulElement, listItems, event);
+            if (this.groupTemplate) {
+                this.renderGroupTemplate(ulElement);
+            }
+            this.bindChildItems(listItems, ulElement, fields);
+            setTimeout(function () {
+                if (_this.getModuleName() === 'multiselect' && _this.itemTemplate != null && (ulElement.childElementCount > 0 && (ulElement.children[0].childElementCount > 0 || (_this.fields.groupBy && ulElement.children[1] && ulElement.children[1].childElementCount > 0)))) {
+                    _this.updateDataList();
+                }
+            });
+        }
+    };
     DropDownBase.prototype.handleVirtualKeyboardActions = function (e, pageCount) {
         // Used this method in component side.
     };
@@ -1673,7 +1755,12 @@ var DropDownBase = /** @class */ (function (_super) {
             }
             dataSource = this.getModuleName() === 'combobox' && this.selectData && dataSource instanceof Array && dataSource.length < this.selectData.length && this.addedNewItem ? this.selectData : dataSource;
             this.addedNewItem = false;
-            this.setListData(dataSource, fields, query, e);
+            if (this.isCustomReset && this.getModuleName() === 'multiselect') {
+                this.setCustomListData(dataSource, fields, query, e);
+            }
+            else {
+                this.setListData(dataSource, fields, query, e);
+            }
         }
     };
     DropDownBase.prototype.updateSelectElementData = function (isFiltering) {

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

@@ -1584,6 +1584,9 @@ var DropDownList = /** @class */ (function (_super) {
         }
         if (!isNullOrUndefined(dataItem.value) && !this.enableVirtualization && this.allowFiltering) {
             this.activeIndex = this.getIndexByValueFilter(dataItem.value, this.actionCompleteData.ulElement);
+            if (isNullOrUndefined(this.activeIndex)) {
+                this.activeIndex = this.getIndexByValue(dataItem.value);
+            }
         }
         var clearIcon = dropDownListClasses.clearIcon;
         var isFilterElement = this.isFiltering() && this.filterInput && (this.getModuleName() === 'combobox');

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

@@ -725,7 +725,7 @@ var DropDownTree = /** @class */ (function (_super) {
         if (this.isPopupOpen) {
             this.hidePopup();
         }
-        else if (!(e instanceof TouchEvent) && e.button !== 2) {
+        else if (e.type === 'touchstart' || ('button' in e && e.button !== 2)) {
             this.focusIn(e);
             this.renderPopup();
         }

package/src/list-box/list-box.d.ts

@@ -137,6 +137,7 @@ export declare class ListBox extends DropDownBase {
     private customDraggedItem;
     private timer;
     private inputFormName;
+    private selectedListItemCount;
     /**
      * Sets the CSS classes to root element of this component, which helps to customize the
      * complete styles.

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

@@ -194,6 +194,22 @@ var ListBox = /** @class */ (function (_super) {
             this.unSelectAllText = l10nSelect.getConstant('unSelectAllText');
             this.popupWrapper = this.list;
             this.checkBoxSelectionModule.checkAllParent = null;
+            if (this.filterParent) {
+                var parentNode = this.filterParent.parentNode;
+                if (parentNode) {
+                    var firstChild = this.filterParent.querySelector('input.e-input-filter');
+                    if (!firstChild.classList.contains('e-input-focus') && !firstChild.classList.contains('e-valid-input')
+                        && this.selectedListItemCount === 0) {
+                        this.filterParent = null;
+                    }
+                    if (this.selectedListItemCount > 0 && this.showSelectAll) {
+                        this.filterParent = null;
+                    }
+                }
+                else {
+                    this.filterParent = null;
+                }
+            }
             this.notify('selectAll', {});
         }
     };
@@ -303,7 +319,7 @@ var ListBox = /** @class */ (function (_super) {
     ListBox.prototype.setHeight = function () {
         var ele = this.toolbarSettings.items.length ? this.list.parentElement : this.list;
         ele.style.height = formatUnit(this.height);
-        if (this.allowFiltering && this.height.toString().indexOf('%') < 0) {
+        if (this.allowFiltering && this.height.toString().indexOf('%') > 0) {
             addClass([this.list], 'e-filter-list');
         }
         else {
@@ -392,6 +408,7 @@ var ListBox = /** @class */ (function (_super) {
             }
         }
         _super.prototype.onActionComplete.call(this, ulElement, list, e);
+        this.initWrapper();
         if (this.allowFiltering && !isNullOrUndefined(searchEle)) {
             this.list.insertBefore(searchEle, this.list.firstElementChild);
             this.filterParent = this.list.getElementsByClassName('e-filter-parent')[0];
@@ -410,7 +427,6 @@ var ListBox = /** @class */ (function (_super) {
                 });
             }
         }
-        this.initWrapper();
         this.setSelection(this.value, true, false, !this.isRendered);
         this.initDraggable();
         this.mainList = this.ulElement;
@@ -1231,6 +1247,7 @@ var ListBox = /** @class */ (function (_super) {
             }
         }
         var len = this.getSelectedItems().length;
+        this.selectedListItemCount = len;
         if (this.showSelectAll && searchCount) {
             this.notify('checkSelectAll', { module: 'CheckBoxSelection',
                 value: (searchCount === len) ? 'check' : (len === 0) ? 'uncheck' : 'indeterminate' });
@@ -2049,7 +2066,8 @@ var ListBox = /** @class */ (function (_super) {
             e.preventDefault();
             return;
         }
-        var char = String.fromCharCode(e.keyCode);
+        var char = e.code && e.keyCode >= 96 && e.keyCode <= 105 ?
+            String.fromCharCode(e.keyCode - 48) : String.fromCharCode(e.keyCode);
         var isWordCharacter = char.match(/\w/);
         var isWordAccentCharacter = char.match(/[A-Za-z0-9\u00C0-\u024F ]/);
         if (!isNullOrUndefined(isWordCharacter) || !isNullOrUndefined(isWordAccentCharacter)) {

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

@@ -1115,6 +1115,7 @@ var MultiSelect = /** @class */ (function (_super) {
     MultiSelect.prototype.checkForCustomValue = function (query, fields) {
         var dataChecks = !this.getValueByText(this.inputElement.value, this.ignoreCase);
         var field = fields ? fields : this.fields;
+        this.isCustomReset = true;
         if (this.allowCustomValue && dataChecks) {
             var value = this.inputElement.value;
             var customData = (!isNullOrUndefined(this.mainData) && this.mainData.length > 0) ?
@@ -1168,6 +1169,7 @@ var MultiSelect = /** @class */ (function (_super) {
                     var tempData = JSON.parse(JSON.stringify(this.listData));
                     tempData.splice(0, 0, dataItem_1);
                     this.resetList(tempData, field, query);
+                    this.focusAtLastListItem(value);
                 }
             }
             else if (this.listData) {
@@ -1196,6 +1198,7 @@ var MultiSelect = /** @class */ (function (_super) {
                 }
             }
         }
+        this.isCustomReset = false;
         if (this.value && this.value.length) {
             this.refreshSelection();
         }
@@ -2469,11 +2472,20 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.removeChipSelection = function () {
         if (this.chipCollectionWrapper) {
+            var selectedChips = this.chipCollectionWrapper.querySelectorAll('span.' + CHIP + '.' + CHIP_SELECTED);
+            if (selectedChips && selectedChips.length > 0) {
+                for (var i = 0; i < selectedChips.length; i++) {
+                    selectedChips[i].removeAttribute('aria-live');
+                }
+            }
             this.removeChipFocus();
         }
     };
     MultiSelect.prototype.addChipSelection = function (element, e) {
         addClass([element], CHIP_SELECTED);
+        if (element) {
+            element.setAttribute('aria-live', 'polite');
+        }
         this.trigger('chipSelection', e);
     };
     MultiSelect.prototype.getVirtualDataByValue = function (value) {
@@ -2674,6 +2686,9 @@ var MultiSelect = /** @class */ (function (_super) {
                         var collection = _this.list.querySelectorAll('li.'
                             + dropDownBaseClasses.li + ':not(.e-active)');
                         removeClass(collection, 'e-disable');
+                        var mainListCollection = _this.mainList.querySelectorAll('li.'
+                            + dropDownBaseClasses.li + ':not(.e-active)');
+                        removeClass(mainListCollection, 'e-disable');
                     }
                     _this.trigger('removed', eventArgs);
                     var targetEle_1 = eve && eve.currentTarget;
@@ -2975,7 +2990,7 @@ var MultiSelect = /** @class */ (function (_super) {
         var itemData = { text: value, value: value };
         var chip = this.createElement('span', {
             className: CHIP,
-            attrs: { 'data-value': value, 'title': data }
+            attrs: { 'data-value': value, 'title': data, 'role': 'option', 'aria-selected': 'true' }
         });
         var compiledString;
         var chipContent = this.createElement('span', { className: CHIP_CONTENT });
@@ -4143,6 +4158,11 @@ var MultiSelect = /** @class */ (function (_super) {
             removeClass(selectedItems, className);
             while (temp > 0) {
                 selectedItems[temp - 1].setAttribute('aria-selected', 'false');
+                if (this.mode === 'CheckBox') {
+                    if (selectedItems && (selectedItems.length > (temp - 1))) {
+                        removeClass([selectedItems[temp - 1].firstElementChild.lastElementChild], 'e-check');
+                    }
+                }
                 temp--;
             }
         }
@@ -5856,6 +5876,22 @@ var MultiSelect = /** @class */ (function (_super) {
         else {
             this.setProperties({ value: null }, true);
         }
+        this.checkAndResetCache();
+        if (this.enableVirtualization) {
+            this.updateInitialData();
+            if (this.chipCollectionWrapper) {
+                this.chipCollectionWrapper.innerHTML = '';
+            }
+            if (!this.isCustomDataUpdated) {
+                this.notify('setGeneratedData', {
+                    module: 'VirtualScroll'
+                });
+            }
+            this.list.scrollTop = 0;
+            this.virtualListInfo = null;
+            this.previousStartIndex = 0;
+            this.previousEndIndex = this.itemCount;
+        }
     };
     /**
      * To Initialize the control rendering

package/styles/bds-lite.css

@@ -1169,6 +1169,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 7px;
 }
+.e-ddt.e-float-input .e-float-text.e-label-top {
+  top: 15px;
+}
 
 .e-ddt-icon-hide {
   display: none;
@@ -2716,6 +2719,15 @@ ejs-listbox {
   padding: 12px 12px;
   position: relative;
 }
+.e-listbox-wrapper .e-list-icon,
+.e-listbox-container .e-list-icon,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  height: auto;
+  padding-bottom: 1px;
+}
 
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {

package/styles/bds.css

@@ -1402,6 +1402,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 7px;
 }
+.e-ddt.e-float-input .e-float-text.e-label-top {
+  top: 15px;
+}
 
 .e-ddt-icon-hide {
   display: none;
@@ -3429,6 +3432,15 @@ ejs-listbox {
   padding: 12px 12px;
   position: relative;
 }
+.e-listbox-wrapper .e-list-icon,
+.e-listbox-container .e-list-icon,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  height: auto;
+  padding-bottom: 1px;
+}
 
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {

package/styles/bootstrap-dark-lite.css

@@ -970,6 +970,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 10px;
 }
+.e-ddt.e-float-input .e-float-text.e-label-top {
+  top: 15px;
+}
 
 .e-ddt-icon-hide {
   display: none;
@@ -2504,6 +2507,15 @@ ejs-listbox {
   padding: 13px 16px;
   position: relative;
 }
+.e-listbox-wrapper .e-list-icon,
+.e-listbox-container .e-list-icon,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  height: auto;
+  padding-bottom: 0;
+}
 
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {

package/styles/bootstrap-dark.css

@@ -1147,6 +1147,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 10px;
 }
+.e-ddt.e-float-input .e-float-text.e-label-top {
+  top: 15px;
+}
 
 .e-ddt-icon-hide {
   display: none;
@@ -3077,6 +3080,15 @@ ejs-listbox {
   padding: 13px 16px;
   position: relative;
 }
+.e-listbox-wrapper .e-list-icon,
+.e-listbox-container .e-list-icon,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  height: auto;
+  padding-bottom: 0;
+}
 
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {

package/styles/bootstrap-lite.css

@@ -973,6 +973,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 10px;
 }
+.e-ddt.e-float-input .e-float-text.e-label-top {
+  top: 15px;
+}
 
 .e-ddt-icon-hide {
   display: none;
@@ -2500,6 +2503,15 @@ ejs-listbox {
   padding: 13px 16px;
   position: relative;
 }
+.e-listbox-wrapper .e-list-icon,
+.e-listbox-container .e-list-icon,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  height: auto;
+  padding-bottom: 0;
+}
 
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {

package/styles/bootstrap.css

@@ -1150,6 +1150,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 10px;
 }
+.e-ddt.e-float-input .e-float-text.e-label-top {
+  top: 15px;
+}
 
 .e-ddt-icon-hide {
   display: none;
@@ -3073,6 +3076,15 @@ ejs-listbox {
   padding: 13px 16px;
   position: relative;
 }
+.e-listbox-wrapper .e-list-icon,
+.e-listbox-container .e-list-icon,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  height: auto;
+  padding-bottom: 0;
+}
 
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {

package/styles/bootstrap4-lite.css

@@ -1006,6 +1006,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 8px;
 }
+.e-ddt.e-float-input .e-float-text.e-label-top {
+  top: 15px;
+}
 
 .e-ddt-icon-hide {
   display: none;
@@ -2605,6 +2608,15 @@ ejs-listbox {
   padding: 10px 16px 10px 16px;
   position: relative;
 }
+.e-listbox-wrapper .e-list-icon,
+.e-listbox-container .e-list-icon,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  height: auto;
+  padding-bottom: 1px;
+}
 
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {

package/styles/bootstrap4.css

@@ -1201,6 +1201,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 8px;
 }
+.e-ddt.e-float-input .e-float-text.e-label-top {
+  top: 15px;
+}
 
 .e-ddt-icon-hide {
   display: none;
@@ -3303,6 +3306,15 @@ ejs-listbox {
   padding: 10px 16px 10px 16px;
   position: relative;
 }
+.e-listbox-wrapper .e-list-icon,
+.e-listbox-container .e-list-icon,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  height: auto;
+  padding-bottom: 1px;
+}
 
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {

package/styles/bootstrap5-dark-lite.css

@@ -1025,6 +1025,9 @@ ejs-dropdownlist {
 .e-ddt.e-rtl.e-popup .e-selectall-parent .e-all-text {
   margin: 0 8px;
 }
+.e-ddt.e-float-input .e-float-text.e-label-top {
+  top: 15px;
+}
 
 .e-ddt-icon-hide {
   display: none;
@@ -2582,6 +2585,15 @@ ejs-listbox {
   padding: 10px 12px;
   position: relative;
 }
+.e-listbox-wrapper .e-list-icon,
+.e-listbox-container .e-list-icon,
+.e-listboxtool-wrapper .e-listbox-wrapper .e-list-icon {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+  height: auto;
+  padding-bottom: 2px;
+}
 
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {