@syncfusion/ej2-dropdowns 19.4.52 → 19.4.56

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.52
+*  version : 19.4.56
 *  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@19.4.50",
+  "_id": "@syncfusion/ej2-dropdowns@19.4.55",
   "_inBundle": false,
-  "_integrity": "sha512-QGOybqNswXLGfBBVUE/0SV+yldUhsGaD7afKpCsXy7IUVChGACHOc4UM0tXjg8pzUt34IEeE/2UqidkskhFoVw==",
+  "_integrity": "sha512-ZOsoaEJe3E8FnWEX/o0UCj2o2SG+mtKNG8O+tiwkzIXvpapZv3dlxjgpTcHJ7UzequRs1e4Nzu2aXkQktYMwMQ==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -33,8 +33,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-19.4.50.tgz",
-  "_shasum": "a96bfa5151c3c55ebf48b93efa6ee4610536d2ec",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-19.4.55.tgz",
+  "_shasum": "3b22435822f074bd074a4ec707cd9eb7e92c26bd",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -43,11 +43,11 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~19.4.52",
-    "@syncfusion/ej2-data": "~19.4.52",
+    "@syncfusion/ej2-data": "~19.4.54",
     "@syncfusion/ej2-inputs": "~19.4.52",
-    "@syncfusion/ej2-lists": "~19.4.52",
-    "@syncfusion/ej2-navigations": "~19.4.52",
-    "@syncfusion/ej2-popups": "~19.4.52"
+    "@syncfusion/ej2-lists": "~19.4.55",
+    "@syncfusion/ej2-navigations": "~19.4.56",
+    "@syncfusion/ej2-popups": "~19.4.53"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -72,6 +72,6 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "19.4.52",
+  "version": "19.4.56",
   "sideEffects": false
 }

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

@@ -216,12 +216,15 @@ var ComboBox = /** @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ComboBox.prototype.onActionComplete = function (ulElement, list, e, isUpdated) {
+        var _this = this;
         _super.prototype.onActionComplete.call(this, ulElement, list, e);
         if (this.isSelectCustom) {
             this.removeSelection();
         }
         if (!this.preventAutoFill && this.getModuleName() === 'combobox' && this.isTyped) {
-            this.inlineSearch();
+            setTimeout(function () {
+                _this.inlineSearch();
+            });
         }
     };
     ComboBox.prototype.getFocusElement = function () {

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

@@ -901,13 +901,10 @@ var DropDownTree = /** @class */ (function (_super) {
             var l10nLocale = { overflowCountTemplate: '+${count} more..', totalCountTemplate: '${count} selected' };
             this.l10n = new L10n(this.getLocaleName(), l10nLocale, this.locale);
             var remainContent = this.l10n.getConstant('overflowCountTemplate');
+            var totalContent = this.l10n.getConstant('totalCountTemplate');
             var remainElement = this.createElement('span', { className: REMAIN_WRAPPER });
-            // eslint-disable-next-line
-            var compiledString = compile(remainContent);
-            // eslint-disable-next-line
-            var totalCompiledString = compile(this.l10n.getConstant('totalCountTemplate'));
-            remainElement.appendChild(compiledString({ 'count': this.value.length }, this, 'overflowCountTemplate', null, !this.isStringTemplate)[0]);
             this.overFlowWrapper.appendChild(remainElement);
+            remainElement.innerText = remainContent.replace('${count}', this.value.length.toString());
             var remainSize = remainElement.offsetWidth;
             remove(remainElement);
             if (this.showDropDownIcon) {
@@ -989,7 +986,7 @@ var DropDownTree = /** @class */ (function (_super) {
                 }
             }
             if (remaining > 0) {
-                this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, compiledString, totalCompiledString));
+                this.overFlowWrapper.appendChild(this.updateRemainTemplate(remainElement, remaining, remainContent, totalContent));
             }
             if (this.mode === 'Box' && !this.overFlowWrapper.classList.contains(TOTAL_COUNT_WRAPPER)) {
                 addClass([remainElement], REMAIN_COUNT);
@@ -1001,19 +998,14 @@ var DropDownTree = /** @class */ (function (_super) {
         }
         this.updateDelimMode();
     };
-    DropDownTree.prototype.updateRemainTemplate = function (remainElement, remaining, 
-    // eslint-disable-next-line
-    compiledString, 
-    // eslint-disable-next-line
-    totalCompiledString) {
+    DropDownTree.prototype.updateRemainTemplate = function (remainElement, remaining, remainContent, totalContent) {
         if (this.overFlowWrapper.firstChild && this.overFlowWrapper.firstChild.nodeType === 3 &&
             this.overFlowWrapper.firstChild.nodeValue === '') {
             this.overFlowWrapper.removeChild(this.overFlowWrapper.firstChild);
         }
         remainElement.innerHTML = '';
-        remainElement.appendChild((this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) ?
-            compiledString({ 'count': remaining }, this, 'overflowCountTemplate', null, !this.isStringTemplate)[0] :
-            totalCompiledString({ 'count': remaining }, this, 'totalCountTemplate', null, !this.isStringTemplate)[0]);
+        remainElement.innerText = (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) ?
+            remainContent.replace('${count}', remaining.toString()) : totalContent.replace('${count}', remaining.toString());
         if (this.overFlowWrapper.firstChild && (this.overFlowWrapper.firstChild.nodeType === 3 || this.mode === 'Box')) {
             removeClass([this.overFlowWrapper], TOTAL_COUNT_WRAPPER);
         }

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

@@ -420,6 +420,38 @@ var ListBox = /** @class */ (function (_super) {
         });
     };
     ListBox.prototype.triggerDrag = function (args) {
+        var scrollParent;
+        var boundRect;
+        var scrollMoved = 36;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var event = args.event;
+        var wrapper;
+        if (args.target && (args.target.classList.contains("e-listbox-wrapper") || args.target.classList.contains("e-list-item")
+            || args.target.classList.contains("e-filter-parent") || args.target.classList.contains("e-input-group"))) {
+            if (args.target.classList.contains("e-list-item") || args.target.classList.contains("e-filter-parent")
+                || args.target.classList.contains("e-input-group")) {
+                wrapper = args.target.closest('.e-listbox-wrapper');
+            }
+            else {
+                wrapper = args.target;
+            }
+            if (this.allowFiltering) {
+                scrollParent = wrapper.querySelector('.e-list-parent');
+            }
+            else {
+                scrollParent = wrapper;
+            }
+            boundRect = scrollParent.getBoundingClientRect();
+            if ((boundRect.y + scrollParent.offsetHeight) - (event.pageY + scrollMoved) < 1) {
+                scrollParent.scrollTop = scrollParent.scrollTop + 10;
+            }
+            else if ((event.pageY - scrollMoved) - boundRect.y < 1) {
+                scrollParent.scrollTop = scrollParent.scrollTop - 10;
+            }
+        }
+        if (args.target === null) {
+            return;
+        }
         this.trigger('drag', this.getDragArgs(args));
         var listObj = this.getComponent(args.target);
         if (listObj && listObj.listData.length === 0) {

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

@@ -491,7 +491,7 @@ var MultiSelect = /** @class */ (function (_super) {
                             addClass([listEle[0]], dropDownBaseClasses.focus);
                         }
                         else {
-                            this.ulElement = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
+                            //EJ2-57588 - for this task, we prevent the ul element cloning ( this.ulElement = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
                             if (!(this.list && this.list.querySelectorAll('.' + dropDownBaseClasses.li).length > 0)) {
                                 this.l10nUpdate();
                                 addClass([this.list], dropDownBaseClasses.noData);
@@ -2470,7 +2470,8 @@ var MultiSelect = /** @class */ (function (_super) {
             var isReactTemplateUpdate = ((this.ulElement.childElementCount > 0 && this.ulElement.children[0].childElementCount > 0) && (this.mainList.children[0].childElementCount < this.ulElement.children[0].childElementCount));
             var isAngularTemplateUpdate = this.itemTemplate && this.ulElement.childElementCount > 0 && (this.ulElement.children[0].childElementCount > 0 || (this.fields.groupBy && this.ulElement.children[1] && this.ulElement.children[1].childElementCount > 0));
             if (isDynamicGroupItemUpdate || isReactTemplateUpdate || isAngularTemplateUpdate) {
-                this.mainList = this.ulElement.cloneNode ? this.ulElement.cloneNode(true) : this.ulElement;
+                //EJ2-57748 - for this task, we prevent the ul element cloning ( this.mainList = this.ulElement.cloneNode ? <HTMLElement>this.ulElement.cloneNode(true) : this.ulElement;)
+                this.mainList = this.ulElement;
             }
         }
     };

package/styles/bootstrap-dark.css

@@ -2253,6 +2253,14 @@ ejs-multiselect {
   width: 16px;
 }
 
+.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
+.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-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #f0f0f0;
 }
@@ -2490,6 +2498,7 @@ ejs-multiselect {
 .e-listbox-wrapper,
 .e-listbox-container {
   -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
   cursor: pointer;
   display: block;
   position: relative;
@@ -2537,11 +2546,6 @@ ejs-multiselect {
   overflow: inherit;
 }
 
-.e-listbox-wrapper.e-filter-list .e-list-parent,
-.e-listbox-container.e-filter-list .e-list-parent {
-  overflow: auto;
-}
-
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent {
   height: 100%;
@@ -2824,6 +2828,14 @@ ejs-listbox {
   overflow: auto;
 }
 
+.e-listbox-wrapper.e-filter-list {
+  overflow: inherit;
+}
+
+.e-listbox-wrapper.e-filter-list.e-list-parent {
+  overflow: auto;
+}
+
 .e-listbox-wrapper.e-sortableclone,
 .e-listbox-container.e-sortableclone {
   border-width: 0;

package/styles/bootstrap.css

@@ -2252,6 +2252,14 @@ ejs-multiselect {
   width: 16px;
 }
 
+.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
+.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-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #333;
 }
@@ -2489,6 +2497,7 @@ ejs-multiselect {
 .e-listbox-wrapper,
 .e-listbox-container {
   -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
   cursor: pointer;
   display: block;
   position: relative;
@@ -2536,11 +2545,6 @@ ejs-multiselect {
   overflow: inherit;
 }
 
-.e-listbox-wrapper.e-filter-list .e-list-parent,
-.e-listbox-container.e-filter-list .e-list-parent {
-  overflow: auto;
-}
-
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent {
   height: 100%;
@@ -2823,6 +2827,14 @@ ejs-listbox {
   overflow: auto;
 }
 
+.e-listbox-wrapper.e-filter-list {
+  overflow: inherit;
+}
+
+.e-listbox-wrapper.e-filter-list.e-list-parent {
+  overflow: auto;
+}
+
 .e-listbox-wrapper.e-sortableclone,
 .e-listbox-container.e-sortableclone {
   border-width: 0;

package/styles/bootstrap4.css

@@ -2414,6 +2414,14 @@ ejs-multiselect {
   width: 16px;
 }
 
+.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
+.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-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }
@@ -2673,6 +2681,7 @@ ejs-multiselect {
 .e-listbox-wrapper,
 .e-listbox-container {
   -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
   cursor: pointer;
   display: block;
   position: relative;
@@ -2720,11 +2729,6 @@ ejs-multiselect {
   overflow: inherit;
 }
 
-.e-listbox-wrapper.e-filter-list .e-list-parent,
-.e-listbox-container.e-filter-list .e-list-parent {
-  overflow: auto;
-}
-
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent {
   height: 100%;
@@ -3007,6 +3011,14 @@ ejs-listbox {
   overflow: auto;
 }
 
+.e-listbox-wrapper.e-filter-list {
+  overflow: inherit;
+}
+
+.e-listbox-wrapper.e-filter-list.e-list-parent {
+  overflow: auto;
+}
+
 .e-listbox-wrapper.e-sortableclone,
 .e-listbox-container.e-sortableclone {
   border-width: 0;

package/styles/bootstrap5-dark.css

@@ -2370,6 +2370,14 @@ ejs-multiselect {
   width: 16px;
 }
 
+.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
+.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-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }
@@ -2607,6 +2615,7 @@ ejs-multiselect {
 .e-listbox-wrapper,
 .e-listbox-container {
   -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
   cursor: pointer;
   display: block;
   position: relative;
@@ -2654,11 +2663,6 @@ ejs-multiselect {
   overflow: inherit;
 }
 
-.e-listbox-wrapper.e-filter-list .e-list-parent,
-.e-listbox-container.e-filter-list .e-list-parent {
-  overflow: auto;
-}
-
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent {
   height: 100%;
@@ -2941,6 +2945,14 @@ ejs-listbox {
   overflow: auto;
 }
 
+.e-listbox-wrapper.e-filter-list {
+  overflow: inherit;
+}
+
+.e-listbox-wrapper.e-filter-list.e-list-parent {
+  overflow: auto;
+}
+
 .e-listbox-wrapper.e-sortableclone,
 .e-listbox-container.e-sortableclone {
   border-width: 0;

package/styles/bootstrap5.css

@@ -2370,6 +2370,14 @@ ejs-multiselect {
   width: 16px;
 }
 
+.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
+.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-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #212529;
 }
@@ -2607,6 +2615,7 @@ ejs-multiselect {
 .e-listbox-wrapper,
 .e-listbox-container {
   -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
   cursor: pointer;
   display: block;
   position: relative;
@@ -2654,11 +2663,6 @@ ejs-multiselect {
   overflow: inherit;
 }
 
-.e-listbox-wrapper.e-filter-list .e-list-parent,
-.e-listbox-container.e-filter-list .e-list-parent {
-  overflow: auto;
-}
-
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent {
   height: 100%;
@@ -2941,6 +2945,14 @@ ejs-listbox {
   overflow: auto;
 }
 
+.e-listbox-wrapper.e-filter-list {
+  overflow: inherit;
+}
+
+.e-listbox-wrapper.e-filter-list.e-list-parent {
+  overflow: auto;
+}
+
 .e-listbox-wrapper.e-sortableclone,
 .e-listbox-container.e-sortableclone {
   border-width: 0;

package/styles/fabric-dark.css

@@ -2230,6 +2230,14 @@ ejs-multiselect {
   width: 16px;
 }
 
+.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
+.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-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }
@@ -2467,6 +2475,7 @@ ejs-multiselect {
 .e-listbox-wrapper,
 .e-listbox-container {
   -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
   cursor: pointer;
   display: block;
   position: relative;
@@ -2514,11 +2523,6 @@ ejs-multiselect {
   overflow: inherit;
 }
 
-.e-listbox-wrapper.e-filter-list .e-list-parent,
-.e-listbox-container.e-filter-list .e-list-parent {
-  overflow: auto;
-}
-
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent {
   height: 100%;
@@ -2801,6 +2805,14 @@ ejs-listbox {
   overflow: auto;
 }
 
+.e-listbox-wrapper.e-filter-list {
+  overflow: inherit;
+}
+
+.e-listbox-wrapper.e-filter-list.e-list-parent {
+  overflow: auto;
+}
+
 .e-listbox-wrapper.e-sortableclone,
 .e-listbox-container.e-sortableclone {
   border-width: 0;

package/styles/fabric.css

@@ -2224,6 +2224,14 @@ ejs-multiselect {
   width: 16px;
 }
 
+.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
+.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-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #666;
 }
@@ -2461,6 +2469,7 @@ ejs-multiselect {
 .e-listbox-wrapper,
 .e-listbox-container {
   -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
   cursor: pointer;
   display: block;
   position: relative;
@@ -2508,11 +2517,6 @@ ejs-multiselect {
   overflow: inherit;
 }
 
-.e-listbox-wrapper.e-filter-list .e-list-parent,
-.e-listbox-container.e-filter-list .e-list-parent {
-  overflow: auto;
-}
-
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent {
   height: 100%;
@@ -2795,6 +2799,14 @@ ejs-listbox {
   overflow: auto;
 }
 
+.e-listbox-wrapper.e-filter-list {
+  overflow: inherit;
+}
+
+.e-listbox-wrapper.e-filter-list.e-list-parent {
+  overflow: auto;
+}
+
 .e-listbox-wrapper.e-sortableclone,
 .e-listbox-container.e-sortableclone {
   border-width: 0;

package/styles/highcontrast-light.css

@@ -2364,6 +2364,14 @@ ejs-multiselect {
   width: 16px;
 }
 
+.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
+.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-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #fff;
 }
@@ -2609,6 +2617,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
 .e-listbox-wrapper,
 .e-listbox-container {
   -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
   cursor: pointer;
   display: block;
   position: relative;
@@ -2656,11 +2665,6 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   overflow: inherit;
 }
 
-.e-listbox-wrapper.e-filter-list .e-list-parent,
-.e-listbox-container.e-filter-list .e-list-parent {
-  overflow: auto;
-}
-
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent {
   height: 100%;
@@ -2943,6 +2947,14 @@ ejs-listbox {
   overflow: auto;
 }
 
+.e-listbox-wrapper.e-filter-list {
+  overflow: inherit;
+}
+
+.e-listbox-wrapper.e-filter-list.e-list-parent {
+  overflow: auto;
+}
+
 .e-listbox-wrapper.e-sortableclone,
 .e-listbox-container.e-sortableclone {
   border-width: 0;

package/styles/highcontrast.css

@@ -2371,6 +2371,14 @@ ejs-multiselect {
   width: 16px;
 }
 
+.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-outline.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-filled.e-multiselect.e-control-wrapper.e-input-group.e-readonly .e-clear-icon,
+.e-multiselect.e-readonly.e-control-wrapper.e-input-group.e-control-container :not(.e-disabled).e-multi-select-wrapper:hover .e-clear-icon,
+.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-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
   color: #000;
 }
@@ -2616,6 +2624,7 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
 .e-listbox-wrapper,
 .e-listbox-container {
   -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
   cursor: pointer;
   display: block;
   position: relative;
@@ -2663,11 +2672,6 @@ e-ddl.e-popup.e-multi-select-list-wrapper.e-multiselct-group.e-checkbox .e-list-
   overflow: inherit;
 }
 
-.e-listbox-wrapper.e-filter-list .e-list-parent,
-.e-listbox-container.e-filter-list .e-list-parent {
-  overflow: auto;
-}
-
 .e-listbox-wrapper .e-list-parent,
 .e-listbox-container .e-list-parent {
   height: 100%;
@@ -2950,6 +2954,14 @@ ejs-listbox {
   overflow: auto;
 }
 
+.e-listbox-wrapper.e-filter-list {
+  overflow: inherit;
+}
+
+.e-listbox-wrapper.e-filter-list.e-list-parent {
+  overflow: auto;
+}
+
 .e-listbox-wrapper.e-sortableclone,
 .e-listbox-container.e-sortableclone {
   border-width: 0;

package/styles/list-box/_layout.scss

@@ -3,6 +3,7 @@
   .e-listbox-wrapper,
   .e-listbox-container {
     -webkit-overflow-scrolling: touch;
+    box-sizing: border-box;
     cursor: pointer;
     display: block;
     position: relative;
@@ -42,10 +43,6 @@
 
     &.e-filter-list {
       overflow: inherit;
-
-      & .e-list-parent {
-        overflow: auto;
-      }
     }
 
     .e-list-parent {
@@ -290,6 +287,17 @@
     overflow: auto;
   }
 
+  .e-listbox-wrapper {
+
+    &.e-filter-list {
+      overflow: inherit;
+
+      &.e-list-parent {
+        overflow: auto;
+      }
+    }
+  }
+
   .e-listbox-wrapper.e-sortableclone,
   .e-listbox-container.e-sortableclone {
     border-width: 0;