@syncfusion/ej2-dropdowns 22.2.12 → 23.1.38

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/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;

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

@@ -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');
                     }
                 }
@@ -2123,7 +2146,8 @@ var MultiSelect = /** @class */ (function (_super) {
                 this.popupObj = new Popup(this.popupWrapper, {
                     width: this.calcPopupWidth(), targetType: 'relative',
                     position: this.enableRtl ? { X: 'right', Y: 'bottom' } : { X: 'left', Y: 'bottom' },
-                    relateTo: this.overAllWrapper, collision: { X: 'flip', Y: 'flip' }, offsetY: 1,
+                    relateTo: this.overAllWrapper,
+                    collision: this.enableRtl ? { X: 'fit', Y: 'flip' } : { X: 'flip', Y: 'flip' }, offsetY: 1,
                     enableRtl: this.enableRtl, zIndex: this.zIndex,
                     close: function () {
                         if (_this.popupObj.element.parentElement) {
@@ -3797,6 +3821,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,700");
 .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;
 }
@@ -2976,27 +2968,66 @@ 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% - 46px);
+  height: calc(100% - 46px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
+  height: calc(100% - 58px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
+  height: calc(100% - 58px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.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% - 58px);
+  height: 100%;
 }
 
 .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
 .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
-  height: calc(100% - 106px);
+  height: calc(100% - 48px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
+  height: calc(100% - 48px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
+  height: calc(100% - 52px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
+  height: calc(100% - 58px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
+  height: 100%;
 }
 
 .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
+.e-bigger .e-listbox-container .e-selectall-parent + .e-list-wrap {
+  height: calc(100% - 48px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
-  height: calc(100% - 48px);
+  height: 100%;
 }
 
 .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-wrap {
+  height: calc(100% - 54px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
+  height: calc(100% - 91.5px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
+  height: calc(100% - 106px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
-  height: calc(100% - 54px);
+  height: 100%;
 }
 
 .e-listbox-wrapper,
@@ -3029,7 +3060,7 @@ ejs-listbox {
 .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
 .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
 .e-listboxtool-wrapper.e-filter-list .e-selectall-parent + .e-list-parent {
-  height: calc(100% - 92px);
+  height: calc(100% - 40px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
@@ -3305,6 +3336,30 @@ ejs-listbox {
   padding-right: 1.0714em;
 }
 
+.e-listbox-container.e-filter-list .e-list-parent {
+  height: 100%;
+}
+
+.e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
+  height: 100%;
+}
+
+.e-listbox-container .e-selectall-parent + .e-list-parent {
+  height: 100%;
+}
+
+.e-listbox-container.e-filter-list .e-list-wrap {
+  height: calc(100% - 51px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-listbox-container.e-filter-list .e-selectall-parent + .e-list-wrap {
+  height: calc(100% - 40px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-listbox-container .e-selectall-parent + .e-list-wrap {
+  height: calc(100% - 40px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {

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;
 }
@@ -2986,27 +2978,66 @@ 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% - 46px);
+  height: calc(100% - 46px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
+  height: calc(100% - 58px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-listbox-container.e-filter-list .e-list-wrap {
+  height: calc(100% - 58px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-.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% - 58px);
+  height: 100%;
 }
 
 .e-bigger .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
 .e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
-  height: calc(100% - 106px);
+  height: calc(100% - 48px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
+  height: calc(100% - 48px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
+  height: calc(100% - 52px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
+  height: calc(100% - 58px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
+  height: 100%;
 }
 
 .e-bigger .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
+.e-bigger .e-listbox-container .e-selectall-parent + .e-list-wrap {
+  height: calc(100% - 40px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-bigger .e-listbox-container .e-selectall-parent + .e-list-parent {
-  height: calc(100% - 48px);
+  height: 100%;
 }
 
 .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-wrap {
+  height: calc(100% - 54px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
+  height: calc(100% - 91.5px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-bigger .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-selectall-parent + .e-hidden-select + .e-listbox + .e-list-parent {
+  height: calc(100% - 106px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 .e-small.e-bigger .e-listbox-container.e-filter-list .e-list-parent {
-  height: calc(100% - 54px);
+  height: 100%;
 }
 
 .e-listbox-wrapper,
@@ -3039,7 +3070,7 @@ ejs-listbox {
 .e-listbox-wrapper.e-filter-list .e-selectall-parent + .e-list-parent,
 .e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent,
 .e-listboxtool-wrapper.e-filter-list .e-selectall-parent + .e-list-parent {
-  height: calc(100% - 92px);
+  height: calc(100% - 40px) !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .e-listbox-wrapper .e-selectall-parent + .e-list-parent,
@@ -3315,6 +3346,30 @@ ejs-listbox {
   padding-right: 1.0714em;
 }
 
+.e-listbox-container.e-filter-list .e-list-parent {
+  height: 100%;
+}
+
+.e-listbox-container.e-filter-list .e-selectall-parent + .e-list-parent {
+  height: 100%;
+}
+
+.e-listbox-container .e-selectall-parent + .e-list-parent {
+  height: 100%;
+}
+
+.e-listbox-container.e-filter-list .e-list-wrap {
+  height: calc(100% - 51px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-listbox-container.e-filter-list .e-selectall-parent + .e-list-wrap {
+  height: calc(100% - 40px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
+.e-listbox-container .e-selectall-parent + .e-list-wrap {
+  height: calc(100% - 40px) !important; /* stylelint-disable-line declaration-no-important */
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {