@syncfusion/ej2-dropdowns 22.2.11 → 23.1.36

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

@@ -3,3 +3,4 @@
  */
 export * from './drop-down-list';
 export * from './drop-down-list-model';
+export * from '../common/virtual-scroll';

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

@@ -2,3 +2,4 @@
  * export all modules from current location
  */
 export * from './drop-down-list';
+export * from '../common/virtual-scroll';

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

@@ -6,7 +6,7 @@ import { DataManager, Query } from '@syncfusion/ej2-data';
 import { Popup } from '@syncfusion/ej2-popups';
 import { DropDownTreeModel, FieldsModel, TreeSettingsModel } from './drop-down-tree-model';
 /**
- * Specifies the different ways to filter values
+ * Specifies the different ways to filter values.
  * ```props
  * StartsWith :- Checks whether a value begins with the specified value.
  * EndsWith :- Checks whether a value ends with the specified value.

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

@@ -2604,8 +2604,6 @@ var DropDownTree = /** @class */ (function (_super) {
             if (tempArr) {
                 tempArr = Array.prototype.slice.call(tempArr);
                 append(tempArr, this.noRecord);
-                addClass([this.noRecord], NODATACONTAINER);
-                prepend([this.noRecord], this.popupDiv);
             }
         }
         else {
@@ -2614,9 +2612,9 @@ var DropDownTree = /** @class */ (function (_super) {
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             this.noRecord.innerHTML = actionFailure ?
                 this.l10n.getConstant('actionFailureTemplate') : this.l10n.getConstant('noRecordsTemplate');
-            addClass([this.noRecord], NODATACONTAINER);
-            prepend([this.noRecord], this.popupDiv);
         }
+        addClass([this.noRecord], NODATACONTAINER);
+        prepend([this.noRecord], this.popupDiv);
     };
     DropDownTree.prototype.updateRecordTemplate = function (action) {
         if (this.treeItems && this.treeItems.length <= 0) {

package/src/global.js

@@ -1,4 +1,7 @@
 import * as index from './index';
+index.DropDownList.Inject(index.VirtualScroll);
+index.ComboBox.Inject(index.VirtualScroll);
+index.AutoComplete.Inject(index.VirtualScroll);
 index.MultiSelect.Inject(index.CheckBoxSelection);
 index.ListBox.Inject(index.CheckBoxSelection);
 export * from './index';

package/src/mention/mention.js

@@ -710,7 +710,9 @@ var Mention = /** @class */ (function (_super) {
                 _this.trigger('opened', eventArgs, function (eventArgs) {
                     if (!eventArgs.cancel) {
                         _this.renderReactTemplates();
-                        _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.inputElement : null);
+                        if (_this.popupObj) {
+                            _this.popupObj.show(new Animation(eventArgs.animation), (_this.zIndex === 1000) ? _this.inputElement : null);
+                        }
                         if (isNullOrUndefined(_this.getTriggerCharPosition())) {
                             return;
                         }
@@ -1423,6 +1425,11 @@ var Mention = /** @class */ (function (_super) {
         if (this.inputElement && !this.inputElement.classList.contains('e-' + this.getModuleName())) {
             return;
         }
+        this.previousSelectedLI = null;
+        this.item = null;
+        this.selectedLI = null;
+        this.inputElement.innerText = null;
+        this.popupObj = null;
         _super.prototype.destroy.call(this);
     };
     Mention.prototype.getLocaleName = function () {

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

@@ -203,7 +203,7 @@ var CheckBoxSelection = /** @class */ (function () {
     };
     CheckBoxSelection.prototype.clickHandler = function (e) {
         var target;
-        if (e.currentTarget.classList.contains(this.checkAllParent.className)) {
+        if (e.currentTarget.classList.contains(this.checkAllParent.className) || (e.currentTarget.classList.value === this.checkAllParent.className)) {
             target = e.currentTarget.firstElementChild.lastElementChild;
         }
         else {

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

@@ -676,6 +676,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private refreshListItems;
     private removeSelectedChip;
     private moveByTop;
+    private clickHandler;
     private moveByList;
     private updateCheck;
     private moveBy;
@@ -699,6 +700,7 @@ export declare class MultiSelect extends DropDownBase implements IInput {
     private removeChipFocus;
     private onMobileChipInteraction;
     private multiCompiler;
+    private encodeHtmlEntities;
     private getChip;
     private calcPopupWidth;
     private mouseIn;

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

@@ -23,7 +23,7 @@ import { DropDownBase, dropDownBaseClasses } from '../drop-down-base/drop-down-b
 import { FieldSettings } from '../drop-down-base/drop-down-base';
 import { Popup, createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import { Input } from '@syncfusion/ej2-inputs';
-import { attributes, setValue, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';
+import { attributes, setValue, getValue } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, extend } from '@syncfusion/ej2-base';
 import { EventHandler, Property, Event, compile, L10n } from '@syncfusion/ej2-base';
 import { Animation, Browser, prepend, Complex } from '@syncfusion/ej2-base';
@@ -264,6 +264,9 @@ var MultiSelect = /** @class */ (function (_super) {
                 if (_this.isFirstClick) {
                     _this.loadTemplate();
                 }
+                if (_this.mode === 'CheckBox' && _this.showSelectAll) {
+                    EventHandler.add(_this.popupObj.element, 'click', _this.clickHandler, _this);
+                }
             }
         });
     };
@@ -1270,11 +1273,19 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.spaceKeySelection = function (e) {
         if (this.mode === 'CheckBox') {
-            if (!document.activeElement.classList.contains(FILTERINPUT)) {
+            var li = this.list.querySelector('li.' + dropDownBaseClasses.focus);
+            var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+            if (!isNullOrUndefined(li) || (selectAllParent && selectAllParent.classList.contains('e-item-focus'))) {
                 e.preventDefault();
                 this.keyAction = true;
             }
             this.selectByKey(e);
+            if (this.keyAction) {
+                var li_1 = this.list.querySelector('li.' + dropDownBaseClasses.focus);
+                if (!isNullOrUndefined(li_1) && selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
+                    li_1.classList.remove('e-item-focus');
+                }
+            }
         }
         this.checkPlaceholderSize();
     };
@@ -1430,9 +1441,6 @@ var MultiSelect = /** @class */ (function (_super) {
             }
         }
         var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
-        if (selectAllParent && !selectAllParent.classList.contains('e-item-focus')) {
-            e.preventDefault();
-        }
         if (selectAllParent && selectAllParent.classList.contains('e-item-focus')) {
             var selectAllCheckBox = selectAllParent.childNodes[0];
             if (!selectAllCheckBox.classList.contains('e-check')) {
@@ -1505,6 +1513,14 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         this.updateAriaAttribute();
     };
+    MultiSelect.prototype.clickHandler = function (e) {
+        var targetElement = e.target;
+        var filterInputClassName = targetElement.className;
+        var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
+        if ((filterInputClassName === 'e-input-filter e-input' || filterInputClassName === 'e-input-group e-control-wrapper e-input-focus') && selectAllParent.classList.contains('e-item-focus')) {
+            selectAllParent.classList.remove('e-item-focus');
+        }
+    };
     MultiSelect.prototype.moveByList = function (position) {
         if (this.list) {
             var elements = this.list.querySelectorAll('li.'
@@ -1519,12 +1535,19 @@ var MultiSelect = /** @class */ (function (_super) {
             var temp = -1;
             var selectAllParent = document.getElementsByClassName('e-selectall-parent')[0];
             if (this.mode === 'CheckBox' && this.showSelectAll && position == 1 && !isNullOrUndefined(selectAllParent) && !selectAllParent.classList.contains('e-item-focus') && this.list.getElementsByClassName('e-item-focus').length == 0 && this.liCollections.length > 1) {
-                selectAllParent.classList.add('e-item-focus');
+                if (!this.focusFirstListItem && selectAllParent.classList.contains('e-item-focus')) {
+                    selectAllParent.classList.remove('e-item-focus');
+                }
+                else if (!selectAllParent.classList.contains('e-item-focus')) {
+                    selectAllParent.classList.add('e-item-focus');
+                }
             }
             else if (elements.length) {
-                if (this.mode === 'CheckBox' && this.showSelectAll && !isNullOrUndefined(selectAllParent)) {
-                    selectAllParent.classList.remove('e-item-focus');
-                    if (this.showSelectAll && position == -1 && !isNullOrUndefined(selectAllParent) && this.liCollections.length > 1 && (this.focusFirstListItem || this.list.getElementsByClassName('e-item-focus').length == 0)) {
+                if (this.mode === 'CheckBox' && this.showSelectAll && !isNullOrUndefined(selectAllParent && position == -1)) {
+                    if (!this.focusFirstListItem && selectAllParent.classList.contains('e-item-focus')) {
+                        selectAllParent.classList.remove('e-item-focus');
+                    }
+                    else if (this.focusFirstListItem && !selectAllParent.classList.contains('e-item-focus')) {
                         selectAllParent.classList.add('e-item-focus');
                     }
                 }
@@ -1956,6 +1979,11 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         return checkTemplate;
     };
+    MultiSelect.prototype.encodeHtmlEntities = function (input) {
+        return input.replace(/[\u00A0-\u9999<>&]/g, function (match) {
+            return "&#" + match.charCodeAt(0) + ";";
+        });
+    };
     MultiSelect.prototype.getChip = function (data, value, e) {
         var _this = this;
         var itemData = { text: value, value: value };
@@ -1988,7 +2016,7 @@ var MultiSelect = /** @class */ (function (_super) {
             chipContent.innerText = data;
         }
         else {
-            chipContent.innerHTML = data;
+            chipContent.innerHTML = this.encodeHtmlEntities(data);
         }
         chip.appendChild(chipContent);
         var eventArgs = {
@@ -3030,10 +3058,10 @@ var MultiSelect = /** @class */ (function (_super) {
     };
     MultiSelect.prototype.updateWrapperText = function (wrapperType, wrapperData) {
         if (this.valueTemplate || !this.enableHtmlSanitizer) {
-            wrapperType.innerHTML = wrapperData;
+            wrapperType.innerHTML = this.encodeHtmlEntities(wrapperData);
         }
         else {
-            wrapperType.innerText = SanitizeHtmlHelper.sanitize(wrapperData);
+            wrapperType.innerText = wrapperData;
         }
     };
     MultiSelect.prototype.updateDelimView = function () {
@@ -3792,6 +3820,9 @@ var MultiSelect = /** @class */ (function (_super) {
                     _this.popupObj.hide();
                     removeClass([document.body, _this.popupObj.element], 'e-popup-full-page');
                     EventHandler.remove(_this.list, 'keydown', _this.onKeyDown);
+                    if (_this.mode === 'CheckBox' && _this.showSelectAll) {
+                        EventHandler.remove(_this.popupObj.element, 'click', _this.clickHandler);
+                    }
                 }
             });
         }

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import '../drop-down-list/bootstrap-dark-definition.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'all.scss';

package/styles/auto-complete/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import '../drop-down-list/bootstrap-definition.scss';
 @import 'bootstrap-definition.scss';
 @import 'all.scss';

package/styles/auto-complete/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import '../drop-down-list/bootstrap4-definition.scss';
 @import 'bootstrap4-definition.scss';
 @import 'all.scss';

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import '../drop-down-list/bootstrap5-dark-definition.scss';
 @import 'bootstrap5-dark-definition.scss';
 @import 'all.scss';

package/styles/auto-complete/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import '../drop-down-list/bootstrap5-definition.scss';
 @import 'bootstrap5-definition.scss';
 @import 'all.scss';

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import '../drop-down-list/fabric-dark-definition.scss';
 @import 'fabric-dark-definition.scss';
 @import 'all.scss';

package/styles/auto-complete/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import '../drop-down-list/fabric-definition.scss';
 @import 'fabric-definition.scss';
 @import 'all.scss';

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

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';
 @import '../drop-down-list/fluent-dark-definition.scss';
 @import 'fluent-dark-definition.scss';
 @import 'all.scss';

package/styles/auto-complete/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import '../drop-down-list/fluent-definition.scss';
 @import 'fluent-definition.scss';
 @import 'all.scss';

package/styles/auto-complete/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import '../drop-down-list/highcontrast-light-definition.scss';
 @import 'highcontrast-light-definition.scss';
 @import 'all.scss';

package/styles/auto-complete/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import '../drop-down-list/highcontrast-definition.scss';
 @import 'highcontrast-definition.scss';
 @import 'all.scss';

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

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
   transform: rotate(0deg);
   transition: transform 300ms ease;

package/styles/auto-complete/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';
 @import '../drop-down-list/material-dark-definition.scss';
 @import 'material-dark-definition.scss';
 @import 'all.scss';

package/styles/auto-complete/material.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
   transform: rotate(0deg);
   transition: transform 300ms ease;

package/styles/auto-complete/material.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-definition.scss';
+@import 'ej2-base/styles/definition/material.scss';
 @import '../drop-down-list/material-definition.scss';
 @import 'material-definition.scss';
 @import 'all.scss';

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

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/auto-complete/material3-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-dark-definition.scss';
+
 
 @import '../drop-down-list/material3-dark-definition.scss';
 @import 'material3-dark-definition.scss';

package/styles/auto-complete/material3.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,900&display=swap");
 :root {
   --color-sf-black: 0, 0, 0;
   --color-sf-white: 255, 255, 255;

package/styles/auto-complete/material3.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material3-definition.scss';
+
 
 @import '../drop-down-list/material3-definition.scss';
 @import 'material3-definition.scss';

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

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
   transform: rotate(0deg);
   transition: transform 300ms ease;

package/styles/auto-complete/tailwind-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-dark-definition.scss';
+@import 'ej2-base/styles/definition/tailwind-dark.scss';
 @import '../drop-down-list/tailwind-dark-definition.scss';
 @import 'tailwind-dark-definition.scss';
 @import 'all.scss';

package/styles/auto-complete/tailwind.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
   transform: rotate(0deg);
   transition: transform 300ms ease;

package/styles/auto-complete/tailwind.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/tailwind-definition.scss';
+@import 'ej2-base/styles/definition/tailwind.scss';
 @import '../drop-down-list/tailwind-definition.scss';
 @import 'tailwind-definition.scss';
 @import 'all.scss';

package/styles/bootstrap-dark.css

@@ -2490,11 +2490,6 @@ ejs-multiselect {
   padding: 13px 16px;
   position: relative;
 }
-.e-listbox-wrapper.e-filter-list,
-.e-listbox-container.e-filter-list,
-.e-listboxtool-wrapper.e-filter-list {
-  overflow: inherit;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -2778,9 +2773,6 @@ ejs-listbox {
   overflow: auto;
 }
 
-.e-listbox-wrapper.e-filter-list {
-  overflow: inherit;
-}
 .e-listbox-wrapper.e-filter-list .e-list-parent {
   overflow: auto;
 }

package/styles/bootstrap.css

@@ -2494,11 +2494,6 @@ ejs-multiselect {
   padding: 13px 16px;
   position: relative;
 }
-.e-listbox-wrapper.e-filter-list,
-.e-listbox-container.e-filter-list,
-.e-listboxtool-wrapper.e-filter-list {
-  overflow: inherit;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -2782,9 +2777,6 @@ ejs-listbox {
   overflow: auto;
 }
 
-.e-listbox-wrapper.e-filter-list {
-  overflow: inherit;
-}
 .e-listbox-wrapper.e-filter-list .e-list-parent {
   overflow: auto;
 }

package/styles/bootstrap4.css

@@ -2671,11 +2671,6 @@ ejs-multiselect {
   padding: 10px 16px 10px 16px;
   position: relative;
 }
-.e-listbox-wrapper.e-filter-list,
-.e-listbox-container.e-filter-list,
-.e-listboxtool-wrapper.e-filter-list {
-  overflow: inherit;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -2959,9 +2954,6 @@ ejs-listbox {
   overflow: auto;
 }
 
-.e-listbox-wrapper.e-filter-list {
-  overflow: inherit;
-}
 .e-listbox-wrapper.e-filter-list .e-list-parent {
   overflow: auto;
 }
@@ -3207,12 +3199,12 @@ ejs-listbox {
 
 .e-small .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small .e-listbox-container.e-filter-list .e-list-parent {
-  height: calc(100% - 32px);
+  height: calc(100% - 43px);
 }
 
 .e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-bigger .e-listbox-container.e-filter-list .e-list-parent {
-  height: calc(100% - 46px);
+  height: calc(100% - 56px);
 }
 
 .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
@@ -3227,7 +3219,7 @@ ejs-listbox {
 
 .e-small.e-bigger .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
-  height: calc(100% - 44px);
+  height: calc(100% - 56px);
 }
 
 .e-listbox-wrapper,
@@ -3254,7 +3246,7 @@ ejs-listbox {
 .e-listbox-wrapper.e-filter-list .e-list-parent,
 .e-listbox-container.e-filter-list .e-list-parent,
 .e-listboxtool-wrapper.e-filter-list .e-list-parent {
-  height: calc(100% - 39px);
+  height: calc(100% - 48px);
 }
 
 .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,

package/styles/bootstrap5-dark.css

@@ -2663,11 +2663,6 @@ ejs-multiselect {
   padding: 10px 12px;
   position: relative;
 }
-.e-listbox-wrapper.e-filter-list,
-.e-listbox-container.e-filter-list,
-.e-listboxtool-wrapper.e-filter-list {
-  overflow: inherit;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -2951,9 +2946,6 @@ ejs-listbox {
   overflow: auto;
 }
 
-.e-listbox-wrapper.e-filter-list {
-  overflow: inherit;
-}
 .e-listbox-wrapper.e-filter-list .e-list-parent {
   overflow: auto;
 }

package/styles/bootstrap5.css

@@ -2663,11 +2663,6 @@ ejs-multiselect {
   padding: 10px 12px;
   position: relative;
 }
-.e-listbox-wrapper.e-filter-list,
-.e-listbox-container.e-filter-list,
-.e-listboxtool-wrapper.e-filter-list {
-  overflow: inherit;
-}
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent,
 .e-listboxtool-wrapper .e-list-parent {
@@ -2951,9 +2946,6 @@ ejs-listbox {
   overflow: auto;
 }
 
-.e-listbox-wrapper.e-filter-list {
-  overflow: inherit;
-}
 .e-listbox-wrapper.e-filter-list .e-list-parent {
   overflow: auto;
 }

package/styles/combo-box/bootstrap-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap-dark.scss';
 @import '../drop-down-list/bootstrap-dark-definition.scss';
 @import 'bootstrap-dark-definition.scss';
 @import 'all.scss';

package/styles/combo-box/bootstrap.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap.scss';
 @import '../drop-down-list/bootstrap-definition.scss';
 @import 'bootstrap-definition.scss';
 @import 'all.scss';

package/styles/combo-box/bootstrap4.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap4.scss';
 @import '../drop-down-list/bootstrap4-definition.scss';
 @import 'bootstrap4-definition.scss';
 @import 'all.scss';

package/styles/combo-box/bootstrap5-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
 @import '../drop-down-list/bootstrap5-dark-definition.scss';
 @import 'bootstrap5-dark-definition.scss';
 @import 'all.scss';

package/styles/combo-box/bootstrap5.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'ej2-base/styles/definition/bootstrap5.scss';
 @import '../drop-down-list/bootstrap5-definition.scss';
 @import 'bootstrap5-definition.scss';
 @import 'all.scss';

package/styles/combo-box/fabric-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'ej2-base/styles/definition/fabric-dark.scss';
 @import '../drop-down-list/fabric-dark-definition.scss';
 @import 'fabric-dark-definition.scss';
 @import 'all.scss';

package/styles/combo-box/fabric.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fabric-definition.scss';
+@import 'ej2-base/styles/definition/fabric.scss';
 @import '../drop-down-list/fabric-definition.scss';
 @import 'fabric-definition.scss';
 @import 'all.scss';

package/styles/combo-box/fluent-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'ej2-base/styles/definition/fluent-dark.scss';
 @import '../drop-down-list/fluent-dark-definition.scss';
 @import 'fluent-dark-definition.scss';
 @import 'all.scss';

package/styles/combo-box/fluent.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/fluent-definition.scss';
+@import 'ej2-base/styles/definition/fluent.scss';
 @import '../drop-down-list/fluent-definition.scss';
 @import 'fluent-definition.scss';
 @import 'all.scss';

package/styles/combo-box/highcontrast-light.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast-light.scss';
 @import '../drop-down-list/highcontrast-light-definition.scss';
 @import 'highcontrast-light-definition.scss';
 @import 'all.scss';

package/styles/combo-box/highcontrast.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'ej2-base/styles/definition/highcontrast.scss';
 @import '../drop-down-list/highcontrast-definition.scss';
 @import 'highcontrast-definition.scss';
 @import 'all.scss';

package/styles/combo-box/material-dark.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
 .e-ddl.e-control-wrapper .e-ddl-icon::before {
   transform: rotate(0deg);
   transition: transform 300ms ease;

package/styles/combo-box/material-dark.scss

@@ -1,4 +1,4 @@
-@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'ej2-base/styles/definition/material-dark.scss';
 @import '../drop-down-list/material-dark-definition.scss';
 @import 'material-dark-definition.scss';
 @import 'all.scss';