@syncfusion/ej2-dropdowns 24.1.45 → 24.1.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.1.45
+*  version : 24.1.47
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@24.1.43",
+  "_id": "@syncfusion/ej2-dropdowns@24.1.46",
   "_inBundle": false,
-  "_integrity": "sha512-7DzauttMXiQ609dAykUbLBCa8+zRRvmj3zeTovCyxf1xX5nUvCiX97BBq6W+hw6zsZcxDDP5I578cYtr+ZVT4g==",
+  "_integrity": "sha512-6ttJwAJ0s01v8PmOfQxYKsoFj/rRd0vyw/NFV3giPq6tMJeNAPBM3CT7KvSrV/GnEf6hrfcqtr1DWisD3wNB5g==",
   "_location": "/@syncfusion/ej2-dropdowns",
   "_phantomChildren": {},
   "_requested": {
@@ -34,8 +34,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-dropdowns"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-24.1.43.tgz",
-  "_shasum": "701d451c8b2edac1cdb8265fd8ed788ec67924cc",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-24.1.46.tgz",
+  "_shasum": "77730cdc21251e20eb60d0be19bc556ff7aa89d4",
   "_spec": "@syncfusion/ej2-dropdowns@*",
   "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
   "author": {
@@ -43,13 +43,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.1.42",
+    "@syncfusion/ej2-base": "~24.1.46",
     "@syncfusion/ej2-data": "~24.1.41",
-    "@syncfusion/ej2-inputs": "~24.1.45",
-    "@syncfusion/ej2-lists": "~24.1.41",
-    "@syncfusion/ej2-navigations": "~24.1.41",
+    "@syncfusion/ej2-inputs": "~24.1.47",
+    "@syncfusion/ej2-lists": "~24.1.46",
+    "@syncfusion/ej2-navigations": "~24.1.46",
     "@syncfusion/ej2-notifications": "~24.1.41",
-    "@syncfusion/ej2-popups": "~24.1.44"
+    "@syncfusion/ej2-popups": "~24.1.46"
   },
   "deprecated": false,
   "description": "Essential JS 2 DropDown Components",
@@ -74,7 +74,7 @@
   "module": "./index.js",
   "name": "@syncfusion/ej2-dropdowns",
   "typings": "index.d.ts",
-  "version": "24.1.45",
+  "version": "24.1.47",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -800,24 +800,27 @@ var DropDownBase = /** @class */ (function (_super) {
      * @returns {HTMLElement} Return the ul li list items.
      */
     DropDownBase.prototype.createListItems = function (dataSource, fields) {
-        if (dataSource && fields.groupBy || this.element.querySelector('optgroup')) {
-            if (fields.groupBy) {
-                if (this.sortOrder !== 'None') {
-                    dataSource = this.getSortedDataSource(dataSource);
+        if (dataSource) {
+            if (fields.groupBy || this.element.querySelector('optgroup')) {
+                if (fields.groupBy) {
+                    if (this.sortOrder !== 'None') {
+                        dataSource = this.getSortedDataSource(dataSource);
+                    }
+                    dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);
                 }
-                dataSource = ListBase.groupDataSource(dataSource, fields.properties, this.sortOrder);
+                addClass([this.list], dropDownBaseClasses.grouping);
             }
-            addClass([this.list], dropDownBaseClasses.grouping);
-        }
-        else {
-            dataSource = this.getSortedDataSource(dataSource);
+            else {
+                dataSource = this.getSortedDataSource(dataSource);
+            }
+            var options = this.listOption(dataSource, fields);
+            var spliceData = (dataSource.length > 100) ?
+                new DataManager(dataSource).executeLocal(new Query().take(100))
+                : dataSource;
+            this.sortedData = dataSource;
+            return ListBase.createList(this.createElement, (this.getModuleName() === 'autocomplete') ? spliceData : dataSource, options, true, this);
         }
-        var options = this.listOption(dataSource, fields);
-        var spliceData = (dataSource.length > 100) ?
-            new DataManager(dataSource).executeLocal(new Query().take(100))
-            : dataSource;
-        this.sortedData = dataSource;
-        return ListBase.createList(this.createElement, (this.getModuleName() === 'autocomplete') ? spliceData : dataSource, options, true, this);
+        return null;
     };
     DropDownBase.prototype.listOption = function (dataSource, fields) {
         var iconCss = isNullOrUndefined(fields.iconCss) ? false : true;
@@ -905,7 +908,8 @@ var DropDownBase = /** @class */ (function (_super) {
     };
     DropDownBase.prototype.updateGroupFixedHeader = function (element, target) {
         this.fixedHeaderElement.innerHTML = element.innerHTML;
-        this.fixedHeaderElement.style.top = target.scrollTop + 'px';
+        this.fixedHeaderElement.style.position = 'fixed';
+        this.fixedHeaderElement.style.top = this.list.parentElement.offsetTop + this.list.offsetTop + 'px';
         this.fixedHeaderElement.style.display = 'block';
     };
     DropDownBase.prototype.getValidLi = function () {
@@ -1080,10 +1084,12 @@ var DropDownBase = /** @class */ (function (_super) {
     DropDownBase.prototype.getIndexByValueFilter = function (value) {
         var index;
         var listItems = this.renderItems(this.selectData, this.fields);
-        for (var i = 0; i < listItems.children.length; i++) {
-            if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
-                index = i;
-                break;
+        if (listItems && listItems.children) {
+            for (var i = 0; i < listItems.children.length; i++) {
+                if (!isNullOrUndefined(value) && listItems.children[i].getAttribute('data-value') === value.toString()) {
+                    index = i;
+                    break;
+                }
             }
         }
         return index;

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

@@ -567,6 +567,7 @@ export declare class DropDownList extends DropDownBase implements IInput {
     protected getFocusElement(): void;
     private isFilterLayout;
     private scrollHandler;
+    private isElementInViewport;
     private setSearchBoxPosition;
     private setPopupPosition;
     private setWidth;

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

@@ -2594,9 +2594,16 @@ var DropDownList = /** @class */ (function (_super) {
     DropDownList.prototype.scrollHandler = function () {
         if (Browser.isDevice && ((this.getModuleName() === 'dropdownlist' &&
             !this.isFilterLayout()) || (this.getModuleName() === 'combobox' && !this.allowFiltering && this.isDropDownClick))) {
-            this.hidePopup();
+            if (this.element && !(this.isElementInViewport(this.element))) {
+                this.hidePopup();
+            }
         }
     };
+    DropDownList.prototype.isElementInViewport = function (element) {
+        var elementRect = element.getBoundingClientRect();
+        return (elementRect.top >= 0 && elementRect.left >= 0 && elementRect.bottom <= window.innerHeight && elementRect.right <= window.innerWidth);
+    };
+    ;
     DropDownList.prototype.setSearchBoxPosition = function () {
         var searchBoxHeight = this.filterInput.parentElement.getBoundingClientRect().height;
         this.popupObj.element.style.maxHeight = '100%';
@@ -3742,7 +3749,7 @@ var DropDownList = /** @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
-        if (!this.enableVirtualization && this.getModuleName() === 'combobox') {
+        if (!this.enableVirtualization && (this.getModuleName() === 'combobox' || this.getModuleName() === 'autocomplete')) {
             this.isTyped = true;
         }
         this.hidePopup(e);

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

@@ -731,11 +731,13 @@ export declare class DropDownTree extends Component<HTMLElement> implements INot
      * @returns {void}
      */
     render(): void;
-    private ensureAutoCheck;
     private hideCheckAll;
     private renderFilter;
     private filterChangeHandler;
+    private isChildObject;
     private filterHandler;
+    private remoteDataFilter;
+    private remoteChildFilter;
     private nestedFilter;
     private nestedChildFilter;
     private selfReferencefilter;

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

@@ -256,7 +256,6 @@ var DropDownTree = /** @class */ (function (_super) {
             var popupDiv = select('#' + this.element.id + '_options', document);
             detach(popupDiv ? popupDiv : isTree.parentElement);
         }
-        this.ensureAutoCheck();
         if (this.element.tagName === 'INPUT') {
             this.inputEle = this.element;
             if (isNOU(this.inputEle.getAttribute('role'))) {
@@ -343,11 +342,6 @@ var DropDownTree = /** @class */ (function (_super) {
             || this.noRecordsTemplate || this.customTemplate;
         this.renderComplete();
     };
-    DropDownTree.prototype.ensureAutoCheck = function () {
-        if (this.allowFiltering && this.treeSettings.autoCheck) {
-            this.setProperties({ treeSettings: { autoCheck: false } }, true);
-        }
-    };
     DropDownTree.prototype.hideCheckAll = function (flag) {
         var checkAllEle = !isNOU(this.popupEle) ? this.popupEle.querySelector('.' + CHECKALLPARENT) : null;
         if (!isNOU(checkAllEle)) {
@@ -385,10 +379,21 @@ var DropDownTree = /** @class */ (function (_super) {
             this.filterTimer = window.setTimeout(function () { _this.filterHandler(args.value, args.event); }, this.filterDelayTime);
         }
     };
+    DropDownTree.prototype.isChildObject = function () {
+        if (typeof this.treeObj.fields.child === 'object') {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
     DropDownTree.prototype.filterHandler = function (value, event) {
         var _this = this;
         this.isFromFilterChange = true;
         if (!this.isFilteredData) {
+            if (this.isRemoteData) {
+                this.treeObj.expandedNodes = [];
+            }
             this.treeData = this.treeObj.getTreeData();
         }
         var filterFields = this.cloneFields(this.fields);
@@ -418,6 +423,10 @@ var DropDownTree = /** @class */ (function (_super) {
                     }
                     else {
                         if (_this.fields.dataSource instanceof DataManager) {
+                            fields = _this.remoteDataFilter(value, args.fields);
+                            fields.child = _this.fields.child;
+                            _this.treeObj.fields = _this.getTreeFields(args.fields);
+                            _this.treeObj.dataBind();
                             flag = true;
                         }
                         else {
@@ -429,6 +438,14 @@ var DropDownTree = /** @class */ (function (_super) {
                 if (flag) {
                     return;
                 }
+                if (_this.isRemoteData) {
+                    if (_this.isChildObject()) {
+                        fields.child = _this.fields.child;
+                    }
+                    else {
+                        fields = args.fields;
+                    }
+                }
                 _this.treeObj.fields = _this.getTreeFields(fields);
                 _this.treeObj.dataBind();
                 if (_this.hasTemplate && _this.portals && _this.treeObj.portals) {
@@ -444,6 +461,38 @@ var DropDownTree = /** @class */ (function (_super) {
             }
         });
     };
+    DropDownTree.prototype.remoteDataFilter = function (value, filteredFields) {
+        var _this = this;
+        filteredFields.dataSource = this.treeData.map(function (item) {
+            return _this.remoteChildFilter(value, item);
+        }).filter(function (filteredChild) {
+            return !isNOU(filteredChild);
+        });
+        return filteredFields;
+    };
+    DropDownTree.prototype.remoteChildFilter = function (value, node, isChild, isChildFiltering) {
+        var children = this.isChildObject() ? node['child'] : node[this.fields.child];
+        if (isNOU(children)) {
+            return (this.isMatchedNode(value, node, isChild, isChildFiltering)) ? node : null;
+        }
+        var matchedChildren = [];
+        for (var i = 0; i < children.length; i++) {
+            var filteredChild = this.remoteChildFilter(value, children[i], true, true);
+            if (!isNOU(filteredChild)) {
+                matchedChildren.push(filteredChild);
+            }
+        }
+        var filteredItems = Object.assign({}, node);
+        isChildFiltering = false;
+        if (matchedChildren.length !== 0) {
+            filteredItems.child = matchedChildren;
+        }
+        else {
+            filteredItems.child = null;
+            filteredItems = (this.isMatchedNode(value, filteredItems)) ? filteredItems : null;
+        }
+        return filteredItems;
+    };
     DropDownTree.prototype.nestedFilter = function (value, filteredFields) {
         // eslint-disable-next-line
         var matchedDataSource = [];
@@ -525,8 +574,17 @@ var DropDownTree = /** @class */ (function (_super) {
         return filteredFields;
     };
     // eslint-disable-next-line
-    DropDownTree.prototype.isMatchedNode = function (value, node) {
-        var checkValue = node[this.fields.text];
+    DropDownTree.prototype.isMatchedNode = function (value, node, isChild, isChildFiltering) {
+        var checkValue;
+        var isObjectValue = isChild && isChildFiltering && this.isChildObject();
+        checkValue = isObjectValue ? node[this.fields.child.text] : node[this.fields.text];
+        if (!checkValue) {
+            var tempChild = this.fields.child;
+            while (!node[tempChild.text]) {
+                tempChild = tempChild.child;
+            }
+            checkValue = node[tempChild.text];
+        }
         if (this.ignoreCase) {
             checkValue = checkValue.toLowerCase();
             value = value.toLowerCase();
@@ -1488,8 +1546,6 @@ var DropDownTree = /** @class */ (function (_super) {
         if (this.isFilteredData) {
             this.filterObj.value = '';
             this.treeObj.fields = this.getTreeFields(this.fields);
-            if (this.isReact)
-                this.refresh();
             this.isFilterRestore = true;
             this.isFilteredData = false;
             this.hideCheckAll(false);
@@ -1510,12 +1566,18 @@ var DropDownTree = /** @class */ (function (_super) {
                 }
                 else {
                     _this.popupEle = _this.popupObj.element;
+                    if (_this.isReact && _this.isFilterRestore) {
+                        _this.treeObj.refresh();
+                        _this.isFilteredData = true;
+                        _this.popupEle.removeChild(_this.filterContainer);
+                    }
                 }
             }
             else {
                 isCancelled = true;
             }
-            if (_this.isFirstRender && !isCancelled) {
+            if (_this.isFirstRender && !isCancelled || _this.isFilteredData) {
+                _this.isFilteredData = false;
                 prepend([_this.popupDiv], _this.popupEle);
                 removeClass([_this.popupDiv], DDTHIDEICON);
                 if (_this.allowFiltering) {
@@ -1882,6 +1944,9 @@ var DropDownTree = /** @class */ (function (_super) {
             if (this.value === null) {
                 this.setProperties({ value: [] }, true);
             }
+            if (args.node.classList.contains("e-active")) {
+                this.hidePopup();
+            }
         }
     };
     DropDownTree.prototype.updateHiddenValue = function () {
@@ -2541,7 +2606,6 @@ var DropDownTree = /** @class */ (function (_super) {
     DropDownTree.prototype.updateTreeSettings = function (prop) {
         var value = Object.keys(prop.treeSettings)[0];
         if (value === 'autoCheck') {
-            this.ensureAutoCheck();
             this.treeObj.autoCheck = this.treeSettings.autoCheck;
         }
         else if (value === 'loadOnDemand') {
@@ -2662,7 +2726,6 @@ var DropDownTree = /** @class */ (function (_super) {
                 this.destroyFilter();
             }
         }
-        this.ensureAutoCheck();
     };
     DropDownTree.prototype.updateFilterPlaceHolder = function () {
         if (this.filterObj) {

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

@@ -378,6 +378,19 @@ var ListBox = /** @class */ (function (_super) {
             this.list.insertBefore(searchEle, this.list.firstElementChild);
             this.filterParent = this.list.getElementsByClassName('e-filter-parent')[0];
             this.filterWireEvents(searchEle);
+            var inputSearch = searchEle.querySelector('.e-input-filter');
+            if (inputSearch) {
+                inputSearch.addEventListener('focus', function () {
+                    if (!searchEle.childNodes[0].classList.contains('e-input-focus')) {
+                        searchEle.childNodes[0].classList.add('e-input-focus');
+                    }
+                });
+                inputSearch.addEventListener('blur', function () {
+                    if (searchEle.childNodes[0].classList.contains('e-input-focus')) {
+                        searchEle.childNodes[0].classList.remove('e-input-focus');
+                    }
+                });
+            }
         }
         this.initWrapper();
         this.setSelection();

package/src/mention/mention.js

@@ -305,7 +305,8 @@ var Mention = /** @class */ (function (_super) {
             return;
         }
         this.isTyped = e.code !== 'Enter' && e.code !== 'Space' && e.code !== 'ArrowDown' && e.code !== 'ArrowUp' ? true : false;
-        if (document.activeElement != this.inputElement) {
+        var isRteImage = document.activeElement.parentElement && document.activeElement.parentElement.querySelector('.e-rte-image') ? true : false;
+        if (document.activeElement != this.inputElement && !isRteImage) {
             this.inputElement.focus();
         }
         if (this.isContentEditable(this.inputElement)) {
@@ -1222,6 +1223,12 @@ var Mention = /** @class */ (function (_super) {
             if (this.isPopupOpen) {
                 this.hidePopup();
             }
+            //New event to update the RichTextEditor value, when a mention item is selected using mouse click action. 
+            if (!isNullOrUndefined(e.pointerType) && e.pointerType === 'mouse') {
+                var event_1 = new CustomEvent('content-changed', { detail: { click: true } });
+                this.inputElement.dispatchEvent(event_1);
+            }
+            ;
             this.onChangeEvent(e);
         }
     };

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

@@ -327,7 +327,9 @@ var MultiSelect = /** @class */ (function (_super) {
         }
         if (activeElement && activeElement.item !== null) {
             this.addListFocus(activeElement.item);
-            this.scrollBottom(activeElement.item, activeElement.index);
+            if (((this.allowCustomValue || this.allowFiltering) && this.isPopupOpen() && this.closePopupOnSelect) || this.closePopupOnSelect) {
+                this.scrollBottom(activeElement.item, activeElement.index);
+            }
         }
     };
     MultiSelect.prototype.getAriaAttributes = function () {
@@ -3848,10 +3850,10 @@ var MultiSelect = /** @class */ (function (_super) {
             if (!args.cancel) {
                 if (!_this.ulElement) {
                     _this.beforePopupOpen = true;
-                    _super.prototype.render.call(_this, e);
                     if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {
                         _this.notify('popupFullScreen', { module: 'CheckBoxSelection', enable: _this.mode === 'CheckBox' });
                     }
+                    _super.prototype.render.call(_this, e);
                     return;
                 }
                 if (_this.mode === 'CheckBox' && Browser.isDevice && _this.allowFiltering) {

package/styles/bootstrap-dark.css

@@ -536,6 +536,11 @@
   padding: 4px 0;
 }
 
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/bootstrap.css

@@ -536,6 +536,11 @@
   padding: 4px 0;
 }
 
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/bootstrap4.css

@@ -583,6 +583,11 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/bootstrap5-dark.css

@@ -602,6 +602,11 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/bootstrap5.css

@@ -602,6 +602,11 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/_layout.scss

@@ -53,6 +53,11 @@
     }
   }
 
+  .e-popup.e-ddl-device.e-popup-close {
+    display: block;
+    visibility: hidden;
+  }
+
   .e-popup-full-page {
     bottom: 0;
     left: 0;

package/styles/drop-down-list/bootstrap-dark.css

@@ -171,6 +171,11 @@
   padding: 4px 0;
 }
 
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/bootstrap.css

@@ -171,6 +171,11 @@
   padding: 4px 0;
 }
 
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/bootstrap4.css

@@ -218,6 +218,11 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/bootstrap5-dark.css

@@ -231,6 +231,11 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/bootstrap5.css

@@ -231,6 +231,11 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/fabric-dark.css

@@ -147,6 +147,11 @@
   padding: 4px 0;
 }
 
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/fabric.css

@@ -140,6 +140,11 @@
   padding: 4px 0;
 }
 
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/fluent-dark.css

@@ -211,6 +211,11 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/fluent.css

@@ -211,6 +211,11 @@
 .e-bigger.e-ddl.e-popup .e-list-group-item {
   font-size: 16px;
 }
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/highcontrast-light.css

@@ -158,6 +158,11 @@
   padding: 4px 0;
 }
 
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/highcontrast.css

@@ -158,6 +158,11 @@
   padding: 4px 0;
 }
 
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;

package/styles/drop-down-list/material-dark.css

@@ -177,6 +177,11 @@
   padding: 4px 0;
 }
 
+.e-popup.e-ddl-device.e-popup-close {
+  display: block;
+  visibility: hidden;
+}
+
 .e-popup-full-page {
   bottom: 0;
   left: 0;